﻿/* =========================================================
   AirLessons - Instructor Search
   Scope: InstructorSearch page only
   Prefix: als-search-
   ========================================================= */


/* =========================================================
   Page
   ========================================================= */

.als-search-page {
    min-height: 100vh;
    padding-bottom: 5rem;
    background: radial-gradient(circle at top left, rgba(255, 193, 7, .16), transparent 34rem), radial-gradient(circle at top right, rgba(13, 110, 253, .10), transparent 30rem), linear-gradient(180deg, #f8fafc 0%, #ffffff 42%);
}


/* =========================================================
   Hero
   ========================================================= */

.als-search-hero {
    padding: 2rem 0 1rem;
}

.als-search-hero-card {
    position: relative;
    overflow: hidden;
    padding: 1.35rem;
    /*border: 1px solid rgba(17, 24, 39, .08);
	border-radius: 30px;
	background: rgba(255, 255, 255, .84);
	box-shadow: 0 20px 54px rgba(17, 24, 39, .075);
	backdrop-filter: blur(16px);*/
}

/*.als-search-hero-card::before {
	content: "";
	position: absolute;
	top: -90px;
	right: -90px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: rgba(255, 193, 7, .14);
	pointer-events: none;
}

.als-search-hero-card::after {
	content: "";
	position: absolute;
	bottom: -110px;
	left: -90px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: rgba(13, 110, 253, .08);
	pointer-events: none;
}*/

.als-search-hero-top,
.als-search-hero-content,
.als-search-hero-stats {
    position: relative;
    z-index: 1;
}

.als-search-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.als-search-back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--primary-color);
    font-weight: 800;
    text-decoration: none;
    transition: color .16s ease, transform .16s ease;
}

    .als-search-back:hover {
        color: var(--secondary-color);
        transform: translateX(-2px);
    }

    .als-search-back i {
        font-size: 1.35rem;
    }

.als-search-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .8rem;
    border: 1px solid rgba(13, 110, 253, .12);
    border-radius: 999px;
    background: rgba(13, 110, 253, .07);
    color: var(--primary-color);
    font-size: .82rem;
    font-weight: 900;
}

.als-search-hero-content {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}

.als-search-kicker {
    display: inline-flex;
    margin-bottom: .7rem;
    padding: .4rem .75rem;
    border-radius: 999px;
    background: rgba(255, 193, 7, .16);
    color: var(--secondary-color);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.als-search-title {
    margin: 0;
    color: var(--primary-color);
    font-size: clamp(2rem, 4vw, 3.7rem);
    font-weight: 950;
    letter-spacing: -.045em;
    line-height: 1.02;
}

.als-search-subtitle {
    max-width: 680px;
    margin: .95rem auto 0;
    color: #64748b;
    font-size: clamp(1rem, 1.45vw, 1.15rem);
    font-weight: 550;
    line-height: 1.65;
}

.als-search-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    max-width: 620px;
    margin: 1.45rem auto 0;
}

.als-search-stat {
    padding: .85rem;
    border: 1px solid rgba(17, 24, 39, .07);
    border-radius: 20px;
    background: rgba(255, 255, 255, .78);
    text-align: center;
    box-shadow: 0 10px 24px rgba(17, 24, 39, .045);
}

.als-search-stat-value {
    display: block;
    color: var(--primary-color);
    font-size: 1.35rem;
    font-weight: 950;
    line-height: 1;
}

.als-search-stat-label {
    display: block;
    margin-top: .25rem;
    color: #64748b;
    font-size: .78rem;
    font-weight: 800;
}


/* =========================================================
   Body
   ========================================================= */

.als-search-body {
    padding: 1rem 0 3rem;
}

.als-search-form {
    margin-bottom: 1rem;
}

.als-search-top-card-area,
.als-search-filters-area,
.als-search-active-filters-area {
    position: relative;
}


/* =========================================================
   Shared headers
   ========================================================= */

.als-search-box-kicker {
    display: block;
    margin-bottom: .18rem;
    color: #94a3b8;
    font-size: .72rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.als-search-filter-header h2,
.als-search-active-filters-header h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.08rem;
    font-weight: 950;
    letter-spacing: -.02em;
}


