/* ============================================================
   TAB CONTENT & SELL/AGENTS SECTIONS — Enhanced v2
   ============================================================ */

.tab-content-area {
    display: none !important;
}

    .tab-content-area.active-tab {
        display: flex !important;
        flex-direction: column;
        animation: fadeIn 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Nav Pills Container — opaque white, always readable ── */
.w-fit {
    width: fit-content;
}

.bg-pill-container {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: saturate(200%) blur(24px);
    -webkit-backdrop-filter: saturate(200%) blur(24px);
    border: 1.5px solid rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 1);
    padding: 5px !important;
    border-radius: 60px !important;
    /* Critical: never allow overflow to clip pill text */
    overflow: visible;
    /* Flex row so pills share one line and can scroll */
    display: flex;
    align-items: center;
}

.scrollable-pills {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    /* Fluid gap — collapses slightly on narrow screens */
    gap: clamp(2px, 0.6vw, 6px);
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    /* Prevent container from shrinking past pill content */
    min-width: 0;
}

    .scrollable-pills::-webkit-scrollbar {
        display: none;
    }

/* ── Individual Pills ── */
.nav-pill {
    background: transparent;
    border: none;
    color: #4A5568;
    /*
     * Fluid padding: collapses on small screens.
     * clamp(min, preferred, max)
     * At 320px wide → ~12px sides; at 768px+ → 26px
     */
    padding: 9px clamp(12px, 3.8vw, 26px);
    border-radius: 50px;
    font-weight: 700;
    /* Fluid font: never too small to read, never too large to fit */
    font-size: clamp(0.72rem, 2.4vw, 0.875rem);
    letter-spacing: 0.025em;
    transition: all 0.32s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    cursor: pointer;
    z-index: 1;
    /* The key fix — never let content be clipped or wrapped */
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.2;
    /* Minimum touch target */
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .nav-pill:hover {
        color: #1A1D20;
        background: rgba(255, 255, 255, 0.65);
    }

    .nav-pill.active {
        background: #FFFFFF;
        color: #F58220;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
        transform: scale(1.04);
    }

/* ── Sell & Agent Cards ── */
.sell-card {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    transition: all 0.28s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

    .sell-card:hover {
        box-shadow: 0 14px 38px rgba(0, 0, 0, 0.10) !important;
        border-color: rgba(86, 196, 248, 0.45);
        transform: translateY(-2px);
    }

.sell-input {
    background: rgba(255, 255, 255, 0.6);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    padding: 10px;
    transition: all 0.2s;
}

    .sell-input:focus {
        box-shadow: 0 0 0 3px rgba(86, 196, 248, 0.18);
        border-color: #56C4F8;
        background: #fff;
    }

.pricing-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    height: 100%;
    transition: transform 0.28s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

    .pricing-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
    }

.border-primary-blue {
    border: 2px solid #56C4F8 !important;
}

.guide-scroll-container {
    scrollbar-width: none;
}

    .guide-scroll-container::-webkit-scrollbar {
        display: none;
    }

.guide-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    width: 180px;
    cursor: pointer;
    transition: all 0.28s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

    .guide-card:hover {
        background: linear-gradient(135deg, #56C4F8, #2b95ce);
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(86, 196, 248, 0.28);
    }

        .guide-card:hover h6,
        .guide-card:hover p {
            color: white !important;
        }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — Pill overflow fix for every breakpoint
   ════════════════════════════════════════════════════════════ */

/*
 * iPhone 6/7/8 and similar (375px).
 * The 4 pills (Buy · Rent · Sell · Agents) at default size
 * total ~320px; the container is ~343px. Safe — but tighten
 * padding so there is no chance of clipping.
 */
@media (max-width: 414px) {
    .nav-pill {
        padding: 8px clamp(10px, 3.5vw, 18px);
        font-size: 0.75rem;
        min-height: 34px;
    }

    .bg-pill-container {
        padding: 4px !important;
    }
}

/* iPhone SE (375px) and older small phones (360px) */
@media (max-width: 375px) {
    .nav-pill {
        padding: 7px 11px;
        font-size: 0.73rem;
        letter-spacing: 0;
        min-height: 32px;
    }
}

/* Absolute smallest (320px — iPhone 5/SE gen 1) */
@media (max-width: 330px) {
    .nav-pill {
        padding: 7px 9px;
        font-size: 0.7rem;
    }

    /* Force horizontal scroll so pills never wrap or clip */
    .scrollable-pills {
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
    }
}

/* ════════════════════════════════════════════════════════════
   TENANT+ PILL — "+" rendered as a peer of the label (same size
   and weight, tucked right next to the word).

   Markup pattern (set in Index.cshtml):
       <button class="nav-pill" data-mode="tenant">
           Tenant<span class="tp-pill-plus">+</span>
       </button>

   The "+" inherits the pill's font-size and weight by default —
   we just tighten the letter-spacing so it visually hugs the
   "t". Sky-blue accent applies only on the ACTIVE pill, so the
   inactive state uses the normal pill colour and the active
   state mirrors the brand orange (label) + sky (plus).
   ════════════════════════════════════════════════════════════ */
.tp-pill-plus {
    /* Inherit the pill's text size/weight — no superscript trickery. */
    font-size: 1em;
    font-weight: 700;
    /* Negative margin pulls "+" tight against the "t" of "Tenant". */
    margin-left: -1px;
    color: inherit;
    line-height: 1;
}

/* Inactive pill: "+" matches label colour (default pill text). */
.nav-pill[data-mode="tenant"] .tp-pill-plus {
    color: inherit;
}

/* Active pill: label is orange, "+" picks up sky-blue accent
   matching the dashboard logo (Tenant+ in the sidebar). */
.nav-pill[data-mode="tenant"].active .tp-pill-plus {
    color: #56C4F8;
}

/* Accessibility: in high-contrast mode let the "+" inherit
   currentColor so the duotone collapses to a single legible hue. */
@media (prefers-contrast: more) {
    .nav-pill[data-mode="tenant"].active .tp-pill-plus {
        color: currentColor !important;
    }
}