/* Container header */

.tutors-heading {
    font-weight: 700;
}

.tutors-subtitle {
    font-size: 0.9rem;
}

.change-filters-btn {
    border-radius: 999px;
    font-size: 0.85rem;
}

/* Grid: at least 3 per row on desktop */

.tutor-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

/* Tablet: 2 per row */
@media (max-width: 991.98px) {
    .tutor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile: 1 per row */
@media (max-width: 575.98px) {
    .tutor-grid {
        grid-template-columns: 1fr;
    }
}

/* Card */

.tutor-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 1.25rem 1.4rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
    border: 1px solid rgba(148, 163, 184, 0.35);
    display: flex;
    flex-direction: column;
    height: 480px;
    overflow: hidden;
}

/* Header */

.tutor-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
    flex-shrink: 0;
}

.avatar {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: linear-gradient(135deg, #e5edff, #c7d2fe);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #374151;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.name-block {
    flex: 1;
    min-width: 0; /* lets the name/pills wrap instead of overflowing the fixed-width card */
}

.tutor-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    text-transform: capitalize;
    max-width: 100%;
    overflow-wrap: break-word;
}

/* Verified / Featured badges always sit on their own row directly under
   the name — identical placement on every card regardless of name length
   or how many badges a tutor has. (They used to sit inline next to the
   name, where a long name + both badges either wrapped unpredictably or
   pushed the "Featured" pill under .tutor-card's overflow:hidden and
   clipped it to "Featur…".) */
.tutor-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.tutor-location {
    margin: 0;
    font-size: 0.8rem;
    color: #6b7280;
}

/* Verified pill in header */

.badge-verified-pill,
.badge-featured-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.badge-verified-pill {
    background: #dcfce7;
    color: #166534;
}

.badge-featured-pill {
    background: #fff7ed;
    color: #d97706;
    border: 1px solid rgba(217, 119, 6, 0.3);
}

.badge-featured-pill i { font-size: 0.7rem; }

.badge-verified-pill .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #22c55e;
}

/* Body */

.tutor-card-body {
    font-size: 0.86rem;
    color: #374151;
    line-height: 1.5;
    margin-top: 0.2rem;
    flex: 1 1 auto;
    overflow: hidden;
    min-height: 0;
}

.tutor-card-body .line {
    margin: 0 0 0.25rem;
}

.tutor-card-body .lab {
    font-weight: 600;
    margin-right: 0.25rem;
}

.side-heading {
    margin: 0.5rem 0 0.25rem;
    font-weight: 600;
    color: #111827;
}

.rates-list {
    list-style: disc;
    padding-left: 1rem;
    margin: 0;
    max-height: 150px;
    overflow-y: auto;
}

.grade-label {
    font-weight: 600;
}

.rate-line {
    font-size: 0.8rem;
    color: #6b7280;
}

/* Footer */

.tutor-card-footer {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: auto;
    flex-shrink: 0;
    padding-top: 0.5rem;
}

.status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.badge-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
}

.badge-status-accepted {
    background: #dcfce7;
    color: #166534;
}

.badge-status-pending {
    background: #fef3c7;
    color: #92400e;
}

/* "View Profile" button — public tutor card (_tutor_card.html), signals
   the whole card is clickable and takes the visitor straight to the
   tutor's full public profile (no login required). */
.view-profile-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px; border-radius: var(--radius-sm); text-decoration: none;
    background: var(--bg-card); color: var(--primary); font-weight: 700; font-size: 0.88rem;
    border: 1.5px solid var(--primary); transition: var(--transition);
}
.view-profile-btn:hover { background: var(--gradient-soft); color: var(--primary); }

/* Shared "Sign Up to Contact" CTA — used by both public_tutor_results.html
   and seo_city_landing.html via the same _tutor_card.html partial. */
.signup-gate {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px; border-radius: var(--radius-sm); text-decoration: none;
    background: var(--gradient); color: #fff; font-weight: 700; font-size: 0.88rem;
    transition: var(--transition);
}
.signup-gate:hover { opacity: 0.92; transform: translateY(-1px); color: #fff; }
.signup-gate-note { font-size: 0.74rem; color: var(--text-muted); text-align: center; margin-top: 6px; }

/* Contact form */

.message-box {
    width: 100%;
    min-height: 48px;
    border-radius: 8px;
    border: 1px solid #d0d7e2;
    font-size: 0.85rem;
    padding: 6px 10px;
    resize: vertical;
    background: #f7f9fc;
    color: #333;
    margin-bottom: 0.4rem;
}

.contact-btn {
    width: 100%;
    font-size: 0.86rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 7px 0;
    box-shadow: 0 2px 6px rgba(0, 94, 184, 0.28);
}

.badge-status-rejected {
    background: #fee2e2;
    color: #991b1b;
}

/* ══════════════════════════════════════════════════════════════
   Shared search/filter page layout
   Used by tutor_list.html (logged-in student search) and
   public_tutor_results.html (public homepage search)
   ══════════════════════════════════════════════════════════════ */

.search-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 20px 60px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items: start;
}