/* =========================================================
   Controls
   ========================================================= */

.als-search-input-shell {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

    .als-search-input-shell > i {
        position: absolute;
        left: 1rem;
        z-index: 2;
        color: var(--primary-color);
        font-size: 1rem;
        pointer-events: none;
    }

.als-search-input,
.als-search-select,
.als-search-filter-control {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(13, 110, 253, .20);
    border-radius: 14px;
    background: #fff;
    color: #0f172a;
    font-size: .88rem;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(17, 24, 39, .035);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.als-search-input {
    padding: .75rem 1rem .75rem 2.75rem;
}

.als-search-select,
.als-search-filter-control {
    padding: .65rem .85rem;
}

    .als-search-input:focus,
    .als-search-select:focus,
    .als-search-filter-control:focus {
        outline: none;
        border-color: var(--secondary-color);
        box-shadow: 0 0 0 .22rem rgba(255, 193, 7, .18);
    }

.als-search-input::placeholder {
    color: #94a3b8;
    font-weight: 650;
}

.als-search-filter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 46px;
    padding: .65rem .9rem;
    border: 0;
    border-radius: 14px;
    background: var(--primary-color);
    color: #fff;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(13, 110, 253, .22);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

    .als-search-filter-button:hover {
        transform: translateY(-1px);
        background: var(--secondary-color);
        color: #fff;
        box-shadow: 0 12px 26px rgba(255, 193, 7, .25);
    }


/* =========================================================
   Top Search Single Card
   ========================================================= */

.als-search-top-card {
    margin-bottom: .85rem;
}

.als-search-main-box,
.als-search-advanced-filters,
.als-search-active-filters {
    border: 1px solid rgba(17, 24, 39, .08);
    border-radius: 24px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 16px 40px rgba(17, 24, 39, .065);
    backdrop-filter: blur(10px);
}

.als-search-single-main-box {
    padding: .95rem;
    border-radius: 24px;
}

.als-search-row-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .7rem;
}

    .als-search-row-title h2 {
        margin: 0;
        color: #0f172a;
        font-size: 1rem;
        font-weight: 950;
        letter-spacing: -.02em;
    }

    .als-search-row-title > i {
        color: var(--primary-color);
        font-size: 1.05rem;
    }

.als-search-category-row-box,
.als-search-bool-column {
    padding: .8rem;
    border: 1px solid rgba(17, 24, 39, .075);
    border-radius: 20px;
    background: rgba(255, 255, 255, .78);
}

.als-search-category-card {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
    gap: .55rem;
    border: 1px solid rgba(17, 24, 39, .09);
    background: #fff;
    color: #0f172a;
    text-align: left;
    box-shadow: 0 8px 22px rgba(17, 24, 39, .045);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

    .als-search-category-card:hover {
        transform: translateY(-2px);
        border-color: var(--secondary-color);
        box-shadow: 0 14px 30px rgba(17, 24, 39, .09);
    }

    .als-search-category-card.is-active {
        border-color: var(--secondary-color);
        background: linear-gradient(135deg, rgba(255, 193, 7, .19), rgba(255, 255, 255, .98));
        box-shadow: 0 14px 30px rgba(255, 193, 7, .16);
    }

.als-search-category-card-row {
    min-height: 92px;
    padding: .75rem;
    border-radius: 18px;
}

.als-search-category-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 11px;
    background: rgba(13, 110, 253, .08);
    color: var(--primary-color);
    font-size: .9rem;
}

.als-search-category-card.is-active .als-search-category-icon {
    background: var(--secondary-color);
    color: #fff;
}

.als-search-category-name {
    display: block;
    max-width: 100%;
    color: #0f172a;
    font-size: .82rem;
    font-weight: 900;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.als-search-category-topic-count {
    display: block;
    color: #64748b;
    font-size: .7rem;
    font-weight: 750;
}

.als-search-category-check {
    position: absolute;
    top: .65rem;
    right: .65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    border-radius: 999px;
    background: var(--secondary-color);
    color: #fff;
    font-size: .7rem;
}

.als-search-small-empty {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 54px;
    padding: .8rem;
    border: 1px dashed rgba(13, 110, 253, .22);
    border-radius: 18px;
    background: rgba(13, 110, 253, .04);
    color: #64748b;
    font-size: .88rem;
    font-weight: 750;
}

    .als-search-small-empty i {
        color: var(--primary-color);
    }


/* =========================================================
   Top Quick Boolean Filters
   ========================================================= */

.als-search-bool-column {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.als-search-bool-list {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.als-search-bool-toggle {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}

    .als-search-bool-toggle input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .als-search-bool-toggle span {
        display: flex;
        align-items: center;
        gap: .45rem;
        min-height: 38px;
        width: 100%;
        padding: .48rem .65rem;
        border: 1px solid rgba(17, 24, 39, .08);
        border-radius: 14px;
        background: #fff;
        color: #334155;
        font-size: .78rem;
        font-weight: 850;
        box-shadow: 0 6px 14px rgba(17, 24, 39, .04);
        transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
    }

        .als-search-bool-toggle span i {
            color: var(--primary-color);
        }

    .als-search-bool-toggle:hover span {
        transform: translateY(-1px);
        border-color: var(--secondary-color);
        box-shadow: 0 10px 18px rgba(17, 24, 39, .07);
    }

    .als-search-bool-toggle input:checked + span {
        border-color: var(--secondary-color);
        background: var(--secondary-color);
        color: #fff;
        box-shadow: 0 10px 20px rgba(255, 193, 7, .2);
    }

        .als-search-bool-toggle input:checked + span i {
            color: #fff;
        }


/* =========================================================
   Advanced Filters
   ========================================================= */

.als-search-advanced-filters {
    margin-bottom: 1rem;
    padding: .85rem;
    border-radius: 22px;
}

.als-search-filter-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
}

.als-search-filter-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 14px;
    background: rgba(15, 23, 42, .06);
    color: #334155;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

    .als-search-filter-close:hover {
        background: rgba(239, 68, 68, .10);
        color: #ef4444;
    }

.als-search-filter-card {
    padding: 1rem;
    /*border: 1px solid rgba(17, 24, 39, .075);
	border-radius: 24px;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 10px 24px rgba(17, 24, 39, .045);*/
}

.als-search-filter-card-compact {
    padding: .75rem;
    border-radius: 18px;
    min-height: 100%;
}

.als-search-filter-card-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .55rem;
    color: #0f172a;
    font-size: .86rem;
    font-weight: 950;
}

    .als-search-filter-card-title i {
        color: var(--primary-color);
    }

.als-search-inner-title {
    margin-top: .8rem;
    margin-bottom: .45rem !important;
}

.als-search-filter-label {
    display: block;
    margin-bottom: .35rem;
    color: #64748b;
    font-size: .78rem;
    font-weight: 850;
}

.als-search-filter-empty {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 46px;
    padding: .7rem .75rem;
    border: 1px dashed rgba(13, 110, 253, .22);
    border-radius: 16px;
    background: rgba(13, 110, 253, .04);
    color: #64748b;
    font-size: .82rem;
    font-weight: 750;
}

    .als-search-filter-empty i {
        color: var(--primary-color);
    }


/* =========================================================
   Topics
   ========================================================= */

.als-search-topic-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.als-search-topic-grid-compact {
    gap: .4rem;
}

.als-search-topic-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 34px;
    max-width: 100%;
    padding: .42rem .68rem;
    border: 1px solid rgba(13, 110, 253, .16);
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: .78rem;
    font-weight: 850;
    box-shadow: 0 7px 16px rgba(17, 24, 39, .04);
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

    .als-search-topic-pill:hover {
        transform: translateY(-1px);
        border-color: var(--secondary-color);
        box-shadow: 0 10px 20px rgba(17, 24, 39, .07);
    }

    .als-search-topic-pill.is-active {
        border-color: var(--secondary-color);
        background: var(--secondary-color);
        color: #fff;
        box-shadow: 0 10px 22px rgba(255, 193, 7, .22);
    }

    .als-search-topic-pill span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


/* =========================================================
   Mode Buttons
   ========================================================= */

.als-search-mode-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .4rem;
}

.als-search-btn-check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.als-search-mode-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 42px;
    margin: 0;
    padding: .5rem .4rem;
    border: 1px solid rgba(13, 110, 253, .16);
    border-radius: 14px;
    background: #fff;
    color: #334155;
    font-size: .78rem;
    font-weight: 850;
    box-shadow: 0 7px 16px rgba(17, 24, 39, .04);
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

    .als-search-mode-button i {
        color: var(--primary-color);
    }

    .als-search-mode-button:hover {
        transform: translateY(-1px);
        border-color: var(--secondary-color);
        box-shadow: 0 10px 20px rgba(17, 24, 39, .07);
    }

.als-search-btn-check:checked + .als-search-mode-button {
    border-color: var(--secondary-color);
    background: var(--secondary-color);
    color: #fff;
    box-shadow: 0 10px 22px rgba(255, 193, 7, .22);
}

    .als-search-btn-check:checked + .als-search-mode-button i {
        color: #fff;
    }


/* =========================================================
   Location / Distance
   ========================================================= */

.als-search-location-inline-box {
    margin-top: .85rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(17, 24, 39, .075);
}

    .als-search-location-inline-box.is-disabled {
        opacity: .78;
    }

        .als-search-location-inline-box.is-disabled .als-search-filter-control,
        .als-search-location-inline-box.is-disabled .als-search-location-button,
        .als-search-location-inline-box.is-disabled .als-search-city-button {
            cursor: not-allowed;
            box-shadow: none;
        }

.als-search-location-status {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .75rem;
    color: #64748b;
    font-size: .82rem;
    font-weight: 750;
}

    .als-search-location-status span {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
    }

.als-search-location-status-compact {
    min-height: 22px;
    margin-bottom: .45rem;
    font-size: .76rem;
}

.als-search-location-ok {
    color: #16a34a;
}

.als-search-location-error {
    color: #ef4444;
}

.als-search-location-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    min-height: 46px;
    padding: .65rem .85rem;
    border: 0;
    border-radius: 14px;
    background: var(--primary-color);
    color: #fff;
    font-size: .88rem;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(13, 110, 253, .20);
    cursor: pointer;
    transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}

    .als-search-location-button:hover {
        transform: translateY(-1px);
        background: var(--secondary-color);
        box-shadow: 0 12px 24px rgba(255, 193, 7, .24);
    }

.als-search-location-button-compact {
    min-height: 42px;
    margin-bottom: 0;
    border-radius: 14px;
    font-size: .82rem;
}

.als-search-city-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border: 0;
    border-radius: 14px;
    background: var(--primary-color);
    color: #fff;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(13, 110, 253, .20);
    cursor: pointer;
    transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}

    .als-search-city-button:hover {
        transform: translateY(-1px);
        background: var(--secondary-color);
        box-shadow: 0 12px 24px rgba(255, 193, 7, .24);
    }

.als-search-city-results {
    display: grid;
    gap: .45rem;
    margin-top: .55rem;
}

.als-search-city-result {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    width: 100%;
    padding: .65rem .75rem;
    border: 1px solid rgba(13, 110, 253, .14);
    border-radius: 16px;
    background: #fff;
    color: #334155;
    font-size: .82rem;
    font-weight: 750;
    text-align: left;
    box-shadow: 0 7px 16px rgba(17, 24, 39, .04);
    cursor: pointer;
    transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

    .als-search-city-result:hover {
        transform: translateY(-1px);
        border-color: var(--secondary-color);
        box-shadow: 0 10px 20px rgba(17, 24, 39, .07);
    }

    .als-search-city-result i {
        color: var(--primary-color);
        flex: 0 0 auto;
        margin-top: .1rem;
    }

    .als-search-city-result span {
        min-width: 0;
        line-height: 1.35;
    }

.als-search-city-message {
    padding: .65rem .75rem;
    border: 1px dashed rgba(13, 110, 253, .20);
    border-radius: 16px;
    background: rgba(13, 110, 253, .04);
    color: #64748b;
    font-size: .82rem;
    font-weight: 750;
}


/* =========================================================
   Time Ranges
   ========================================================= */

.als-search-time-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 62px;
    margin: 0;
    padding: .62rem;
    border: 1px solid rgba(13, 110, 253, .14);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(17, 24, 39, .04);
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

    .als-search-time-card:hover {
        transform: translateY(-1px);
        border-color: var(--secondary-color);
        box-shadow: 0 12px 24px rgba(17, 24, 39, .07);
    }

    .als-search-time-card input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .als-search-time-card.is-active {
        border-color: var(--secondary-color);
        background: linear-gradient(135deg, rgba(255, 193, 7, .18), rgba(255, 255, 255, .98));
        box-shadow: 0 12px 24px rgba(255, 193, 7, .14);
    }

.als-search-time-main {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

    .als-search-time-main span {
        color: #0f172a;
        font-size: .8rem;
        font-weight: 900;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .als-search-time-main strong {
        color: #64748b;
        font-size: .7rem;
        font-weight: 800;
    }

.als-search-time-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: rgba(15, 23, 42, .08);
    color: transparent;
    font-size: .65rem;
}

.als-search-time-card.is-active .als-search-time-check {
    background: var(--secondary-color);
    color: #fff;
}


/* =========================================================
   Active Filters
   ========================================================= */

.als-search-active-filters {
    margin: 1rem 0;
    padding: 1rem;
}

.als-search-active-filters-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
}

.als-search-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.als-search-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 38px;
    max-width: 100%;
    padding: .5rem .8rem;
    border: 0;
    border-radius: 999px;
    background: var(--primary-color);
    color: #fff;
    font-size: .82rem;
    font-weight: 850;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(17, 24, 39, .08);
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, opacity .16s ease;
}

    .als-search-filter-pill:hover {
        transform: translateY(-1px);
        background: var(--secondary-color);
        color: #fff;
        box-shadow: 0 10px 22px rgba(17, 24, 39, .12);
    }

    .als-search-filter-pill span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.als-search-filter-pill-x {
    font-size: .72rem;
    opacity: .85;
}