.filter-sidebar {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: calc(var(--nav-height) + 16px);
    /* The sidebar's own content (Class/Board/Subject/Exam/Budget/Location,
       plus a Google Places autocomplete dropdown that can add another
       ~250px while open) routinely runs taller than the viewport once
       enough of those sections are showing. overflow:hidden alone left
       that overflow completely unreachable -- not just visually clipped,
       but unscrollable, since sticky positioning stops the whole sidebar
       moving with the page once it's "stuck", and there was no scroll
       container of its own for a mouse/trackpad scroll over the sidebar
       to move -- so scrolling there just fell through to the page/results
       instead. Capping the sidebar's own height to the viewport and
       letting ONLY .filter-sidebar-body (below) scroll internally fixes
       that: the header stays put, the body scrolls independently, and
       overflow:hidden here still does its original job of clipping that
       body's corners to match the outer rounded border. */
    max-height: calc(100vh - var(--nav-height) - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.filter-sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--gradient-soft);
    flex-shrink: 0;
}
.filter-sidebar-title { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 800; color: var(--text-primary); }
.filter-sidebar-title i { color: var(--primary); }
.filter-count-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; background: var(--gradient); color: #fff;
    border-radius: 50%; font-size: 0.72rem; font-weight: 800;
}
.filter-sidebar-body {
    overflow-y: auto;
    /* min-height:0 is required for a flex child to actually shrink below
       its content size -- without it, flex-basis:auto keeps this box (and
       therefore the whole sidebar) growing to fit ALL of its content
       instead of respecting the parent's max-height, silently undoing the
       scroll container this rule exists to create. */
    min-height: 0;
    padding: 16px;
    /* Establishes a size-query container so descendants (the
       category-toggle tabs) can react to THIS wrapper's actual
       rendered width -- fixed at 280px minus padding on desktop,
       see .search-page's grid-template-columns above -- instead
       of viewport width, which is a different, unrelated number
       once the sidebar is a fixed grid column. */
    container-type: inline-size;
}
.filter-section { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.filter-section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.filter-section-label {
    display: flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 700;
    color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px;
}
.filter-section-label i { color: var(--primary); font-size: 0.7rem; }
.filter-select, .filter-input {
    width: 100%; padding: 9px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    font-family: inherit; font-size: 0.88rem; color: var(--text-primary); background: var(--bg-input);
    transition: var(--transition); min-height: 40px; appearance: auto;
}
.filter-select:focus, .filter-input:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgba(37,99,235,0.10); }
.filter-input::placeholder { color: var(--text-muted); }

.location-wrap { display: flex; flex-direction: column; gap: 8px; }
.gps-btn-sidebar {
    display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
    padding: 9px 12px; background: var(--gradient-soft); color: var(--primary);
    border: 1.5px solid rgba(37,99,235,0.3); border-radius: var(--radius-sm);
    font-family: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer;
    transition: var(--transition); min-height: 38px;
}
.gps-btn-sidebar:hover { background: var(--gradient); color: #fff; border-color: var(--primary); }
.gps-btn-sidebar.success { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }

.filter-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.btn-apply {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px;
    background: var(--gradient); color: #fff; border: none; border-radius: var(--radius-sm);
    font-family: inherit; font-size: 0.92rem; font-weight: 700; cursor: pointer; transition: var(--transition);
    box-shadow: var(--shadow-primary); min-height: 44px;
}
.btn-apply:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-reset {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 9px;
    background: transparent; color: var(--text-secondary); border: 1.5px solid var(--border);
    border-radius: var(--radius-sm); font-family: inherit; font-size: 0.85rem; font-weight: 600;
    cursor: pointer; transition: var(--transition); text-decoration: none; min-height: 40px;
}
.btn-reset:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }

.results-header {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    margin-bottom: 20px; padding: 14px 18px; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.results-title { font-size: 1.1rem; font-weight: 800; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.results-title i { color: var(--primary); }
.results-meta { font-size: 0.82rem; color: var(--text-secondary); margin-top: 3px; }

.sort-control { display: flex; align-items: center; gap: 8px; }
.sort-control-label {
    font-size: 0.82rem; font-weight: 700; color: var(--text-secondary);
    display: flex; align-items: center; gap: 5px; white-space: nowrap;
}
.sort-control select.filter-select {
    width: auto; min-width: 170px; padding: 7px 10px; font-size: 0.82rem;
}

.active-filter-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.active-pill {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
    background: var(--gradient-soft); border: 1px solid rgba(37,99,235,0.25);
    border-radius: 999px; font-size: 0.72rem; font-weight: 700; color: var(--primary); white-space: nowrap;
}

.mobile-filter-toggle {
    display: none; align-items: center; justify-content: space-between; padding: 12px 16px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md);
    margin-bottom: 16px; cursor: pointer; font-weight: 700; font-size: 0.9rem; color: var(--text-primary);
    box-shadow: var(--shadow-xs);
}
.mobile-filter-toggle i { color: var(--primary); }

@media (max-width: 900px) {
    .search-page { grid-template-columns: 1fr; padding: 16px 14px 48px; }
    /* max-height + overflow:hidden/auto (see .filter-sidebar/.filter-sidebar-body
       above) exist only to let the DESKTOP sticky sidebar scroll its own
       content independently of the page. On mobile the sidebar is
       position:static (normal document flow, not stuck to the viewport),
       so that whole constraint is not just unnecessary here but actively
       broken: real production bug -- with the height cap still active but
       no flex layout height to enforce it against (position:sticky's
       "pinned to a fixed viewport slice" idea doesn't apply in normal
       flow), most of the filter form below the cap was being clipped and
       made unreachable the moment "Filters & Search" was opened, which is
       exactly what made refining filters on mobile impossible even though
       results (needing no sidebar) still worked fine. Resetting both back
       to their natural, unconstrained sizing restores mobile's original,
       working behaviour: the whole page just scrolls to reach the rest of
       an open filter panel, same as before that desktop fix existed.
    */
    .filter-sidebar { position: static; display: none; max-height: none; overflow: visible; }
    .filter-sidebar.mobile-open { display: block; }
    .filter-sidebar-body { overflow-y: visible; max-height: none; }
    .mobile-filter-toggle { display: flex; }
}

@media (max-width: 600px) {
    .results-header { flex-direction: column; align-items: flex-start; }
    .active-filter-pills { display: none; }
}

.tutor-card { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.tutor-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(37,99,235,0.18);
    border-color: var(--primary);
}
.tutor-card:hover .tutor-name { color: var(--primary); }


/* ── Shared tutor-search filter component (2026-09 discovery-UX upgrade) ──
   Styles for users/_tutor_search_filter.html and
   users/_active_filter_chips.html -- loaded site-wide (this file is
   included via base.html on every page) so the component looks the same
   wherever it's included: browse/search/public results, every SEO
   landing page, and the homepage hero. */

/* School Tuition / Competitive Exams intent toggle. Pure UI state (see
   tgFilterSetIntent in the component's own <script>) -- never trusted for
   filtering on its own. */
.category-toggle { display: flex; gap: 10px; margin-bottom: 18px; }
.category-toggle-btn {
    flex: 1; min-width: 0; padding: 12px 16px;
    background: var(--bg-input); color: var(--text-secondary);
    border: 2px solid var(--border); border-radius: var(--radius-sm);
    font-family: inherit; font-size: 0.92rem; font-weight: 700;
    cursor: pointer; transition: var(--transition);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px;
}
.category-toggle-btn.active {
    background: var(--gradient); color: #fff;
    border-color: transparent; box-shadow: var(--shadow-primary);
}
@media (max-width: 480px) {
    .category-toggle-btn span.toggle-label-long { display: none; }
}
/* Container-based fallback for the sidebar embedding specifically
   (tutor_list.html / public_tutor_results.html's .filter-sidebar-body,
   see container-type above) -- a fixed 280px sidebar column is too
   narrow for two full-length tabs with icons on ANY viewport width
   (1024px and 1440px render the identical 280px column), which a
   viewport media query can never detect. Stack instead of truncating:
   both tabs keep their complete text, icons, active/inactive styling,
   colors and border-radius unchanged -- only the direction and each
   button's width change. Elsewhere this component is embedded in a
   wider container (browse_tutors.html's card, the homepage hero) with
   no container-type set, so this rule simply never matches there and
   the existing one-row layout is unaffected. */
@container (max-width: 400px) {
    .category-toggle { flex-direction: column; }
    .category-toggle-btn { width: 100%; }
}

/* Removable active-filter chips (Part V) -- distinct from the older,
   display-only .active-pill above: each chip is itself a link that
   re-submits the current filters minus that one field (see
   views.build_active_filter_chips()), so removing a facet never requires
   returning to the homepage or hand-editing the URL. */
.active-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.active-filter-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
    background: var(--gradient-soft); border: 1px solid rgba(37,99,235,0.25);
    border-radius: 999px; font-size: 0.78rem; font-weight: 700; color: var(--primary);
    white-space: nowrap; text-decoration: none; transition: var(--transition);
}
.active-filter-chip:hover { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.active-filter-chip i { font-size: 0.68rem; }
.active-filter-clear-all {
    font-size: 0.78rem; font-weight: 700; color: var(--text-secondary);
    text-decoration: underline; white-space: nowrap;
}
.active-filter-clear-all:hover { color: var(--danger); }