.als-search-filter-pill-reset {
    background: #fff;
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, .2);
}

    .als-search-filter-pill-reset:hover {
        background: #ef4444;
        color: #fff;
    }

.als-search-filter-pill-success {
    background: #16a34a;
}

.als-search-filter-pill-secondary {
    background: var(--secondary-color);
}


/* =========================================================
   Meta Row / Legend
   ========================================================= */

.als-search-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0;
}

.als-search-result-count {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #334155;
    font-size: .9rem;
    font-weight: 900;
}

    .als-search-result-count i {
        color: var(--primary-color);
    }

.als-search-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
}

.als-search-legend-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .7rem;
    border: 1px solid rgba(17, 24, 39, .07);
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    color: #64748b;
    font-size: .8rem;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(17, 24, 39, .035);
}

    .als-search-legend-item i {
        color: var(--primary-color);
    }

    .als-search-legend-item:nth-child(2) i {
        color: var(--secondary-color);
    }


/* =========================================================
   Results / Empty / Loading / Error
   ========================================================= */

.als-search-results-area {
    position: relative;
}

.als-search-empty-state,
.als-search-loading,
.als-search-error {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 24px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 12px 28px rgba(17, 24, 39, .05);
}

.als-search-empty-state {
    border: 1px dashed rgba(13, 110, 253, .28);
    color: #64748b;
}

.als-search-loading {
    justify-content: center;
    min-height: 160px;
    border: 1px solid rgba(17, 24, 39, .08);
    color: #64748b;
    font-weight: 850;
}

.als-search-error {
    border: 1px solid rgba(239, 68, 68, .18);
    color: #64748b;
}

.als-search-empty-icon,
.als-search-error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 16px;
    font-size: 1.25rem;
}

.als-search-empty-icon {
    background: rgba(13, 110, 253, .08);
    color: var(--primary-color);
}

.als-search-error-icon {
    background: rgba(239, 68, 68, .1);
    color: #ef4444;
}

.als-search-empty-content h2,
.als-search-error h2 {
    margin: 0 0 .2rem;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 950;
}

.als-search-empty-content p,
.als-search-error p {
    margin: 0;
    font-size: .92rem;
}


/* =========================================================
   Compatibility helpers for existing result partial
   ========================================================= */

.als-search-page .generic-card {
    border: 1px solid rgba(17, 24, 39, .08);
    border-radius: 26px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 14px 34px rgba(17, 24, 39, .06);
}

.als-search-page .section-divider-primary {
    height: 1px;
    background: rgba(13, 110, 253, .22);
}


/* =========================================================
   Desktop column tuning for advanced filters
   ========================================================= */

@media (min-width: 992px) {
    .als-search-advanced-filters-compact .col-lg-2 {
        width: 18%;
    }

    .als-search-advanced-filters-compact .col-lg-6 {
        width: 48%;
    }

    .als-search-advanced-filters-compact .col-lg-4 {
        width: 34%;
    }
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 991.98px) {
    .als-search-meta-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .als-search-legend {
        justify-content: flex-start;
    }

    .als-search-bool-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .5rem;
    }

    .als-search-bool-toggle span {
        justify-content: center;
        text-align: center;
    }

    .als-search-category-card-row {
        min-height: 84px;
    }

    .als-search-inner-title {
        margin-top: .75rem;
    }

    .als-search-location-inline-box {
        margin-top: .75rem;
    }

    .als-search-time-card {
        min-height: 58px;
    }
}

@media (max-width: 767.98px) {
    .als-search-page {
        padding-bottom: 6rem;
    }

    .als-search-hero {
        padding: 1rem 0 .5rem;
    }

    .als-search-hero-card {
        padding: 1rem;
        border-radius: 24px;
    }

    .als-search-hero-top {
        align-items: flex-start;
    }

    .als-search-hero-content,
    .als-search-title,
    .als-search-subtitle {
        text-align: left;
    }

    .als-search-subtitle {
        margin-left: 0;
    }

    .als-search-hero-stats {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .als-search-stat {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }

    .als-search-main-box,
    .als-search-advanced-filters,
    .als-search-active-filters {
        border-radius: 22px;
    }

    .als-search-single-main-box {
        padding: .75rem;
    }

    .als-search-category-row-box,
    .als-search-bool-column {
        padding: .7rem;
        border-radius: 18px;
    }

    .als-search-category-card-row {
        min-height: 80px;
        padding: .65rem;
    }

    .als-search-category-icon {
        width: 30px;
        height: 30px;
    }

    .als-search-bool-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .als-search-bool-toggle span {
        min-height: 36px;
        font-size: .76rem;
        padding: .42rem .55rem;
    }

        .als-search-bool-toggle span i {
            display: none;
        }

    .als-search-advanced-filters {
        padding: .7rem;
    }

    .als-search-filter-header {
        margin-bottom: .75rem;
    }

    .als-search-filter-card {
        padding: .7rem;
    }

    .als-search-input,
    .als-search-select,
    .als-search-filter-control {
        min-height: 42px;
        font-size: .84rem;
    }

    .als-search-filter-button,
    .als-search-city-button {
        min-height: 42px;
        border-radius: 14px;
    }

    .als-search-mode-group {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .als-search-mode-button span {
        display: none;
    }

    .als-search-legend {
        flex-wrap: nowrap;
        width: 100%;
        overflow-x: auto;
        padding-bottom: .25rem;
        -webkit-overflow-scrolling: touch;
    }

    .als-search-legend-item {
        flex: 0 0 auto;
    }

    .als-search-active-filters-header {
        flex-direction: column;
    }

    .als-search-filter-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: .25rem;
        -webkit-overflow-scrolling: touch;
    }

    .als-search-filter-pill {
        flex: 0 0 auto;
        max-width: 280px;
    }
}

@media (max-width: 575.98px) {
    .als-search-hero-badge {
        display: none;
    }

    .als-search-box-header h2,
    .als-search-filter-header h2,
    .als-search-active-filters-header h2 {
        font-size: 1rem;
    }

    .als-search-time-card {
        min-height: 52px;
    }

    .als-search-empty-state,
    .als-search-error {
        align-items: flex-start;
        padding: 1rem;
        border-radius: 20px;
    }
}

@media (max-width: 420px) {
    .als-search-category-topic-count {
        display: none;
    }

    .als-search-category-card-row {
        min-height: 68px;
    }

    .als-search-bool-list {
        grid-template-columns: 1fr;
    }

    .als-search-time-main strong {
        display: none;
    }

    .als-search-time-card {
        min-height: 46px;
    }
}
