/* ========================================
   EduMaps Homepage Styles
   designbrief.md uyumlu
   ======================================== */

/* === GLOBAL === */
html, body {
    overflow-x: hidden;
}

/* === CONTAINER === */
.em-container {
    max-width: var(--em-container-max);
    margin: 0 auto;
    padding: 0 var(--em-container-padding);
}

/* === BUTTONS === */
.em-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--em-font-family);
    font-size: var(--em-btn-size);
    font-weight: var(--em-btn-weight);
    line-height: var(--em-btn-lh);
    border-radius: var(--em-radius-btn);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--em-transition);
    text-decoration: none;
    white-space: nowrap;
}

.em-btn--primary {
    background: var(--em-accent-cta);
    color: #000;
    border-color: rgba(22, 22, 22, 0.1);
    padding: 14px 30px;
}
.em-btn--primary:hover {
    background: var(--em-accent-cta-hover);
    box-shadow: 0 4px 16px rgba(224, 255, 0, 0.3);
    color: #000;
}

.em-btn--secondary {
    background: #000;
    color: #fff;
    border-image: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.1)) 1;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 14px 30px;
    backdrop-filter: blur(100px);
}
.em-btn--secondary:hover {
    background: #1a1a1a;
    color: #fff;
}

.em-btn--ghost-dark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 10px 20px;
    border-radius: var(--em-radius-btn);
    font-family: var(--em-font-family);
    font-size: var(--em-label-size);
    font-weight: 500;
    text-decoration: none;
    transition: all var(--em-transition);
}
.em-btn--ghost-dark:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.em-btn--ghost-dark svg {
    transition: transform var(--em-transition);
}
.em-btn--ghost-dark:hover svg {
    transform: translateX(4px);
}

.em-btn--lg {
    padding: 16px 36px;
    font-size: 16px;
}

/* === BADGE === */
.em-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--em-font-family);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    padding: 8px 16px;
    border-radius: var(--em-radius-pill);
}

.em-badge--accent {
    background: var(--em-accent-cta);
    color: #000;
    animation: badge-ring 5s ease-in-out infinite;
}

@keyframes badge-ring {
    0%, 88% { transform: rotate(0deg); }
    90% { transform: rotate(3deg); }
    91% { transform: rotate(-3deg); }
    92% { transform: rotate(2.5deg); }
    93% { transform: rotate(-2.5deg); }
    94% { transform: rotate(2deg); }
    95% { transform: rotate(-2deg); }
    96% { transform: rotate(1deg); }
    97% { transform: rotate(-1deg); }
    98% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

.em-badge--accent-dark {
    background: rgba(224, 255, 0, 0.12);
    color: var(--em-accent-cta);
    border: 1px solid rgba(224, 255, 0, 0.2);
}

/* === GRADIENT TEXT === */
.em-text-gradient {
    background: var(--em-gradient-hero);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   SECTION 1: HERO
   ============================================ */
.em-hero {
    background: var(--em-bg-light);
    padding: 160px 0 100px;
    position: relative;
}

.em-hero::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(224, 255, 0, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.em-hero::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

.em-hero__content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.em-hero__badge {
    margin-bottom: var(--em-space-lg);
}

.em-hero__title {
    font-family: var(--em-font-family);
    font-size: var(--em-h1-size);
    font-weight: var(--em-h1-weight);
    line-height: var(--em-h1-lh);
    letter-spacing: var(--em-h1-ls);
    color: var(--em-text-primary);
    margin: 0 0 var(--em-space-lg);
}

.em-hero__subtitle {
    font-size: var(--em-p-lg-size);
    line-height: var(--em-p-lg-lh);
    color: var(--em-text-secondary);
    margin: 0 0 40px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   BASE DROPDOWN STYLES (shared: homepage + listing)
   ============================================ */
.dropdown {
    position: relative;
    width: 100%;
}
.dropdown > input[type="checkbox"] {
    display: none;
}
.dropdown__face {
    display: block;
    position: relative;
    background: #fff;
    padding: 12px 40px 12px 16px;
    border: 1px solid var(--em-border, #e3e8ef);
    border-radius: var(--em-radius-btn, 7px);
    cursor: pointer;
    font-family: var(--em-font-family, inherit);
    font-size: 14px;
    color: var(--em-text-primary, #121926);
    user-select: none;
}
.dropdown__text {
    font-family: var(--em-font-family, inherit);
    font-size: 14px;
    color: var(--em-text-primary, #121926);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dropdown__arrow {
    border-bottom: 2px solid var(--em-text-tertiary, #9aa4b2);
    border-right: 2px solid var(--em-text-tertiary, #9aa4b2);
    position: absolute;
    top: 50%;
    right: 16px;
    width: 8px;
    height: 8px;
    transform: rotate(45deg) translateY(-70%);
    transform-origin: center;
    transition: transform var(--em-transition-fast, 0.2s ease);
}
.dropdown input:checked ~ .dropdown__face .dropdown__arrow {
    transform: rotate(-135deg) translateY(0%);
}
.dropdown__items {
    margin: 0;
    padding: 8px;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    visibility: hidden;
    z-index: 100;
    opacity: 0;
    transition: all 0.3s ease;
    background: #fff;
    border: 1px solid var(--em-border, #e3e8ef);
    border-radius: var(--em-radius-card-sm, 12px);
    box-shadow: var(--em-shadow-medium, 0 20px 60px rgba(0,0,0,0.12));
    min-width: 180px;
}
.dropdown__items::before {
    display: none;
}
.dropdown input:checked ~ .dropdown__items {
    top: calc(100% + 6px);
    visibility: visible;
    opacity: 1;
}
.dropdown__items li {
    text-align: left;
}
.dropdown__items li a {
    display: block;
    padding: 10px 14px;
    color: var(--em-text-primary, #121926);
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-family: var(--em-font-family, inherit);
    transition: background 0.2s ease;
}
.dropdown__items li a:hover {
    background: var(--em-bg-surface, #f3f4f6);
}

/* ============================================
   LISTING PAGE SEARCH BAR
   ============================================ */
.search-bar {
    position: relative;
    z-index: 20;
}
.search-bar .row {
    align-items: center;
}
.search-bar .search-select-input .form-control {
    border: 1px solid var(--em-border, #e3e8ef);
    font-family: var(--em-font-family, inherit);
}
.search-bar .search-select-input .form-control:focus {
    border-color: var(--em-accent-interactive, #10b981);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}
.search-bar .search-field {
    height: 100%;
}
.search-bar .search-field .dropdown__face {
    height: 52px;
    display: flex;
    align-items: center;
    border-radius: 30px;
    padding: 12px 40px 12px 20px;
}
.search-bar .btn-primary {
    border-radius: 30px;
    height: 52px;
    padding: 10px 20px;
    font-weight: 600;
    width: 100%;
    white-space: nowrap;
    font-size: 14px;
    background-color: var(--em-accent-interactive, #10b981);
    border-color: var(--em-accent-interactive, #10b981);
}
.search-bar .btn-primary:hover {
    background-color: var(--em-accent-hover, #059669);
    border-color: var(--em-accent-hover, #059669);
}
@media (min-width: 1200px) {
    .search-bar .search-field .dropdown__face {
        border: 0;
        height: 70px;
        border-radius: 0;
        padding: 12px 40px 12px 20px;
    }
    .search-bar .btn-primary {
        border-radius: 0;
        height: 70px;
    }
    .search-bar .dropdown__items {
        min-width: 220px;
    }
}

/* === SEARCH WIDGET (Homepage) === */
.em-search {
    margin-bottom: 40px;
    position: relative;
    z-index: 10;
}

.em-search__inner {
    display: flex;
    align-items: center;
    background: var(--em-bg-light);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-card-lg);
    padding: 6px;
    box-shadow: var(--em-shadow-light);
    transition: box-shadow var(--em-transition);
}
.em-search__inner:focus-within {
    box-shadow: var(--em-shadow-medium);
    border-color: rgba(16, 185, 129, 0.3);
}

.em-search__field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}
.em-search__field svg {
    color: var(--em-text-tertiary);
    flex-shrink: 0;
}
.em-search__field input {
    border: none;
    outline: none;
    width: 100%;
    font-family: var(--em-font-family);
    font-size: 15px;
    color: var(--em-text-primary);
    background: transparent;
}
.em-search__field input::placeholder {
    color: var(--em-text-tertiary);
}

.em-search__divider {
    width: 1px;
    height: 32px;
    background: var(--em-border);
    flex-shrink: 0;
}

.em-search__select {
    flex: 0 0 200px;
    padding: 0 8px;
}

.em-search__btn {
    flex-shrink: 0;
    border-radius: var(--em-radius-card-sm) !important;
}

/* Search dropdown overrides */
.em-search .dropdown {
    position: relative;
    width: 100%;
    filter: none;
}
.em-search .dropdown__face {
    display: block;
    position: relative;
    background: transparent;
    padding: 12px 16px;
    border-radius: var(--em-radius-btn);
    cursor: pointer;
    font-family: var(--em-font-family);
    font-size: 14px;
    color: var(--em-text-primary);
}
.em-search .dropdown__items {
    margin: 0;
    position: absolute;
    right: 0;
    top: 50%;
    width: 100%;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    visibility: hidden;
    z-index: 100;
    opacity: 0;
    transition: all 0.3s ease;
    background: #fff;
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-card-sm);
    box-shadow: var(--em-shadow-medium);
    padding: 8px;
    min-width: 180px;
}
.em-search .dropdown__items::before {
    display: none;
}
.em-search .dropdown__items li {
    text-align: left;
    transition: none;
}
.em-search .dropdown__items li:hover {
    transform: none;
}
.em-search .dropdown__items li a {
    display: block;
    padding: 8px 12px;
    color: var(--em-text-primary);
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    transition: background var(--em-transition-fast);
}
.em-search .dropdown__items li a:hover {
    background: var(--em-bg-surface);
}
.em-search .dropdown input {
    display: none;
}
.em-search .dropdown input:checked ~ .dropdown__items {
    top: calc(100% + 8px);
    visibility: visible;
    opacity: 1;
}
.em-search .dropdown__arrow {
    border-bottom: 2px solid var(--em-text-tertiary);
    border-right: 2px solid var(--em-text-tertiary);
    position: absolute;
    top: 50%;
    right: 16px;
    width: 8px;
    height: 8px;
    transform: rotate(45deg) translateY(-50%);
    transform-origin: right;
    transition: transform var(--em-transition-fast);
}
.em-search .dropdown input:checked ~ .dropdown__face .dropdown__arrow {
    transform: rotate(-135deg) translateY(-50%);
}
.em-search .dropdown__text {
    font-family: var(--em-font-family);
    font-size: 14px;
    color: var(--em-text-primary);
}

/* === TRUST INDICATORS === */
.em-hero__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--em-space-lg);
}

.em-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--em-label-size);
    color: var(--em-text-secondary);
}
.em-trust-item svg {
    color: var(--em-accent-interactive);
}
.em-trust-item strong {
    color: var(--em-text-primary);
    font-weight: 600;
}

.em-trust-divider {
    width: 1px;
    height: 20px;
    background: var(--em-border);
}

/* ============================================
   SECTIONS: SHARED STYLES
   ============================================ */
.em-section {
    position: relative;
    overflow: hidden;
}

.em-section--light {
    background: var(--em-bg-light);
    padding: var(--em-space-3xl) 0;
}

.em-section--dark {
    background: var(--em-bg-dark);
    color: var(--em-text-on-dark);
    padding: var(--em-space-3xl) 0;
}

.em-section--neutral {
    background: var(--em-bg-neutral);
    padding: var(--em-space-2xl) 0;
}

.em-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--em-space-xl);
    margin-bottom: var(--em-space-xl);
}

.em-section-header__left h2 {
    font-family: var(--em-font-family);
    font-size: var(--em-h2-size);
    font-weight: var(--em-h2-weight);
    line-height: var(--em-h2-lh);
    letter-spacing: var(--em-h2-ls);
    margin: 0;
}

.em-section-header__right p {
    font-size: var(--em-p-size);
    line-height: var(--em-p-lh);
    margin: 0;
    max-width: 400px;
    text-align: right;
}

.em-section--dark .em-section-header__right p {
    color: var(--em-text-on-dark-secondary);
}

.em-section--light .em-section-header__right p {
    color: var(--em-text-secondary);
}

/* === DECORATED FRAME (corner dots) === */
.em-decorated-frame {
    position: relative;
    padding: 20px;
}
.em-decorated-frame::before,
.em-decorated-frame::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
}
.em-decorated-frame::before {
    top: 0;
    left: 0;
}
.em-decorated-frame::after {
    top: 0;
    right: 0;
}

/* ============================================
   SECTION 2: CATEGORIES GRID
   ============================================ */
.em-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.em-category-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--em-radius-card-lg);
    padding: 32px;
    text-decoration: none;
    color: #fff;
    transition: all var(--em-transition);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}
.em-category-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-4px);
    color: #fff;
}

.em-category-card__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--em-gradient-icon);
    border-radius: var(--em-radius-card-sm);
    margin-bottom: 4px;
}
.em-category-card__icon svg {
    color: #fff;
}

.em-category-card__title {
    font-family: var(--em-font-family);
    font-size: var(--em-h6-size);
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.em-category-card__count {
    font-size: var(--em-label-size);
    color: var(--em-text-on-dark-secondary);
    margin: 0;
}

.em-category-card__arrow {
    position: absolute;
    top: 32px;
    right: 32px;
    opacity: 0;
    transform: translateX(-8px);
    transition: all var(--em-transition);
    color: var(--em-accent-cta);
}
.em-category-card:hover .em-category-card__arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ============================================
   SECTION 3: STEPS
   ============================================ */
.em-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.em-step-card {
    background: var(--em-bg-light);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-card-lg);
    padding: 40px;
    box-shadow: var(--em-shadow-card);
    transition: all var(--em-transition);
}
.em-step-card:hover {
    box-shadow: var(--em-shadow-light);
    transform: translateY(-2px);
}

.em-step-card__number {
    font-family: var(--em-font-family);
    font-size: 56px;
    font-weight: 700;
    color: var(--em-accent-cta);
    opacity: 0.25;
    line-height: 1;
    margin-bottom: 20px;
    letter-spacing: -0.03em;
}

.em-step-card__icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--em-gradient-icon);
    border-radius: var(--em-radius-card-sm);
    margin-bottom: 20px;
}
.em-step-card__icon svg {
    color: #fff;
}

.em-step-card__title {
    font-family: var(--em-font-family);
    font-size: var(--em-h5-size);
    font-weight: 600;
    color: var(--em-text-primary);
    margin: 0 0 12px;
}

.em-step-card__desc {
    font-size: var(--em-p-size);
    line-height: var(--em-p-lh);
    color: var(--em-text-secondary);
    margin: 0;
}

/* ============================================
   SECTION 4: SCHOOL CARDS
   ============================================ */
.em-school-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.em-school-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--em-radius-card-lg);
    overflow: hidden;
    transition: all var(--em-transition);
}
.em-school-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.em-school-card__link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.em-school-card__image {
    position: relative;
    height: 200px;
    overflow: hidden;
}
.em-school-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.em-school-card:hover .em-school-card__image img {
    transform: scale(1.05);
}

.em-school-card__type {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--em-accent-cta);
    color: #000;
    padding: 4px 12px;
    border-radius: var(--em-radius-btn);
    font-family: var(--em-font-family);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.em-school-card__body {
    padding: 20px;
}

.em-school-card__title {
    font-family: var(--em-font-family);
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 8px;
    color: #fff;
    line-height: 1.4;
}

.em-school-card__location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--em-text-on-dark-secondary);
    margin: 0 0 16px;
}
.em-school-card__location svg {
    flex-shrink: 0;
}

.em-school-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.em-school-card__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #ffb14f;
}

.em-school-card__cta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--em-accent-cta);
    transition: gap var(--em-transition);
}
.em-school-card:hover .em-school-card__cta {
    gap: 8px;
}

/* Skeleton Loader */
.em-school-card--skeleton {
    pointer-events: none;
}
.em-skeleton {
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--em-radius-btn);
    animation: emSkeletonPulse 1.5s ease-in-out infinite;
}
.em-school-card--skeleton .em-school-card__image {
    height: 200px;
}
.em-skeleton--text {
    height: 16px;
    margin-bottom: 10px;
}

@keyframes emSkeletonPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ============================================
   SECTION 5: STATISTICS
   ============================================ */
.em-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align: center;
}

.em-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.em-stat__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--em-bg-surface);
    border-radius: var(--em-radius-card-sm);
    margin-bottom: 8px;
    color: var(--em-accent-interactive);
}

.em-stat__number {
    font-family: var(--em-font-family);
    font-size: 48px;
    font-weight: 700;
    color: var(--em-text-primary);
    letter-spacing: -0.02em;
    line-height: 1;
}

.em-stat__label {
    font-size: var(--em-label-size);
    font-weight: 500;
    color: var(--em-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   SECTION 6: FEATURES
   ============================================ */
.em-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.em-feature-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--em-radius-card-lg);
    padding: 32px;
    display: flex;
    gap: 20px;
    transition: all var(--em-transition);
}
.em-feature-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
}

.em-feature-card__icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--em-gradient-icon);
    border-radius: var(--em-radius-card-sm);
}
.em-feature-card__icon svg {
    color: #fff;
}

.em-feature-card__content h3 {
    font-family: var(--em-font-family);
    font-size: var(--em-h6-size);
    font-weight: 600;
    margin: 0 0 8px;
    color: #fff;
}

.em-feature-card__content p {
    font-size: var(--em-p-size);
    line-height: var(--em-p-lh);
    color: var(--em-text-on-dark-secondary);
    margin: 0;
}

/* ============================================
   SECTION 7: TESTIMONIALS
   ============================================ */
.em-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.em-testimonial-card {
    background: var(--em-bg-light);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-card-lg);
    padding: 32px;
    box-shadow: var(--em-shadow-card);
    transition: all var(--em-transition);
}
.em-testimonial-card:hover {
    box-shadow: var(--em-shadow-light);
    transform: translateY(-2px);
}

.em-testimonial-card__stars {
    display: flex;
    gap: 2px;
    margin-bottom: 16px;
}

.em-testimonial-card__text {
    font-size: var(--em-p-size);
    line-height: var(--em-p-lh);
    color: var(--em-text-primary);
    margin: 0 0 24px;
    font-style: italic;
}

.em-testimonial-card__author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.em-testimonial-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--em-radius-card-sm);
    background: var(--em-gradient-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--em-font-family);
    font-weight: 700;
    font-size: 18px;
}

.em-testimonial-card__name {
    font-family: var(--em-font-family);
    font-size: 15px;
    font-weight: 600;
    color: var(--em-text-primary);
}

.em-testimonial-card__role {
    font-size: 13px;
    color: var(--em-text-tertiary);
}

/* ============================================
   SECTION 8: CTA
   ============================================ */
.em-section--cta {
    padding: var(--em-space-3xl) 0 120px;
}

.em-cta {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.em-cta__badge {
    margin-bottom: var(--em-space-lg);
}

.em-cta__title {
    font-family: var(--em-font-family);
    font-size: var(--em-h2-size);
    font-weight: var(--em-h2-weight);
    line-height: var(--em-h2-lh);
    letter-spacing: var(--em-h2-ls);
    margin: 0 0 var(--em-space-md);
    color: #fff;
}

.em-cta__desc {
    font-size: var(--em-p-lg-size);
    line-height: var(--em-p-lg-lh);
    color: var(--em-text-on-dark-secondary);
    margin: 0 0 40px;
}

.em-cta__buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ============================================
   HERO: POPULAR SEARCH TAGS
   ============================================ */
.em-hero__tags {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.em-hero__tags-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--em-text-tertiary);
}

.em-hero__tag {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-pill);
    font-family: var(--em-font-family);
    font-size: 13px;
    font-weight: 500;
    color: var(--em-text-secondary);
    text-decoration: none;
    transition: all var(--em-transition);
}

.em-hero__tag:hover {
    background: var(--em-accent-cta);
    color: #000;
    border-color: var(--em-accent-cta);
}
.em-hero__tag--nearby {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    color: var(--em-accent-interactive);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.em-hero__tag--nearby:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: var(--em-accent-interactive);
    color: var(--em-accent-interactive);
}
.em-hero__tag--nearby:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* ============================================
   SECTION 2B: POPULAR CITIES
   ============================================ */
.em-cities-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.em-city-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: var(--em-bg-light);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-card-sm);
    text-decoration: none;
    transition: all var(--em-transition);
}

.em-city-card:hover {
    border-color: var(--em-accent-interactive);
    box-shadow: var(--em-shadow-card);
    transform: translateY(-2px);
}

.em-city-card__name {
    font-family: var(--em-font-family);
    font-size: 16px;
    font-weight: 600;
    color: var(--em-text-primary);
    margin: 0;
}

.em-city-card__count {
    font-size: 13px;
    color: var(--em-text-tertiary);
    margin: 4px 0 0;
}

.em-city-card__arrow {
    color: var(--em-text-tertiary);
    transition: all var(--em-transition);
    flex-shrink: 0;
}

.em-city-card:hover .em-city-card__arrow {
    color: var(--em-accent-interactive);
    transform: translateX(4px);
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Tablet */
@media (max-width: 991px) {
    .em-hero {
        padding: 140px 0 80px;
    }
    .em-hero__title {
        font-size: 40px;
        line-height: 48px;
    }
    .em-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .em-section-header__right p {
        text-align: left;
    }
    .em-section-header__left h2 {
        font-size: 32px;
        line-height: 40px;
    }
    .em-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .em-cities-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .em-steps {
        grid-template-columns: repeat(3, 1fr);
    }
    .em-school-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .em-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .em-features-grid {
        grid-template-columns: 1fr;
    }
    .em-testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .em-cta__title {
        font-size: 32px;
        line-height: 40px;
    }
    .em-section--light,
    .em-section--dark {
        padding: var(--em-space-2xl) 0;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .em-hero {
        padding: 120px 0 60px;
    }
    .em-hero__title {
        font-size: 32px;
        line-height: 40px;
    }
    .em-hero__subtitle {
        font-size: 16px;
    }

    /* Search stacked on mobile */
    .em-search__inner {
        flex-direction: column;
        border-radius: var(--em-radius-card-sm);
        padding: 8px;
    }
    .em-search__field {
        width: 100%;
    }
    .em-search__divider {
        width: 100%;
        height: 1px;
    }
    .em-search__select {
        flex: none;
        width: 100%;
        padding: 0;
    }
    .em-search__btn {
        width: 100%;
        justify-content: center;
        margin-top: 4px;
    }
    .em-search .dropdown__face {
        padding: 12px 16px;
    }

    /* Trust indicators stack */
    .em-hero__trust {
        flex-direction: column;
        gap: 12px;
    }
    .em-trust-divider {
        display: none;
    }

    .em-hero__tags {
        margin-bottom: 32px;
    }

    .em-categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .em-category-card {
        padding: 24px;
    }

    .em-cities-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .em-city-card {
        padding: 16px 20px;
    }

    .em-steps {
        grid-template-columns: 1fr;
    }
    .em-step-card {
        padding: 28px;
    }

    .em-school-grid {
        grid-template-columns: 1fr;
    }

    .em-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .em-stat__number {
        font-size: 36px;
    }

    .em-testimonials-grid {
        grid-template-columns: 1fr;
    }

    .em-cta__title {
        font-size: 28px;
        line-height: 36px;
    }
    .em-cta__buttons {
        flex-direction: column;
    }
    .em-cta__buttons .em-btn {
        width: 100%;
        justify-content: center;
    }

    .em-section--light,
    .em-section--dark,
    .em-section--neutral {
        padding: 60px 0;
    }
    .em-section--cta {
        padding: 60px 0 100px;
    }
}

/* Small Mobile */
@media (max-width: 479px) {
    .em-hero {
        padding: 100px 0 48px;
    }
    .em-hero__title {
        font-size: 28px;
        line-height: 36px;
    }
    .em-categories-grid {
        grid-template-columns: 1fr;
    }
    .em-cities-grid {
        grid-template-columns: 1fr;
    }
    .em-hero__tags {
        gap: 6px;
        margin-bottom: 24px;
    }
    .em-hero__tag {
        padding: 5px 12px;
        font-size: 12px;
    }
    .em-stats-grid {
        grid-template-columns: 1fr;
    }
    .em-section-header__left h2 {
        font-size: 26px;
        line-height: 34px;
    }
}

/* ============================================
   PAGE LOADER (preserved from original)
   ============================================ */
.page-loader {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 0 0 100% 100%;
    box-shadow: 0px 4px 20px rgba(32, 79, 94, 0.07);
    transition: 0.35s cubic-bezier(0, 0, 0.3642, 1);
}
.page-loader .page-loader-content {
    filter: blur(15px);
    transform: translateY(40px) scale(0.8);
    opacity: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
}
.page-loader .page-loader-content.page-loader-active {
    filter: blur(0);
    transform: translateY(0) scale(1);
    opacity: 1;
}
.page-loader-logo img { width: 160px; }
.page-loader-progress { margin-top: 20px; width: 250px; }
.page-loader-bar {
    border-radius: 2px;
    height: 4px;
    background: var(--em-gradient-progress);
    width: 0;
    transition: width 0.15s ease-out;
}
.page-loader-percent { margin-top: 28px; text-align: center; }
.page-loader.page-loader-active {
    pointer-events: all;
    height: 100%;
    border-radius: 0;
}

/* ============================================
   LISTING PAGE — LAYOUT
   ============================================ */
.em-listing {
    background: var(--em-bg-neutral);
    padding: 32px 0 80px;
    min-height: 60vh;
}
.em-listing__layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: start;
}

/* ============================================
   LISTING — SIDEBAR FILTER PANEL
   ============================================ */
.em-listing__sidebar {
    position: relative;
}
/* Mobil filtre butonu (sadece tablet/mobilde görünür) */
.em-filter-mobile-btn {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--em-bg-light);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-btn);
    font-family: var(--em-font-family);
    font-size: 14px;
    font-weight: 500;
    color: var(--em-text-primary);
    cursor: pointer;
    transition: all var(--em-transition-fast);
}
.em-filter-mobile-btn:hover {
    border-color: var(--em-accent-interactive);
    color: var(--em-accent-interactive);
}
.em-filter-mobile-btn svg {
    color: var(--em-accent-interactive);
}
.em-filter-mobile-btn__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--em-accent-brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
}

/* Mobil filtre overlay arka planı */
.em-filter-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.em-filter-overlay--active {
    opacity: 1;
    pointer-events: auto;
}

/* Mobil filter panel header (desktop'ta gizli) */
.em-filter-panel__header--mobile {
    display: none;
}
.em-filter-panel {
    background: var(--em-bg-light);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-card-lg);
    overflow: hidden;
    position: sticky;
    top: 100px;
}
.em-filter-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--em-border);
}
.em-filter-panel__header-title {
    font-family: var(--em-font-family);
    font-size: 16px;
    font-weight: 600;
    color: var(--em-text-primary);
}
.em-filter-panel__close {
    background: var(--em-bg-surface);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--em-text-secondary);
    transition: all var(--em-transition-fast);
}
.em-filter-panel__close:hover {
    background: var(--em-border);
}
.em-filter-panel__body {
    padding: 24px;
}
.em-filter-group {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--em-border);
}
.em-filter-group:last-of-type {
    border-bottom: none;
    margin-bottom: 4px;
    padding-bottom: 0;
}
.em-filter-group__title {
    font-family: var(--em-font-family);
    font-size: 15px;
    font-weight: 600;
    color: var(--em-text-primary);
    margin: 0 0 14px;
}
.em-filter-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    cursor: pointer;
    font-family: var(--em-font-family);
    font-size: 14px;
    color: var(--em-text-primary);
    margin: 0;
    transition: color var(--em-transition-fast);
}
.em-filter-check:hover {
    color: var(--em-accent-interactive);
}
.em-filter-check input[type="checkbox"] {
    accent-color: var(--em-accent-interactive);
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.em-filter-select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-btn);
    font-family: var(--em-font-family);
    font-size: 14px;
    color: var(--em-text-primary);
    background: var(--em-bg-light);
    outline: none;
    cursor: pointer;
    transition: border-color var(--em-transition-fast);
}
.em-filter-select:focus {
    border-color: var(--em-accent-interactive);
}
.em-filter-apply {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
    font-size: 14px;
}
.em-filter-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    font-family: var(--em-font-family);
    font-size: 13px;
    color: var(--em-text-secondary);
    text-decoration: none;
    transition: color var(--em-transition-fast);
}
.em-filter-clear:hover {
    color: var(--em-accent-interactive);
}

/* Filtre grup başlık toggle butonu */
.em-filter-group__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.em-filter-group__toggle {
    background: none;
    border: none;
    font-family: var(--em-font-family);
    font-size: 12px;
    color: var(--em-accent-interactive);
    cursor: pointer;
    padding: 2px 0;
    transition: color var(--em-transition-fast);
}
.em-filter-group__toggle:hover {
    color: var(--em-accent-brand);
}

/* Daraltılabilir filtre grubu */
.em-filter-group--collapsed {
    max-height: 180px;
    overflow: hidden;
    position: relative;
}
.em-filter-group--collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(transparent, var(--em-bg-light));
    pointer-events: none;
}

/* Aktif filtre sayacı */
.em-filter-active-count {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(16, 185, 129, 0.08);
    border-radius: var(--em-radius-btn);
    font-family: var(--em-font-family);
    font-size: 13px;
    font-weight: 500;
    color: var(--em-accent-brand);
}

/* ============================================
   LISTING — TOP BAR
   ============================================ */
.em-listing__topbar {
    margin-bottom: 20px;
}
.em-listing__count {
    font-family: var(--em-font-family);
    font-size: 15px;
    color: var(--em-text-secondary);
}
.em-listing__count strong {
    color: var(--em-text-primary);
    font-weight: 600;
}

/* ============================================
   LISTING — SCHOOL CARDS (Horizontal)
   ============================================ */
.em-listing-card {
    background: var(--em-bg-light);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-card-lg);
    overflow: hidden;
    margin-bottom: 16px;
    transition: all var(--em-transition);
    position: relative;
}
.em-listing-card:hover {
    box-shadow: var(--em-shadow-light);
    transform: translateY(-2px);
}
.em-listing-card__link {
    display: grid !important;
    grid-template-columns: 320px 1fr;
    text-decoration: none !important;
    color: inherit;
    min-height: 220px;
}
/* Shimmer placeholder */
@keyframes em-shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.em-shimmer {
    background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
    background-size: 800px 100%;
    animation: em-shimmer 1.5s infinite linear;
}
.em-listing-card__image {
    position: relative;
    overflow: hidden;
}
.em-listing-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, opacity 0.4s ease;
    opacity: 0;
}
.em-listing-card__image img.em-img-loaded {
    opacity: 1;
}
.em-listing-card:hover .em-listing-card__image img {
    transform: scale(1.04);
}
.em-listing-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    padding: 5px 12px;
    border-radius: var(--em-radius-btn);
    font-family: var(--em-font-family);
    font-size: 12px;
    font-weight: 600;
    z-index: 2;
}
.em-listing-card__badge--green {
    top: 44px;
    background: rgba(16, 185, 129, 0.85);
}
.em-listing-card__body {
    padding: 24px;
    display: flex;
    flex-direction: column;
}
.em-listing-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.em-listing-card__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--em-font-family);
    font-size: 14px;
    font-weight: 600;
    color: #f59e0b;
}
.em-listing-card__reviews {
    color: var(--em-text-secondary);
    font-weight: 400;
    font-size: 13px;
    margin-left: 2px;
}
.em-listing-card__fav {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--em-accent-interactive);
    transition: all var(--em-transition-fast);
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.em-listing-card__fav:hover {
    background: var(--em-accent-interactive);
    color: #fff;
    border-color: var(--em-accent-interactive);
}
.em-listing-card__title {
    font-family: var(--em-font-family);
    font-size: 18px;
    font-weight: 600;
    color: var(--em-text-primary);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}
.em-listing-card__verified {
    color: var(--em-accent-interactive);
    flex-shrink: 0;
}
.em-listing-card__desc {
    font-family: var(--em-font-family);
    font-size: 14px;
    line-height: 22px;
    color: var(--em-text-secondary);
    margin: 0 0 auto;
}
.em-listing-card__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--em-border);
}
.em-listing-card__contact {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--em-font-family);
    font-size: 13px;
    font-weight: 500;
    color: var(--em-text-secondary);
    text-decoration: none;
    position: relative;
    z-index: 2;
}
.em-listing-card__contact:hover {
    color: var(--em-accent-interactive);
}
.em-listing-card__contact svg {
    flex-shrink: 0;
    opacity: 0.5;
}
.em-listing-card__contact:hover svg {
    opacity: 1;
    color: var(--em-accent-interactive);
}
.em-listing-card__distance {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--em-accent-interactive);
    background: rgba(16, 185, 129, 0.08);
    padding: 3px 10px;
    border-radius: var(--em-radius-pill);
    margin-left: auto;
}
.em-listing-card__distance svg {
    flex-shrink: 0;
}

/* === NEARBY BUTTON (Listing topbar) === */
.em-nearby-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--em-radius-pill);
    border: 1px solid var(--em-border);
    background: var(--em-bg-light);
    color: var(--em-text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--em-font-family);
    white-space: nowrap;
}
.em-nearby-btn:hover {
    border-color: var(--em-accent-interactive);
    color: var(--em-accent-interactive);
}
.em-nearby-btn--active {
    background: rgba(16, 185, 129, 0.1);
    color: var(--em-accent-interactive);
    border-color: var(--em-accent-interactive);
}

/* ============================================
   LISTING — EMPTY STATE
   ============================================ */
.em-listing__empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--em-text-secondary);
    font-family: var(--em-font-family);
    font-size: 16px;
}

/* ============================================
   LISTING — PAGINATION
   ============================================ */
.em-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 32px 0 16px;
    font-family: var(--em-font-family);
}
.em-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-sm);
    background: var(--em-bg-light);
    color: var(--em-text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--em-transition);
}
.em-pagination__btn:hover:not(:disabled):not(.em-pagination__btn--active) {
    border-color: var(--em-accent-brand);
    color: var(--em-accent-brand);
    background: rgba(16, 185, 129, 0.08);
}
.em-pagination__btn--active {
    background: var(--em-accent-brand);
    border-color: var(--em-accent-brand);
    color: #fff;
}
.em-pagination__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.em-pagination__dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 40px;
    color: var(--em-text-secondary);
    font-size: 14px;
}

/* ============================================
   LISTING — RESPONSIVE
   ============================================ */

/* Tablet */
@media (max-width: 991px) {
    .em-listing__layout {
        grid-template-columns: 1fr;
    }
    .em-listing__topbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .em-filter-mobile-btn {
        display: inline-flex;
    }
    .em-filter-overlay {
        display: block;
    }
    .em-filter-panel__header--mobile {
        display: flex;
    }
    .em-listing__sidebar {
        position: fixed;
        top: 0;
        right: -340px;
        width: 320px;
        height: 100vh;
        z-index: 1000;
        transition: right 0.3s ease;
        overflow-y: auto;
        background: var(--em-bg-light);
    }
    .em-listing__sidebar--open {
        right: 0;
    }
    .em-listing__sidebar .em-filter-panel {
        position: static;
        border: none;
        border-radius: 0;
        min-height: 100vh;
    }
    .em-listing-card__link {
        grid-template-columns: 260px 1fr;
    }
    .em-listing {
        padding: 24px 0 60px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .em-listing-card__link {
        grid-template-columns: 1fr;
    }
    .em-listing-card__image {
        height: 200px;
    }
    .em-listing-card__body {
        padding: 20px;
    }
    .em-listing-card__title {
        font-size: 16px;
    }
    .em-listing-card__fav {
        top: 12px;
        right: 12px;
    }
    .em-listing {
        padding: 16px 0 48px;
    }
}


/* ========================================
   DETAIL PAGE STYLES
   ======================================== */

/* === BREADCRUMB === */
.em-breadcrumb {
    background: var(--em-bg-light);
    padding: 16px 0 0;
}
.em-breadcrumb__nav {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--em-font-family);
    font-size: 13px;
    color: var(--em-text-tertiary);
}
.em-breadcrumb__nav a {
    color: var(--em-text-secondary);
    text-decoration: none;
    transition: color var(--em-transition-fast);
}
.em-breadcrumb__nav a:hover {
    color: var(--em-accent-interactive);
}
.em-breadcrumb__sep {
    color: var(--em-text-tertiary);
    opacity: 0.5;
}

/* === DETAIL HEADER === */
.em-detail-header {
    background: var(--em-bg-light);
    padding: 24px 0 32px;
    border-bottom: 1px solid var(--em-border);
}
.em-detail-header__location {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--em-text-secondary);
}
.em-detail-header__location svg {
    color: var(--em-accent-interactive);
}
.em-detail-header__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}
.em-detail-header__info {
    flex: 1;
    min-width: 0;
}
.em-detail-header__title {
    font-size: 28px;
    font-weight: 600;
    color: var(--em-text-primary);
    margin: 0 0 8px;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.em-detail-header__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--em-text-secondary);
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.em-detail-header__type {
    font-weight: 600;
    color: var(--em-accent-interactive);
}
.em-detail-header__sep {
    color: var(--em-text-tertiary);
}
.em-detail-header__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}
.em-detail-header__rating svg {
    color: #f59e0b;
}
.em-detail-header__rating > span:first-of-type {
    color: var(--em-text-primary);
}
.em-detail-header__reviews {
    font-weight: 400;
    color: var(--em-text-tertiary);
}
.em-detail-header__date {
    color: var(--em-text-tertiary);
}
.em-detail-header__address {
    font-size: 14px;
    color: var(--em-text-secondary);
    margin: 0;
    line-height: 1.5;
}
.em-detail-header__actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    align-items: flex-start;
}
.em-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-btn);
    background: var(--em-bg-light);
    color: var(--em-text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--em-transition);
    white-space: nowrap;
}
.em-action-btn:hover {
    border-color: var(--em-accent-interactive);
    color: var(--em-accent-interactive);
}
.em-action-btn--active {
    background: var(--em-accent-interactive);
    border-color: var(--em-accent-interactive);
    color: #fff;
}
.em-action-btn--active:hover {
    background: var(--em-accent-hover);
    border-color: var(--em-accent-hover);
    color: #fff;
}

/* === DETAIL GALLERY === */
.em-detail-gallery {
    padding: 0 0 24px;
    background: var(--em-bg-light);
}
.em-gallery-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 200px 200px;
    gap: 8px;
    border-radius: var(--em-radius-card-lg);
    overflow: hidden;
}
.em-gallery-grid__main {
    grid-row: 1 / 3;
    display: block;
    overflow: hidden;
}
.em-gallery-grid__item {
    display: block;
    overflow: hidden;
}
.em-gallery-grid__main img,
.em-gallery-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.em-gallery-grid a:hover img {
    transform: scale(1.04);
}
.em-gallery-grid__item--more {
    position: relative;
}
.em-gallery-grid__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.02em;
    pointer-events: none;
}

/* Gallery: tek resim */
.em-gallery-grid--single {
    grid-template-columns: 1fr;
    grid-template-rows: 400px;
}
.em-gallery-grid--single .em-gallery-grid__main {
    grid-row: 1;
}

/* Gallery: 2-3 resim */
.em-gallery-grid--few {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 200px 200px;
}

/* Gallery: resim yok placeholder */
.em-detail-gallery--placeholder {
    padding: 0 0 24px;
    background: var(--em-bg-light);
}
.em-gallery-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 240px;
    background: var(--em-bg-surface);
    border-radius: var(--em-radius-card-lg);
    color: var(--em-text-tertiary);
    font-size: 14px;
}
.em-gallery-placeholder p {
    margin: 12px 0 0;
}

/* === DETAIL MAIN LAYOUT === */
.em-detail {
    background: var(--em-bg-neutral);
    padding: 40px 0 80px;
}
.em-detail__layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}
.em-detail__content {
    min-width: 0;
}
.em-detail__sidebar {
    position: sticky;
    top: 24px;
}

/* === DETAIL SECTIONS (card style) === */
.em-detail-section {
    background: var(--em-bg-light);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-card-lg);
    padding: 32px;
    margin-bottom: 24px;
}
.em-detail-section__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--em-text-primary);
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.01em;
}
.em-detail-section__icon {
    color: var(--em-accent-interactive);
    flex-shrink: 0;
}
.em-detail-section__text {
    font-size: 15px;
    line-height: 26px;
    color: var(--em-text-secondary);
    margin: 0;
    white-space: pre-line;
}
.em-detail-section__subtitle {
    font-size: 16px;
    font-weight: 600;
    color: var(--em-text-primary);
    margin: 0 0 12px;
}

/* === PANORAMA === */
.em-detail-pano {
    border-radius: var(--em-radius-card-sm);
    overflow: hidden;
}

/* === VIDEOS === */
.em-detail-videos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.em-detail-video {
    border-radius: var(--em-radius-card-sm);
    overflow: hidden;
    aspect-ratio: 16 / 9;
}
.em-detail-video iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* === AMENITIES === */
.em-amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.em-amenity {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--em-bg-surface);
    border-radius: var(--em-radius-btn);
    font-size: 14px;
    font-weight: 500;
    color: var(--em-text-primary);
    transition: background var(--em-transition);
}
.em-amenity:hover {
    background: var(--em-bg-neutral);
}
.em-amenity i {
    font-size: 18px;
    color: var(--em-accent-interactive);
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}
.em-amenity svg {
    flex-shrink: 0;
}

/* Aktif olanak */
.em-amenity--active {
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.15);
}
.em-amenity--active svg {
    color: var(--em-accent-brand);
}

/* Pasif olanak */
.em-amenity--inactive {
    opacity: 0.5;
    background: var(--em-bg-surface);
    border: 1px solid transparent;
}
.em-amenity--inactive svg {
    color: var(--em-text-tertiary);
}
.em-amenity--inactive span {
    text-decoration: line-through;
    color: var(--em-text-tertiary);
}

/* === EMPTY STATE === */
.em-detail-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
}
.em-detail-empty-state p {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--em-text-tertiary);
}

/* === CONTACT CARD === */
.em-sidebar-contact {
    margin-bottom: 20px;
}
.em-contact-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.em-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--em-border);
}
.em-contact-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.em-contact-item:first-child {
    padding-top: 0;
}
.em-contact-item svg {
    flex-shrink: 0;
    color: var(--em-accent-interactive);
    margin-top: 2px;
}
.em-contact-item__label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--em-text-tertiary);
    margin-bottom: 2px;
}
.em-contact-item__value {
    font-size: 14px;
    color: var(--em-text-primary);
    text-decoration: none;
    word-break: break-word;
}
a.em-contact-item__value:hover {
    color: var(--em-accent-interactive);
}
.em-contact-map {
    margin-top: 16px;
    border-radius: 10px;
    overflow: hidden;
}
.em-contact-map iframe {
    display: block;
}
.em-contact-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}
.em-contact-actions__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--em-font-family);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}
.em-contact-actions__btn--whatsapp {
    background: #25d366;
    color: #fff;
}
.em-contact-actions__btn--whatsapp:hover {
    background: #1fb855;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
    transform: translateY(-1px);
    color: #fff;
}
.em-contact-actions__btn--call {
    background: var(--em-bg-surface);
    color: var(--em-text-primary);
    border: 1px solid var(--em-border);
}
.em-contact-actions__btn--call:hover {
    border-color: var(--em-accent-interactive);
    color: var(--em-accent-interactive);
    background: rgba(16, 185, 129, 0.04);
}

/* === REPORTS === */
.em-reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}
.em-report-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.em-report-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--em-bg-surface);
    border-radius: var(--em-radius-btn);
    color: var(--em-text-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all var(--em-transition);
    border: 1px solid transparent;
}
.em-report-card:hover {
    border-color: var(--em-accent-interactive);
    color: var(--em-accent-interactive);
    background: #f0fdf4;
}
.em-report-card svg {
    flex-shrink: 0;
    color: #dc2626;
}
.em-report-card span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* === LOGIN NOTICE === */
.em-login-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: var(--em-radius-btn);
    color: #92400e;
    font-size: 14px;
    font-weight: 500;
}
.em-login-notice svg {
    flex-shrink: 0;
    color: #d97706;
}

/* === PRICING === */
.em-pricing-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.em-pricing-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px dashed var(--em-border);
}
.em-pricing-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.em-pricing-item:first-child {
    padding-top: 0;
}
.em-pricing-item__info {
    flex: 1;
    min-width: 0;
}
.em-pricing-item__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--em-text-primary);
    margin: 0 0 2px;
}
.em-pricing-item__desc {
    font-size: 13px;
    color: var(--em-text-tertiary);
    margin: 0;
}
.em-pricing-item__price {
    font-size: 18px;
    font-weight: 700;
    color: var(--em-accent-interactive);
    white-space: nowrap;
}

/* === RATING SUMMARY === */
.em-rating-summary {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--em-border);
}
.em-rating-summary__score {
    text-align: center;
    flex-shrink: 0;
    min-width: 100px;
}
.em-rating-big {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #f59e0b;
}
.em-rating-big span {
    font-size: 42px;
    font-weight: 700;
    color: var(--em-text-primary);
    line-height: 1;
}
.em-rating-big svg {
    fill: #f59e0b;
    stroke: #f59e0b;
}
.em-rating-summary__score > p {
    font-size: 13px;
    color: var(--em-text-tertiary);
    margin: 8px 0 0;
}
.em-rating-summary__bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.em-rating-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}
.em-rating-bar__label {
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 32px;
    font-size: 13px;
    font-weight: 600;
    color: var(--em-text-secondary);
    justify-content: flex-end;
}
.em-rating-bar__label svg {
    color: #f59e0b;
}
.em-rating-bar .progress {
    height: 8px;
    border-radius: 4px;
    background: var(--em-bg-surface);
    overflow: hidden;
}
.em-rating-bar .progress-bar {
    border-radius: 4px;
    transition: width 0.6s ease;
    background: var(--em-accent-interactive) !important;
}
.em-rating-bar__count {
    min-width: 24px;
    font-size: 13px;
    color: var(--em-text-tertiary);
    text-align: right;
}

/* === COMMENTS === */
.em-comments {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.em-comment {
    padding: 24px 0;
    border-bottom: 1px solid var(--em-border);
}
.em-comment:first-child {
    padding-top: 0;
}
.em-comment:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.em-comment__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}
.em-comment__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--em-text-primary);
    margin: 0 0 2px;
}
.em-comment__date {
    font-size: 12px;
    color: var(--em-text-tertiary);
}
.em-comment__stars {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.em-comment__stars .rating-stars {
    gap: 2px;
}
.em-comment__stars .fa-star-icon {
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23f59e0b' viewBox='0 0 16 16'%3e%3cpath d='M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z'/%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}
.em-comment__stars .fa-star-icon.none {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e5e7eb' viewBox='0 0 16 16'%3e%3cpath d='M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z'/%3e%3c/svg%3e");
}
.em-comment__stars > span {
    font-size: 13px;
    font-weight: 600;
    color: var(--em-text-secondary);
}
.em-comment__text {
    font-size: 14px;
    line-height: 22px;
    color: var(--em-text-secondary);
    margin: 0 0 12px;
}
.em-comment__like {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--em-radius-pill);
    background: var(--em-bg-surface);
    color: var(--em-text-secondary);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--em-transition);
    border: 1px solid transparent;
}
.em-comment__like:hover {
    border-color: var(--em-accent-interactive);
    color: var(--em-accent-interactive);
}
.em-comment__like-count {
    font-weight: 700;
    color: var(--em-text-primary);
}
.em-comment__photos {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.em-comment__photo {
    width: 112px;
    height: 70px;
    border-radius: var(--em-radius-btn);
    overflow: hidden;
}
.em-comment__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* === COMMENT FORM === */
.em-comment-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}
.em-comment-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.em-comment-form__group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.em-comment-form__label {
    font-size: 14px;
    font-weight: 500;
    color: var(--em-text-primary);
}
.em-comment-form .form-control {
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-btn);
    font-size: 14px;
    padding: 10px 14px;
    transition: border-color var(--em-transition);
}
.em-comment-form .form-control:focus {
    border-color: var(--em-accent-interactive);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}
.em-comment-form__photos {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.em-comment-form__photo {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: var(--em-radius-btn);
    overflow: hidden;
}
.em-comment-form__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.em-comment-form__photo-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}
.em-comment-form__submit {
    display: flex;
    justify-content: flex-end;
}

/* === SIDEBAR CARD === */
.em-sidebar-card {
    background: var(--em-bg-light);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-card-lg);
    padding: 28px;
}
.em-sidebar-card__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--em-text-primary);
    margin: 0 0 20px;
    letter-spacing: -0.01em;
}

/* === SIDEBAR FORM === */
.em-sidebar-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.em-sidebar-form__group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.em-sidebar-form__group label {
    font-size: 14px;
    font-weight: 500;
    color: var(--em-text-primary);
}
.em-sidebar-form .form-control {
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-btn);
    font-size: 14px;
    padding: 10px 14px;
    transition: border-color var(--em-transition);
}
.em-sidebar-form .form-control:focus {
    border-color: var(--em-accent-interactive);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}
.em-sidebar-form__subtitle {
    font-size: 15px;
    font-weight: 600;
    color: var(--em-text-primary);
    margin: 4px 0 0;
}
.em-sidebar-form__files {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.em-sidebar-form__files > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.em-sidebar-form__files label {
    font-size: 13px;
}

/* === DETAIL RESPONSIVE === */

/* Tablet */
@media (max-width: 991px) {
    .em-detail__layout {
        grid-template-columns: 1fr;
    }
    .em-detail__sidebar {
        position: static;
    }
    .em-gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 260px 170px;
    }
    .em-gallery-grid__main {
        grid-column: 1 / 3;
    }
    .em-detail-header__title {
        font-size: 24px;
    }
    .em-detail {
        padding: 24px 0 60px;
    }
    .em-rating-summary {
        flex-direction: column;
        gap: 20px;
        align-items: stretch;
    }
    .em-rating-summary__score {
        display: flex;
        align-items: center;
        gap: 16px;
        text-align: left;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .em-detail-header {
        padding: 20px 0;
    }
    .em-detail-header__title {
        font-size: 20px;
    }
    .em-detail-header__row {
        flex-direction: column;
        gap: 16px;
    }
    .em-detail-header__actions {
        width: 100%;
    }
    .em-action-btn {
        flex: 1;
        justify-content: center;
        font-size: 13px;
        padding: 8px 12px;
    }
    .em-gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .em-gallery-grid__main {
        grid-row: auto;
        grid-column: auto;
        height: 220px;
    }
    .em-gallery-grid__item {
        height: 140px;
    }
    .em-gallery-grid__item:nth-child(3),
    .em-gallery-grid__item:nth-child(4) {
        display: none;
    }
    .em-detail-section {
        padding: 24px 20px;
        border-radius: var(--em-radius-card-sm);
    }
    .em-detail-section__title {
        font-size: 18px;
    }
    .em-detail {
        padding: 16px 0 48px;
    }
    .em-detail-videos {
        grid-template-columns: 1fr;
    }
    .em-amenities-grid {
        grid-template-columns: 1fr 1fr;
    }
    .em-comment__header {
        flex-direction: column;
        gap: 6px;
    }
    .em-sidebar-card {
        padding: 24px 20px;
    }
    .em-comment-form__row {
        grid-template-columns: 1fr;
    }
}


/* ========================================
   SURVEY WIDGET
   ======================================== */

/* === FAB === */
.em-survey-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--em-accent-interactive);
    color: #fff;
    padding: 14px 22px;
    border-radius: var(--em-radius-pill);
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.4);
    opacity: 0;
    transform: translateY(100px) scale(0.8);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-family: var(--em-font-family);
    font-size: 14px;
    font-weight: 600;
    user-select: none;
}
.em-survey-fab--visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.em-survey-fab:hover {
    box-shadow: 0 12px 40px rgba(16, 185, 129, 0.5);
    transform: translateY(-2px) scale(1.02);
}
.em-survey-fab--shifted {
    bottom: 100px;
}
.em-survey-fab__pulse {
    position: absolute;
    inset: 0;
    border-radius: var(--em-radius-pill);
    background: var(--em-accent-interactive);
    animation: emSurveyPulse 2s ease-out infinite;
    z-index: -1;
    pointer-events: none;
}
@keyframes emSurveyPulse {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.5); opacity: 0; }
}
.em-survey-fab__inner {
    display: flex;
    align-items: center;
    animation: emSurveyBounce 2s ease-in-out infinite;
}
@keyframes emSurveyBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
.em-survey-fab__label {
    white-space: nowrap;
}
.em-survey-fab__close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    color: #fff;
    cursor: pointer;
    padding: 0;
    margin-left: 4px;
    transition: background 0.2s;
}
.em-survey-fab__close:hover {
    background: rgba(255,255,255,0.4);
}

/* === OVERLAY === */
.em-survey-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 200;
    animation: emSurveyFadeIn 0.3s ease;
}
@keyframes emSurveyFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* === MODAL === */
.em-survey-modal {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 201;
    width: 420px;
    max-width: calc(100vw - 32px);
    max-height: 85vh;
    background: #fff;
    border-radius: var(--em-radius-card-lg);
    box-shadow: 0 24px 80px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: emSurveySlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes emSurveySlideUp {
    from { opacity: 0; transform: translateY(40px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Progress */
.em-survey-progress {
    height: 4px;
    background: var(--em-bg-surface);
    flex-shrink: 0;
}
.em-survey-progress__bar {
    height: 100%;
    background: var(--em-accent-interactive);
    transition: width 0.4s ease;
    border-radius: 2px;
}

/* Header */
.em-survey-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px 0;
    flex-shrink: 0;
}
.em-survey-header__title {
    font-family: var(--em-font-family);
    font-size: 18px;
    font-weight: 600;
    color: var(--em-text-primary);
    margin: 0;
    flex: 1;
}
.em-survey-header__step {
    font-size: 13px;
    color: var(--em-text-tertiary);
    font-weight: 500;
}
.em-survey-close {
    background: none;
    border: none;
    color: var(--em-text-tertiary);
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
    display: flex;
}
.em-survey-close:hover { color: var(--em-text-primary); }

/* Body */
.em-survey-body {
    padding: 20px 24px;
    flex: 1;
    overflow-y: auto;
}
.em-survey-question {
    font-size: 15px;
    color: var(--em-text-secondary);
    margin: 0 0 16px;
    line-height: 1.5;
}

/* Step transition */
.em-survey-step {
    animation: emStepFade 0.3s ease;
}
@keyframes emStepFade {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Option cards */
.em-survey-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.em-survey-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--em-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    color: var(--em-text-primary);
    user-select: none;
}
.em-survey-option:hover {
    border-color: var(--em-accent-interactive);
    background: rgba(16, 185, 129, 0.04);
}
.em-survey-option--selected {
    border-color: var(--em-accent-interactive);
    background: rgba(16, 185, 129, 0.08);
    box-shadow: 0 0 0 1px var(--em-accent-interactive);
}
.em-survey-option__icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}
.em-survey-option__text {
    flex: 1;
}

/* Checkbox grid */
.em-survey-checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.em-survey-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1.5px solid var(--em-border);
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
    user-select: none;
}
.em-survey-check:hover {
    border-color: var(--em-accent-interactive);
}
.em-survey-check input[type="checkbox"] {
    accent-color: var(--em-accent-interactive);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.em-survey-check--selected {
    border-color: var(--em-accent-interactive);
    background: rgba(16, 185, 129, 0.06);
    color: var(--em-accent-interactive);
    font-weight: 500;
}

/* Stars */
.em-survey-stars {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 24px 0;
}
.em-survey-star {
    background: none;
    border: none;
    color: #e3e8ef;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 4px;
}
.em-survey-star:hover { color: #fcd93a; transform: scale(1.2); }
.em-survey-star--active { color: #fcd93a; }
.em-survey-star-label {
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--em-accent-interactive);
    animation: emStepFade 0.3s ease;
}

/* Textarea */
.em-survey-textarea {
    border: 1.5px solid var(--em-border);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
    resize: none;
    transition: border-color 0.2s;
}
.em-survey-textarea:focus {
    border-color: var(--em-accent-interactive);
    outline: none;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Footer */
.em-survey-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid var(--em-border);
    flex-shrink: 0;
}
.em-survey-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    font-family: var(--em-font-family);
}
.em-survey-btn--back {
    background: var(--em-bg-surface);
    color: var(--em-text-secondary);
}
.em-survey-btn--back:hover {
    background: var(--em-border);
}
.em-survey-btn--next {
    background: var(--em-accent-interactive);
    color: #fff;
}
.em-survey-btn--next:hover {
    background: #0ea572;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.em-survey-btn--submit {
    background: var(--em-accent-interactive);
    color: #fff;
    padding: 10px 28px;
}
.em-survey-btn--submit:hover {
    background: #0ea572;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.em-survey-btn--submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Success */
.em-survey-success {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    animation: emSurveyFadeIn 0.3s ease;
    cursor: pointer;
}
.em-survey-success__content {
    text-align: center;
    background: #fff;
    padding: 48px 56px;
    border-radius: var(--em-radius-card-lg);
    animation: emSurveySlideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}
.em-survey-success__check {
    color: var(--em-accent-interactive);
    margin-bottom: 16px;
    animation: emSuccessScale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}
@keyframes emSuccessScale {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.em-survey-success h3 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--em-text-primary);
}
.em-survey-success p {
    color: var(--em-text-secondary);
    font-size: 15px;
    margin: 0;
}

/* === SURVEY RESULTS (detail page) === */
.em-survey-results__count {
    font-size: 14px;
    font-weight: 500;
    color: var(--em-text-tertiary);
    margin-left: 8px;
}
.em-survey-results__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.em-survey-results__card {
    background: var(--em-bg-surface);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    transition: transform 0.2s ease;
}
.em-survey-results__card:hover {
    transform: translateY(-2px);
}
.em-survey-results__card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(252, 217, 58, 0.15);
    color: #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}
.em-survey-results__card-icon--price {
    background: rgba(16, 185, 129, 0.12);
    color: var(--em-accent-interactive);
}
.em-survey-results__card-icon--veli {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}
.em-survey-results__card-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--em-text-primary);
    line-height: 1.2;
    margin-bottom: 4px;
}
.em-survey-results__card-label {
    font-size: 13px;
    color: var(--em-text-tertiary);
    line-height: 1.4;
}
.em-survey-results__card-label small {
    opacity: 0.7;
}
.em-survey-results__subtitle {
    font-size: 15px;
    font-weight: 600;
    color: var(--em-text-secondary);
    margin: 0 0 12px;
}
.em-survey-results__feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.em-survey-results__feature {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(16, 185, 129, 0.08);
    border-radius: var(--em-radius-pill);
    font-size: 13px;
    font-weight: 500;
    color: var(--em-accent-interactive);
}
.em-survey-results__feature svg {
    flex-shrink: 0;
}
.em-survey-results__feature small {
    opacity: 0.6;
    font-weight: 400;
}

/* Mobile survey */
@media (max-width: 576px) {
    .em-survey-modal {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        max-height: 90vh;
        border-radius: 20px 20px 0 0;
        animation: emSurveySlideUpMobile 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    @keyframes emSurveySlideUpMobile {
        from { opacity: 0; transform: translateY(100%); }
        to { opacity: 1; transform: translateY(0); }
    }
    .em-survey-fab__label { display: none; }
    .em-survey-fab {
        padding: 16px;
        border-radius: 50%;
        width: 56px;
        height: 56px;
        justify-content: center;
    }
    .em-survey-fab__close {
        position: absolute;
        top: -6px;
        right: -6px;
        width: 20px;
        height: 20px;
        background: rgba(0,0,0,0.5);
    }
    .em-survey-checks { grid-template-columns: 1fr; }
    .em-survey-header { padding: 16px 20px 0; }
    .em-survey-body { padding: 16px 20px; }
    .em-survey-footer { padding: 12px 20px; }
}


/* ========================================
   SHARED PAGE STYLES
   ======================================== */

/* === PAGE HERO === */
.em-page-hero {
    background: var(--em-accent-interactive);
    color: #fff;
    padding: 60px 0;
    text-align: center;
}
.em-page-hero__badge {
    display: inline-block;
    padding: 6px 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--em-radius-pill);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
}
.em-page-hero__title {
    font-size: 36px;
    font-weight: 600;
    margin: 0 0 12px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.em-page-hero__desc {
    font-size: 16px;
    opacity: 0.85;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}
.em-page-hero__split {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
    text-align: left;
}
.em-page-hero__left {
    flex: 1;
}
.em-page-hero__right {
    flex-shrink: 0;
    max-width: 380px;
}

/* === PAGE (generic) === */
.em-page {
    background: var(--em-bg-neutral);
    padding: 40px 0 80px;
}
.em-page__header {
    margin-bottom: 32px;
}
.em-page__title {
    font-size: 28px;
    font-weight: 600;
    color: var(--em-text-primary);
    margin: 0 0 8px;
}
.em-page__desc {
    font-size: 15px;
    color: var(--em-text-secondary);
    margin: 0;
}

/* === FORM CARD === */
.em-form-card {
    background: var(--em-bg-light);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-card-lg);
    padding: 32px;
}
.em-form-card__footer {
    margin-top: 28px;
    display: flex;
    justify-content: flex-end;
}

/* === FORM GRID === */
.em-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.em-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.em-form-group label {
    font-size: 14px;
    font-weight: 500;
    color: var(--em-text-primary);
}
.em-form-group .form-control,
.em-form-group .form-select {
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-btn);
    font-size: 14px;
    padding: 10px 14px;
    transition: border-color var(--em-transition);
}
.em-form-group .form-control:focus,
.em-form-group .form-select:focus {
    border-color: var(--em-accent-interactive);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}
.em-form-group--full {
    grid-column: 1 / -1;
}
.em-form-group--half {
    /* default, stays as 1fr */
}
.em-form-hint {
    font-size: 12px;
    color: var(--em-text-tertiary);
    font-weight: 400;
}

/* === CHECKBOX === */
.em-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: var(--em-text-secondary);
    cursor: pointer;
}
.em-checkbox input[type="checkbox"] {
    margin-top: 3px;
    accent-color: var(--em-accent-interactive);
}

/* === EMPTY STATE === */
.em-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--em-text-tertiary);
    font-size: 15px;
}

/* === BUTTON VARIANTS === */
.em-btn--lg {
    padding: 14px 32px;
    font-size: 16px;
}
.em-btn--sm {
    padding: 6px 16px;
    font-size: 13px;
}
.em-btn--outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: transparent;
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-btn);
    color: var(--em-text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--em-transition);
}
.em-btn--outline:hover {
    border-color: var(--em-accent-interactive);
    color: var(--em-accent-interactive);
}


/* ========================================
   AUTH PAGE (login.php)
   ======================================== */
.em-auth {
    background: var(--em-bg-neutral);
    padding: 40px 0;
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
}
.em-auth__layout {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 48px;
    align-items: center;
}
.em-auth__form-side {
    display: flex;
    justify-content: center;
}
.em-auth__form-card {
    width: 100%;
    max-width: 460px;
}
.em-auth__header {
    margin-bottom: 32px;
}
.em-auth__title {
    font-size: 32px;
    font-weight: 600;
    color: var(--em-accent-interactive);
    margin: 0 0 12px;
}
.em-auth__desc {
    font-size: 15px;
    color: var(--em-text-secondary);
    line-height: 1.6;
    margin: 0;
}
.em-auth__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.em-auth__footer {
    text-align: center;
    margin-top: 24px;
    font-size: 14px;
    color: var(--em-text-secondary);
}
.em-auth__footer a {
    color: var(--em-accent-interactive);
    font-weight: 600;
    text-decoration: underline;
}
.em-auth__visual-side {
    display: flex;
    align-items: center;
    justify-content: center;
}
.em-auth__visual {
    background: var(--em-bg-surface);
    border-radius: var(--em-radius-card-lg);
    padding: 60px 40px;
    text-align: center;
    width: 100%;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.em-auth__visual-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--em-text-primary);
    margin: 0 0 32px;
    line-height: 1.4;
}
.em-auth__visual-img {
    max-width: 100%;
    height: auto;
}


/* ========================================
   ABOUT PAGE
   ======================================== */
.em-stats {
    padding: 48px 0;
    background: var(--em-bg-light);
}
.em-stats__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    background: var(--em-bg-surface);
    padding: 40px;
    border-radius: var(--em-radius-card-lg);
}
.em-stats__number {
    font-size: 40px;
    font-weight: 700;
    color: var(--em-accent-interactive);
    line-height: 1;
}
.em-stats__label {
    font-size: 15px;
    font-weight: 500;
    color: var(--em-text-secondary);
    margin-top: 8px;
}
.em-about {
    padding: 60px 0 80px;
    background: var(--em-bg-light);
}
.em-about__header {
    text-align: center;
    margin-bottom: 48px;
}
.em-about__badge {
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    color: var(--em-accent-interactive);
    margin-bottom: 8px;
}
.em-about__title {
    font-size: 32px;
    font-weight: 600;
    color: var(--em-text-primary);
    margin: 0 0 12px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.em-about__subtitle {
    font-size: 16px;
    color: var(--em-text-secondary);
    margin: 0;
}
.em-about__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}
.em-about__text p {
    font-size: 15px;
    line-height: 26px;
    color: var(--em-text-secondary);
    margin: 0 0 16px;
}
.em-about__dropcap {
    float: left;
    font-size: 56px;
    font-weight: 700;
    color: var(--em-accent-interactive);
    line-height: 1;
    margin-right: 8px;
    margin-top: 4px;
}
.em-about__quote {
    font-size: 22px;
    font-style: italic;
    color: var(--em-text-primary);
    border-left: 4px solid var(--em-accent-interactive);
    padding-left: 20px;
    margin: 24px 0;
    line-height: 1.5;
}
.em-about__images-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.em-about__img-wrap {
    border-radius: var(--em-radius-card-sm);
    overflow: hidden;
}
.em-about__img-wrap img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}


/* ========================================
   FAVORITES PAGE
   ======================================== */
.em-favorites {
    padding: 40px 0 80px;
    background: var(--em-bg-neutral);
}
.em-favorites__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
}
.em-listing-card__link--vertical {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none !important;
}
.em-listing-card__link--vertical .em-listing-card__image {
    height: 200px;
}


/* ========================================
   CONTACT PAGE
   ======================================== */
.em-contact-info {
    color: rgba(255, 255, 255, 0.9);
}
.em-contact-info__title {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 12px;
}
.em-contact-info__address {
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 16px;
}
.em-contact-info__links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.em-contact-info__link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}
.em-contact-info__link i {
    width: 16px;
    text-align: center;
}
.em-contact-info__socials {
    display: flex;
    gap: 12px;
}
.em-contact-info__socials a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    transition: background var(--em-transition);
}
.em-contact-info__socials a:hover {
    background: rgba(255, 255, 255, 0.3);
}
.em-contact-form-section {
    padding: 60px 0 80px;
    background: var(--em-bg-neutral);
}
.em-contact-form-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    background: var(--em-bg-light);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-card-lg);
    padding: 40px;
}
.em-contact-form__heading {
    font-size: 22px;
    font-weight: 600;
    color: var(--em-accent-interactive);
    margin: 0 0 24px;
}


/* ========================================
   COMPARE PAGE
   ======================================== */
.em-compare {
    padding: 40px 0 80px;
    background: var(--em-bg-neutral);
}
.em-compare__header {
    display: flex;
    background: var(--em-bg-light);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-card-lg) var(--em-radius-card-lg) 0 0;
    overflow: hidden;
}
.em-compare__label-col {
    width: 200px;
    flex-shrink: 0;
}
.em-compare__schools {
    display: flex;
    flex: 1;
}
.em-compare__school {
    flex: 1;
    min-width: 0;
    padding: 20px;
    border-left: 1px solid var(--em-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
}
.em-compare__fav {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: 1px solid var(--em-border);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--em-text-tertiary);
    transition: all var(--em-transition);
}
.em-compare__fav:hover {
    border-color: var(--em-accent-interactive);
    color: var(--em-accent-interactive);
}
.em-compare__school-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}
.em-compare__school-img {
    border-radius: var(--em-radius-card-sm);
    object-fit: cover;
    transition: opacity 0.4s ease;
    opacity: 0;
}
.em-compare__school-img.em-img-loaded {
    opacity: 1;
}
.em-compare__school-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--em-text-primary);
    text-align: center;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.em-compare__school-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--em-accent-interactive);
    font-weight: 600;
}
.em-compare__stars {
    display: flex;
    gap: 2px;
}
.em-compare__stars .fa-star-icon {
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23f59e0b' viewBox='0 0 16 16'%3e%3cpath d='M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z'/%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}
.em-compare__stars .fa-star-icon.none {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e5e7eb' viewBox='0 0 16 16'%3e%3cpath d='M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z'/%3e%3c/svg%3e");
}
.em-compare__body {
    background: var(--em-bg-light);
    border: 1px solid var(--em-border);
    border-top: none;
    border-radius: 0 0 var(--em-radius-card-lg) var(--em-radius-card-lg);
    overflow: hidden;
}
.em-compare__section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--em-text-primary);
    padding: 12px 16px;
    background: var(--em-bg-surface);
    border-bottom: 1px solid var(--em-border);
}
.em-compare__section-title i {
    font-size: 11px;
    margin-right: 4px;
}
.em-compare__table {
    width: 100%;
    border-collapse: collapse;
}
.em-compare__table tr:nth-child(even) {
    background: var(--em-bg-surface);
}
.em-compare__table td {
    padding: 12px 16px;
    border-right: 1px solid var(--em-border);
}
.em-compare__table td:last-child {
    border-right: none;
}
.em-compare__prop-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--em-text-secondary);
    width: 200px;
    white-space: nowrap;
}
.em-compare__prop-value {
    text-align: center;
    font-size: 22px;
    color: var(--em-accent-interactive);
}


/* ========================================
   PRICING PAGE
   ======================================== */

/* --- Pricing Hero --- */
.em-pricing-hero {
    background: var(--em-accent-interactive);
    color: #fff;
    padding: 72px 0 80px;
    text-align: center;
}
.em-pricing-hero__title {
    font-size: 42px;
    font-weight: 700;
    margin: 16px 0 16px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.em-pricing-hero__desc {
    font-size: 17px;
    opacity: 0.88;
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.7;
}
.em-pricing-hero__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    margin-top: 32px;
    flex-wrap: wrap;
}
.em-pricing-hero__trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    opacity: 0.92;
}

/* --- Pricing Cards --- */
.em-pricing-cards {
    padding: 60px 0;
    background: var(--em-bg-neutral);
}
.em-pricing-cards__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}
.em-pricing-card {
    background: var(--em-bg-light);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-card-lg);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.em-pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}
.em-pricing-card--popular {
    border-color: var(--em-accent-interactive);
    border-width: 2px;
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.12);
}
.em-pricing-card--popular:hover {
    box-shadow: 0 16px 48px rgba(16, 185, 129, 0.18);
}
.em-pricing-card__ribbon {
    position: absolute;
    top: 16px;
    right: -32px;
    background: var(--em-accent-interactive);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 40px;
    transform: rotate(45deg);
    z-index: 2;
}
.em-pricing-card__header {
    padding: 32px 28px 24px;
    text-align: center;
    border-bottom: 1px solid var(--em-border);
}
.em-pricing-card__name {
    font-size: 20px;
    font-weight: 700;
    color: var(--em-text-primary);
    margin: 0 0 6px;
}
.em-pricing-card--popular .em-pricing-card__name {
    color: var(--em-accent-interactive);
}
.em-pricing-card__tagline {
    font-size: 13px;
    color: var(--em-text-tertiary);
    margin: 0 0 16px;
    font-weight: 400;
}
.em-pricing-card__price {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    margin-bottom: 4px;
}
.em-pricing-card__currency {
    font-size: 20px;
    font-weight: 600;
    color: var(--em-text-primary);
    margin-top: 8px;
}
.em-pricing-card__amount {
    font-size: 52px;
    font-weight: 800;
    color: var(--em-text-primary);
    line-height: 1;
}
.em-pricing-card__amount--free {
    font-size: 36px;
    color: var(--em-accent-interactive);
}
.em-pricing-card__period {
    font-size: 15px;
    font-weight: 500;
    color: var(--em-text-tertiary);
    align-self: flex-end;
    margin-bottom: 8px;
}
.em-pricing-card__billing {
    font-size: 13px;
    color: var(--em-text-tertiary);
    margin: 8px 0 0;
}

/* --- Pricing Card Body --- */
.em-pricing-card__body {
    padding: 24px 28px;
    flex: 1;
}
.em-pricing-card__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.em-pricing-card__features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--em-text-secondary);
}
.em-pricing-card__features li.em-feature--active {
    color: var(--em-text-primary);
}
.em-pricing-card__features li.em-feature--inactive {
    color: var(--em-text-tertiary);
    opacity: 0.6;
}
.em-pricing-card__features li.em-feature--inactive span:last-child {
    text-decoration: line-through;
}

/* Feature Icons */
.em-feature-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.em-feature-icon--yes {
    background: rgba(16, 185, 129, 0.12);
    color: var(--em-accent-interactive);
}
.em-feature-icon--no {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
}
.em-feature-badge {
    display: inline-block;
    padding: 1px 8px;
    background: rgba(16, 185, 129, 0.1);
    color: var(--em-accent-interactive);
    border-radius: var(--em-radius-btn);
    font-size: 13px;
    font-weight: 700;
}

/* --- Pricing Card Footer --- */
.em-pricing-card__footer {
    padding: 0 28px 28px;
}
.em-pricing-card__footer .w-100 {
    width: 100%;
    justify-content: center;
}

/* --- Button Variants for Pricing --- */
.em-btn--outline-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: transparent;
    border: 2px solid var(--em-accent-interactive);
    border-radius: var(--em-radius-btn);
    color: var(--em-accent-interactive);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--em-transition);
    text-decoration: none;
}
.em-btn--outline-primary:hover {
    background: var(--em-accent-interactive);
    color: #fff;
}
.em-btn--cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    background: #fff;
    color: var(--em-accent-interactive);
    border: none;
    border-radius: var(--em-radius-btn);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--em-transition);
    text-decoration: none;
}
.em-btn--cta:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.em-pricing-cards__note {
    text-align: center;
    margin-top: 32px;
    font-size: 15px;
    color: var(--em-text-secondary);
}
.em-pricing-cards__note a {
    color: var(--em-accent-interactive);
    font-weight: 600;
    text-decoration: underline;
}
.em-pricing-cards__note strong {
    color: var(--em-text-primary);
    font-weight: 600;
}

/* --- Pricing Comparison Table --- */
.em-pricing-compare {
    padding: 60px 0;
    background: var(--em-bg-light);
}
.em-pricing-compare__header {
    text-align: center;
    margin-bottom: 40px;
}
.em-pricing-compare__title {
    font-size: 28px;
    font-weight: 700;
    color: var(--em-text-primary);
    margin: 0 0 10px;
}
.em-pricing-compare__desc {
    font-size: 15px;
    color: var(--em-text-secondary);
    margin: 0;
}
.em-pricing-compare__table-wrap {
    background: var(--em-bg-light);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-card-lg);
    overflow-x: auto;
}
.em-pricing-compare__table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}
.em-pricing-compare__table thead th {
    padding: 20px 24px;
    font-size: 15px;
    font-weight: 700;
    color: var(--em-text-primary);
    border-bottom: 2px solid var(--em-border);
    text-align: center;
    background: var(--em-bg-surface);
}
.em-pricing-compare__feature-col {
    text-align: left !important;
    width: 220px;
    min-width: 180px;
}
.em-pricing-compare__plan-col--popular {
    color: var(--em-accent-interactive) !important;
    background: rgba(16, 185, 129, 0.04) !important;
}
.em-pricing-compare__table tbody tr {
    border-bottom: 1px solid var(--em-border);
}
.em-pricing-compare__table tbody tr:last-child {
    border-bottom: none;
}
.em-pricing-compare__table tbody tr:hover {
    background: var(--em-bg-surface);
}
.em-pricing-compare__feature-name {
    padding: 16px 24px;
    font-size: 14px;
    font-weight: 600;
    color: var(--em-text-primary);
    white-space: nowrap;
}
.em-pricing-compare__feature-val {
    padding: 16px 24px;
    text-align: center;
    font-size: 14px;
    color: var(--em-text-secondary);
}
.em-pricing-compare__feature-val--popular {
    background: rgba(16, 185, 129, 0.02);
}
.em-val-check {
    color: var(--em-accent-interactive);
    display: inline-flex;
}
.em-val-cross {
    color: #d1d5db;
    display: inline-flex;
}
.em-val-text {
    font-weight: 600;
    color: var(--em-text-primary);
    display: inline-block;
    padding: 2px 10px;
    background: rgba(16, 185, 129, 0.08);
    border-radius: var(--em-radius-btn);
    font-size: 13px;
}
.em-val-empty {
    color: var(--em-text-tertiary);
}

/* --- Why Edumaps Section --- */
.em-why-section {
    padding: 72px 0;
    background: var(--em-bg-light);
}
.em-why-section__header {
    text-align: center;
    margin-bottom: 48px;
}
.em-why-section__title {
    font-size: 32px;
    font-weight: 700;
    color: var(--em-text-primary);
    margin: 0 0 12px;
}
.em-why-section__desc {
    font-size: 16px;
    color: var(--em-text-secondary);
    margin: 0;
}
.em-why-section__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.em-why-card {
    background: var(--em-bg-light);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-card-lg);
    padding: 32px 24px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.em-why-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--em-shadow-light);
}
.em-why-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--em-accent-interactive);
}
.em-why-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--em-text-primary);
    margin: 0 0 10px;
}
.em-why-card p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--em-text-secondary);
    margin: 0;
}

/* --- How It Works Section --- */
.em-how-section {
    padding: 72px 0;
    background: var(--em-bg-neutral);
}
.em-how-section__header {
    text-align: center;
    margin-bottom: 48px;
}
.em-how-section__title {
    font-size: 32px;
    font-weight: 700;
    color: var(--em-text-primary);
    margin: 0;
}
.em-how-section__steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}
.em-how-step {
    flex: 1;
    text-align: center;
    padding: 32px 20px;
    background: var(--em-bg-light);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-card-lg);
}
.em-how-step__num {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--em-accent-interactive);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.em-how-step h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--em-text-primary);
    margin: 0 0 8px;
}
.em-how-step p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--em-text-secondary);
    margin: 0;
}
.em-how-step__arrow {
    flex-shrink: 0;
    color: var(--em-text-tertiary);
}

/* --- Pricing CTA --- */
.em-pricing-cta {
    padding: 72px 0;
    background: var(--em-accent-interactive);
    color: #fff;
    text-align: center;
}
.em-pricing-cta__content h2 {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 12px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.em-pricing-cta__content p {
    font-size: 17px;
    opacity: 0.88;
    margin: 0 0 32px;
}
.em-pricing-cta__content .em-btn--cta {
    font-size: 17px;
}


/* ========================================
   FAQ
   ======================================== */
.em-faq {
    padding: 60px 0 80px;
    background: var(--em-bg-light);
}
.em-faq__header {
    text-align: center;
    margin-bottom: 40px;
}
.em-faq__badge {
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    color: var(--em-accent-interactive);
    margin-bottom: 8px;
}
.em-faq__title {
    font-size: 32px;
    font-weight: 600;
    color: var(--em-text-primary);
    margin: 0 0 12px;
}
.em-faq__desc {
    font-size: 15px;
    color: var(--em-text-secondary);
    margin: 0;
}
.em-faq__list {
    max-width: 800px;
    margin: 0 auto;
}
.em-faq__item {
    background: var(--em-bg-light);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-card-sm);
    margin-bottom: 12px;
    overflow: hidden;
}
.em-faq__question {
    width: 100%;
    background: none;
    border: none;
    padding: 20px 24px;
    font-size: 16px;
    font-weight: 600;
    color: var(--em-text-primary);
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.em-faq__question svg {
    flex-shrink: 0;
    transition: transform var(--em-transition);
    color: var(--em-text-tertiary);
}
.em-faq__question:not(.collapsed) svg {
    transform: rotate(180deg);
}
.em-faq__answer {
    padding: 0 24px 20px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--em-text-secondary);
}
.em-faq__answer a {
    color: var(--em-accent-interactive);
    font-weight: 500;
}


/* ========================================
   ADD LISTING PAGE
   ======================================== */
.em-addlisting {
    padding: 48px 0 80px;
    background: var(--em-bg-neutral);
}
.em-addlisting__header {
    text-align: center;
    margin-bottom: 32px;
}
.em-addlisting__title {
    font-size: 32px;
    font-weight: 600;
    color: var(--em-text-primary);
    margin: 8px 0 0;
}
.em-addlisting__content {
    max-width: 900px;
    margin: 0 auto;
}
.em-addlisting__packet-info {
    text-align: center;
    padding: 16px 24px;
    background: var(--em-bg-surface);
    border-radius: var(--em-radius-btn);
    font-size: 16px;
    font-weight: 500;
    color: var(--em-text-primary);
    margin-bottom: 24px;
}
.em-addlisting__packet-badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--em-accent-interactive);
    color: #fff;
    border-radius: var(--em-radius-btn);
    font-weight: 600;
}
.em-addlisting__step {
    background: var(--em-bg-light);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-card-lg);
    padding: 32px;
    margin-bottom: 20px;
}
.em-addlisting__step-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--em-border);
}
.em-addlisting__step-num {
    font-size: 24px;
    font-weight: 700;
    color: var(--em-accent-interactive);
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
}
.em-addlisting__step-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--em-text-primary);
    margin: 0 0 4px;
}
.em-addlisting__step-desc {
    font-size: 14px;
    color: var(--em-text-secondary);
    margin: 0;
}
.em-addlisting__divider {
    border: none;
    border-top: 1px solid var(--em-border);
    margin: 24px 0;
}
.em-addlisting__upload-area {
    background: var(--em-bg-surface);
    border-radius: var(--em-radius-btn);
    padding: 20px;
    margin-bottom: 16px;
}
.em-addlisting__upload-area label {
    font-size: 14px;
    font-weight: 500;
    color: var(--em-text-primary);
    margin-bottom: 8px;
    display: block;
}
.em-addlisting__upload-hint {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--em-text-tertiary);
}
.em-addlisting__gallery-preview {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
    max-height: 180px;
    overflow-y: auto;
}
.em-addlisting__gallery-item {
    position: relative;
    width: 120px;
}
.em-addlisting__gallery-item img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: var(--em-radius-btn);
}
.em-addlisting__gallery-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.9);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.em-addlisting__gallery-name {
    display: block;
    font-size: 11px;
    text-align: center;
    margin-top: 4px;
    color: var(--em-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.em-addlisting__docs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.em-addlisting__doc-box {
    background: var(--em-bg-surface);
    border-radius: var(--em-radius-btn);
    padding: 20px;
}
.em-addlisting__doc-box h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--em-text-primary);
    margin: 0 0 10px;
}
.em-addlisting__doc-box--wide {
    grid-column: 1 / -1;
}
.em-addlisting__doc-preview {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    justify-content: center;
}
.em-addlisting__amenities label {
    font-size: 15px;
    font-weight: 500;
    color: var(--em-text-primary);
    margin-bottom: 12px;
    display: block;
}
.em-addlisting__amenity-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}
.em-addlisting__pricing-table {
    margin-bottom: 16px;
}
.em-addlisting__pricing-header {
    display: grid;
    grid-template-columns: 1fr 1fr 120px 40px;
    gap: 12px;
    padding: 12px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--em-text-secondary);
    border-bottom: 1px solid var(--em-border);
}
.em-addlisting__pricing-row {
    display: grid;
    grid-template-columns: 1fr 1fr 120px 40px;
    gap: 12px;
    padding: 12px 0;
    align-items: center;
    border-bottom: 1px solid var(--em-border);
}
.em-addlisting__pricing-remove {
    width: 36px;
    height: 36px;
    border: none;
    background: #fee2e2;
    color: #dc2626;
    border-radius: var(--em-radius-btn);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background var(--em-transition);
}
.em-addlisting__pricing-remove:hover {
    background: #fecaca;
}
.em-addlisting__pricing-add {
    text-align: center;
}
.em-addlisting__submit {
    text-align: center;
    margin-top: 32px;
}


/* ========================================
   NAVIGATION (em-nav)
   ======================================== */
.em-nav {
    background: var(--em-bg-light);
    padding: 0;
    z-index: 1030;
    border-bottom: 1px solid var(--em-border);
}
.em-nav > template {
    display: contents;
}
.em-nav .em-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    gap: 16px;
}

/* Transparent nav (homepage) */
.em-nav--transparent {
    position: absolute;
    width: 100%;
    background: transparent;
    border-bottom: none;
    z-index: 1030;
}

.em-nav--transparent .em-nav__logo-dark { display: none; }
.em-nav--transparent .em-nav__logo-white { display: block; }

/* Search page sticky wrapper */
.em-nav-wrap {
    z-index: 1030;
    background: var(--em-bg-light);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* Logo */
.em-nav__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.em-nav__logo img {
    height: 70px;
    width: auto;
}
.em-nav__logo-white { display: none; }
.em-nav__logo-dark { display: block; }

/* Actions container */
.em-nav__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

/* Nav links (icon + text) */
.em-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--em-radius-btn);
    font-size: 14px;
    font-weight: 500;
    color: var(--em-text-secondary);
    text-decoration: none;
    transition: all var(--em-transition);
    white-space: nowrap;
}
.em-nav__link:hover {
    color: var(--em-text-primary);
    background: var(--em-bg-surface);
}
.em-nav__link i {
    font-size: 16px;
}

/* CTA button in nav */
.em-nav__cta {
    padding: 10px 24px !important;
    margin-left: 8px;
    font-size: 14px !important;
}

/* Nav menu links (center — desktop only) */
.em-nav__menu {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1;
    justify-content: center;
}
.em-nav .em-nav__menu li a,
.em-nav__menu li a {
    font-family: var(--em-font-family);
    font-size: 15px;
    font-weight: 500;
    color: #697586 !important;
    padding: 8px 16px;
    border-radius: var(--em-radius-btn);
    transition: all var(--em-transition);
    text-decoration: none;
    white-space: nowrap;
    display: block;
}
.em-nav .em-nav__menu li a:hover,
.em-nav__menu li a:hover {
    color: #121926 !important;
    background: var(--em-bg-surface);
}

/* Mobile duplicate in collapse — hidden on desktop */
.em-nav__menu--mobile {
    display: none;
}

/* Toggle (hamburger) */
.em-nav__toggle {
    display: none;
    padding: 0;
    border: 0;
    background: transparent;
    margin-left: 8px;
}

/* Mobile CTA in collapse */
.em-nav__mobile-cta {
    display: none;
}

/* Nav hamburger icon color override for transparent */
.em-nav--transparent #nav-icon span {
    background: #fff;
}

/* ========================================
   SEARCH BAR (listing page)
   ======================================== */
.em-search-bar {
    background: var(--em-bg-light);
    padding: 16px 0;
    border-bottom: 1px solid var(--em-border);
}
.em-search-bar__row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.em-search-bar__input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}
.em-search-bar__icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--em-text-tertiary);
    pointer-events: none;
}
.em-search-bar__input {
    width: 100%;
    padding: 12px 16px 12px 48px;
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-btn);
    font-family: var(--em-font-family);
    font-size: 15px;
    color: var(--em-text-primary);
    background: var(--em-bg-surface);
    transition: all var(--em-transition);
    outline: none;
}
.em-search-bar__input::placeholder {
    color: var(--em-text-tertiary);
}
.em-search-bar__input:focus {
    border-color: var(--em-accent-interactive);
    background: var(--em-bg-light);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}
.em-search-bar__select-wrap {
    flex-shrink: 0;
    min-width: 160px;
}
.em-search-bar__select-wrap .dropdown__face {
    border: 1px solid var(--em-border);
    background: var(--em-bg-surface);
    border-radius: var(--em-radius-btn);
    padding: 12px 16px;
    min-width: 160px;
}
.em-search-bar__btn {
    padding: 12px 28px !important;
    flex-shrink: 0;
    font-size: 15px !important;
    gap: 8px;
}

/* ========================================
   NAV + SEARCH BAR RESPONSIVE
   ======================================== */
@media (max-width: 991px) {
    .em-nav__link span {
        display: none;
    }
    .em-nav__link {
        padding: 8px 10px;
    }
    .em-nav__cta {
        display: none !important;
    }
    .em-nav__toggle {
        display: block;
    }
    .em-nav__mobile-cta {
        display: block;
        padding: 16px 0;
    }
    /* Hide desktop menu, show mobile menu in collapse */
    .em-nav > template > .em-container > .em-nav__menu,
    .em-nav .em-container > .em-nav__menu {
        display: none !important;
    }
    .em-nav__menu--mobile {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 16px 0 8px;
        list-style: none;
        margin: 0;
    }
    .em-nav__menu--mobile li a {
        padding: 12px 0;
        border-bottom: 1px solid var(--em-border);
        border-radius: 0;
        font-size: 16px;
        display: block;
        color: var(--em-text-secondary);
        text-decoration: none;
        font-family: var(--em-font-family);
        font-weight: 500;
    }
    .em-nav__menu--mobile li:last-child a {
        border-bottom: none;
    }
    .em-search-bar__row {
        flex-wrap: wrap;
    }
    .em-search-bar__input-wrap {
        flex: 1 1 100%;
    }
    .em-search-bar__select-wrap {
        flex: 1;
        min-width: 120px;
    }
    .em-search-bar__btn {
        flex: 0;
    }
}
@media (max-width: 767px) {
    .em-nav .em-container {
        height: 60px;
    }
    .em-nav__logo img {
        height: 34px;
    }
    .em-search-bar__select-wrap .dropdown__face {
        min-width: auto;
        padding: 10px 14px;
    }
    .em-search-bar__input {
        padding: 10px 14px 10px 42px;
        font-size: 14px;
    }
    .em-search-bar__btn span {
        display: none;
    }
}

/* ========================================
   FORM INPUTS (global overrides)
   ======================================== */
.form-control,
.form-select,
.em-input {
    font-family: var(--em-font-family);
    font-size: 15px;
    color: var(--em-text-primary);
    background: var(--em-bg-surface);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-btn);
    padding: 12px 16px;
    transition: all var(--em-transition);
    outline: none;
}
.form-control:focus,
.form-select:focus,
.em-input:focus {
    border-color: var(--em-accent-interactive);
    background: var(--em-bg-light);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
    color: var(--em-text-primary);
}
.form-control::placeholder,
.em-input::placeholder {
    color: var(--em-text-tertiary);
}
textarea.form-control,
textarea.em-input {
    min-height: 100px;
    resize: vertical;
}
.form-label,
.form-group label {
    font-family: var(--em-font-family);
    font-size: 14px;
    font-weight: 500;
    color: var(--em-text-primary);
    margin-bottom: 6px;
}

/* Bootstrap modal overrides */
.modal-content {
    border-radius: var(--em-radius-card-lg);
    border: 1px solid var(--em-border);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.modal-header {
    border-bottom: 1px solid var(--em-border);
    padding: 20px 24px;
}
.modal-header .modal-title {
    font-family: var(--em-font-family);
    font-size: 18px;
    font-weight: 600;
    color: var(--em-text-primary);
}
.modal-body {
    padding: 24px;
}
.modal-footer {
    border-top: 1px solid var(--em-border);
    padding: 16px 24px;
}
.modal-footer .btn-primary {
    background: var(--em-accent-interactive);
    border-color: var(--em-accent-interactive);
    border-radius: var(--em-radius-btn);
    font-family: var(--em-font-family);
    font-weight: 500;
    padding: 10px 24px;
}
.modal-footer .btn-primary:hover {
    background: var(--em-accent-hover);
    border-color: var(--em-accent-hover);
}
.modal-footer .btn-secondary {
    background: var(--em-bg-surface);
    border-color: var(--em-border);
    color: var(--em-text-secondary);
    border-radius: var(--em-radius-btn);
    font-family: var(--em-font-family);
    font-weight: 500;
    padding: 10px 24px;
}
.modal-footer .btn-secondary:hover {
    background: var(--em-border);
    color: var(--em-text-primary);
}

/* ========================================
   RELATED SCHOOLS (em-related)
   ======================================== */
.em-related {
    padding: 48px 0;
    background: var(--em-bg-light);
    border-top: 1px solid var(--em-border);
}
.em-related__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--em-text-primary);
    margin-bottom: 24px;
}
.em-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.em-related__card {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--em-border);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.em-related__card:hover {
    border-color: var(--em-primary);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    color: inherit;
    text-decoration: none;
}
.em-related__img {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}
.em-related__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease;
    opacity: 0;
}
.em-related__img img.em-img-loaded {
    opacity: 1;
}
.em-related__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.em-related__name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--em-text-primary);
    margin: 0 0 6px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.em-related__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--em-text-secondary);
}
.em-related__type {
    background: var(--em-bg-light);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}
.em-related__loc {
    display: flex;
    align-items: center;
    gap: 3px;
}
.em-related__loc svg {
    opacity: 0.5;
}

@media (max-width: 991px) {
    .em-related__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 575px) {
    .em-related {
        padding: 32px 0;
    }
    .em-related__grid {
        grid-template-columns: 1fr;
    }
    .em-related__title {
        font-size: 1.25rem;
        margin-bottom: 16px;
    }
}

/* ========================================
   FOOTER (em-footer)
   ======================================== */
.em-footer {
    background: var(--em-bg-light);
    border-top: 1px solid var(--em-border);
}

/* App Download Banner */
.em-footer__app-banner {
    padding: 0;
}
.em-footer__app-row {
    background: var(--em-accent-interactive);
    border-radius: var(--em-radius-card-lg);
    display: flex;
    align-items: flex-end;
    gap: 40px;
    padding: 0 48px 0 0;
    overflow: hidden;
    margin: 48px 0;
}
.em-footer__app-mockup {
    flex-shrink: 0;
    width: 240px;
    height: auto;
    display: block;
    margin-bottom: -4px;
}
.em-footer__app-content {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 40px 0;
    flex: 1;
}
.em-footer__app-text h4 {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 8px;
}
.em-footer__app-text p {
    font-size: 15px;
    color: rgba(255,255,255,0.85);
    margin: 0;
    max-width: 340px;
}
.em-footer__app-buttons {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}
.em-footer__store-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: rgba(0,0,0,0.2);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--em-radius-btn);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--em-transition);
}
.em-footer__store-btn:hover {
    background: rgba(0,0,0,0.35);
    color: #fff;
}
.em-footer__store-btn i {
    font-size: 22px;
}

/* Footer Main (3 columns) */
.em-footer__main {
    padding: 48px 0;
    border-bottom: 1px solid var(--em-border);
}
.em-footer__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 48px;
}
.em-footer__heading {
    font-size: 16px;
    font-weight: 600;
    color: var(--em-text-primary);
    margin: 0 0 16px;
}
.em-footer__desc {
    font-size: 14px;
    line-height: 22px;
    color: var(--em-text-secondary);
    margin: 0 0 20px;
}

/* Newsletter */
.em-footer__newsletter {
    position: relative;
    max-width: 300px;
}
.em-footer__newsletter-input {
    width: 100%;
    padding: 12px 52px 12px 16px;
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-btn);
    font-family: var(--em-font-family);
    font-size: 14px;
    color: var(--em-text-primary);
    background: var(--em-bg-surface);
    outline: none;
    transition: all var(--em-transition);
}
.em-footer__newsletter-input::placeholder {
    color: var(--em-text-tertiary);
}
.em-footer__newsletter-input:focus {
    border-color: var(--em-accent-interactive);
    background: var(--em-bg-light);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}
.em-footer__newsletter-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--em-accent-interactive);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--em-transition);
}
.em-footer__newsletter-btn:hover {
    background: var(--em-accent-hover);
}

/* Contact Link */
.em-footer__contact-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--em-text-secondary);
    text-decoration: none;
    font-size: 15px;
    transition: color var(--em-transition);
}
.em-footer__contact-link:hover {
    color: var(--em-accent-interactive);
}
.em-footer__contact-link i {
    font-size: 18px;
    color: var(--em-accent-interactive);
}

/* Social Icons */
.em-footer__socials {
    display: flex;
    gap: 10px;
}
.em-footer__social-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    transition: all var(--em-transition);
}
.em-footer__social-icon--instagram { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.em-footer__social-icon--twitter { background: #1da1f2; }
.em-footer__social-icon--facebook { background: #1877f2; }
.em-footer__social-icon--youtube { background: #ff0000; }
.em-footer__social-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Footer Categories */
.em-footer__categories {
    padding: 32px 0;
    border-top: 1px solid var(--em-border);
}
.em-footer__cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.em-footer__cat-heading {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--em-text-primary);
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.em-footer__cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}
.em-footer__cat-list li a {
    font-size: 0.85rem;
    color: var(--em-text-secondary);
    text-decoration: none;
    transition: color 0.15s;
}
.em-footer__cat-list li a:hover {
    color: var(--em-primary);
}

/* Footer Bottom */
.em-footer__bottom {
    padding: 24px 0;
}
.em-footer__bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.em-footer__brand {
    display: flex;
    align-items: center;
    gap: 16px;
}
.em-footer__logo img {
    height: 30px;
    width: auto;
}
.em-footer__copy {
    font-size: 13px;
    color: var(--em-text-tertiary);
}
.em-footer__nav {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.em-footer__nav a {
    font-size: 14px;
    color: var(--em-text-secondary);
    text-decoration: none;
    transition: color var(--em-transition);
}
.em-footer__nav a:hover {
    color: var(--em-accent-interactive);
}

/* Footer Responsive */
@media (max-width: 991px) {
    .em-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .em-footer__cat-grid { grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
    .em-footer__app-content { flex-direction: column; gap: 24px; align-items: flex-start; }
    .em-footer__app-row { padding: 0 32px 0 0; gap: 24px; }
}
@media (max-width: 767px) {
    .em-footer__grid { grid-template-columns: 1fr; gap: 32px; }
    .em-footer__cat-grid { grid-template-columns: 1fr; gap: 20px; }
    .em-footer__app-row {
        flex-direction: column-reverse;
        align-items: center;
        padding: 32px 24px 0;
        text-align: center;
    }
    .em-footer__app-mockup { width: 180px; }
    .em-footer__app-content { align-items: center; padding: 0; }
    .em-footer__app-text p { max-width: none; }
    .em-footer__app-buttons { justify-content: center; }
    .em-footer__bottom-row {
        flex-direction: column;
        text-align: center;
    }
    .em-footer__brand { flex-direction: column; }
    .em-footer__nav { justify-content: center; }
}

/* ========================================
   SHARED RESPONSIVE (all new pages)
   ======================================== */
@media (max-width: 991px) {
    .em-page-hero__title { font-size: 28px; }
    .em-page-hero__split { flex-direction: column; gap: 24px; }
    .em-auth__layout { grid-template-columns: 1fr; }
    .em-auth__visual-side { display: none; }
    .em-about__layout { grid-template-columns: 1fr; }
    .em-contact-form-layout { grid-template-columns: 1fr; gap: 32px; }
    .em-compare__label-col { width: 150px; }
    .em-compare__prop-name { width: 150px; font-size: 12px; }
    .em-addlisting__docs-grid { grid-template-columns: 1fr; }
}

@media (max-width: 991px) {
    .em-pricing-cards__grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
    .em-why-section__grid { grid-template-columns: 1fr 1fr; }
    .em-how-section__steps { flex-direction: column; }
    .em-how-step__arrow { transform: rotate(90deg); }
    .em-pricing-compare__feature-col { width: 140px; min-width: 120px; }
}

@media (max-width: 767px) {
    .em-page-hero { padding: 40px 0; }
    .em-page-hero__title { font-size: 22px; }
    .em-page { padding: 24px 0 48px; }
    .em-form-grid { grid-template-columns: 1fr; }
    .em-form-card { padding: 24px 20px; }
    .em-stats__grid { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
    .em-favorites__grid { grid-template-columns: 1fr; }
    .em-compare__header { flex-direction: column; }
    .em-compare__label-col { display: none; }
    .em-compare__prop-name { width: 100px; }
    .em-pricing-hero__title { font-size: 28px; }
    .em-pricing-hero { padding: 48px 0 56px; }
    .em-pricing-hero__trust { gap: 16px; }
    .em-pricing-hero__trust-item { font-size: 13px; }
    .em-pricing-cards { padding: 40px 0; }
    .em-pricing-card__amount { font-size: 40px; }
    .em-pricing-compare { padding: 40px 0; }
    .em-pricing-compare__title { font-size: 22px; }
    .em-pricing-compare__table thead th { padding: 14px 16px; font-size: 13px; }
    .em-pricing-compare__feature-name { padding: 12px 16px; font-size: 13px; }
    .em-pricing-compare__feature-val { padding: 12px 16px; }
    .em-why-section { padding: 48px 0; }
    .em-why-section__grid { grid-template-columns: 1fr; }
    .em-why-section__title { font-size: 24px; }
    .em-how-section { padding: 48px 0; }
    .em-how-section__title { font-size: 24px; }
    .em-pricing-cta { padding: 48px 0; }
    .em-pricing-cta__content h2 { font-size: 24px; }
    .em-addlisting__step { padding: 24px 20px; }
    .em-addlisting__pricing-header,
    .em-addlisting__pricing-row { grid-template-columns: 1fr 1fr 80px 36px; gap: 8px; }
}

/* ============================================
   AI WIZARD - Banner, Promo, Modal, Results
   ============================================ */

/* --- AI Section & Banner --- */
.em-ai-section { padding: 0; margin-top: -20px; margin-bottom: 40px; position: relative; z-index: 2; }
.em-ai-banner {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 50%, #047857 100%);
    border: 1px solid rgba(16,185,129,0.25);
    border-radius: 16px;
    padding: 24px 32px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    overflow: hidden;
}
.em-ai-banner:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(16,185,129,0.2); }
.em-ai-banner__sparkle {
    position: absolute;
    top: -20px; right: -20px;
    width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(224,255,0,0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.em-ai-banner__content { display: flex; align-items: center; gap: 18px; position: relative; z-index: 1; }
.em-ai-banner__icon {
    width: 48px; height: 48px;
    background: rgba(224,255,0,0.15);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: var(--em-accent-cta, #e0ff00);
    flex-shrink: 0;
}
.em-ai-banner__text { flex: 1; }
.em-ai-banner__text h3 { font-size: 17px; font-weight: 700; margin: 0 0 4px; color: #fff; }
.em-ai-banner__text p { font-size: 13px; margin: 0; color: rgba(255,255,255,0.6); }
.em-ai-banner__arrow { color: var(--em-accent-cta, #e0ff00); opacity: 0.7; flex-shrink: 0; transition: transform 0.3s, opacity 0.3s; }
.em-ai-banner:hover .em-ai-banner__arrow { transform: translateX(4px); opacity: 1; }

/* --- Promo Popup (auto-open campaign modal) --- */
.em-ai-promo {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: emAiFadeIn 0.3s ease;
    backdrop-filter: blur(4px);
}
@keyframes emAiFadeIn { from { opacity: 0; } to { opacity: 1; } }
.em-ai-promo__card {
    background: #fff;
    border-radius: 24px;
    padding: 40px 32px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    position: relative;
    animation: emAiPromoSlide 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 24px 80px rgba(0,0,0,0.25);
}
@keyframes emAiPromoSlide {
    from { opacity: 0; transform: translateY(40px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.em-ai-promo__close {
    position: absolute; top: 12px; right: 12px;
    background: none; border: none; cursor: pointer;
    color: #94a3b8; padding: 8px;
    border-radius: 50%;
    transition: background 0.2s, color 0.2s;
}
.em-ai-promo__close:hover { background: #f1f5f9; color: #475569; }
.em-ai-promo__badge {
    display: inline-block;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 16px;
}
.em-ai-promo__icon {
    width: 80px; height: 80px;
    background: linear-gradient(135deg, #10b98120, #05966920);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    color: #10b981;
    animation: emAiPromoPulse 2s ease-in-out infinite;
}
@keyframes emAiPromoPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
.em-ai-promo__title { font-size: 22px; font-weight: 700; color: #1e293b; margin: 0 0 8px; }
.em-ai-promo__desc { font-size: 14px; color: #64748b; line-height: 1.6; margin: 0 0 24px; }
.em-ai-promo__cta {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 16px;
    padding: 14px 24px;
    border-radius: 12px;
}
.em-ai-promo__note { font-size: 12px; color: #94a3b8; margin: 12px 0 0; }

/* --- Wizard Modal --- */
.em-ai-wizard {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: emAiFadeIn 0.3s ease;
    backdrop-filter: blur(4px);
}
.em-ai-wizard__modal {
    background: #fff;
    border-radius: 20px;
    max-width: 580px;
    width: 100%;
    max-height: 90vh;
    overflow-x: hidden;
    overflow-y: auto;
    animation: emAiPromoSlide 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 24px 80px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
}
.em-ai-wizard__header { border-bottom: 1px solid #f1f5f9; flex-shrink: 0; }
.em-ai-wizard__progress { height: 3px; background: #f1f5f9; }
.em-ai-wizard__progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    border-radius: 2px;
    transition: width 0.4s ease;
}
.em-ai-wizard__header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; }
.em-ai-wizard__title {
    font-size: 16px; font-weight: 600; color: #1e293b;
    display: flex; align-items: center; gap: 8px; margin: 0;
}
.em-ai-wizard__title svg { color: #10b981; }
.em-ai-wizard__close {
    background: none; border: none; cursor: pointer;
    color: #94a3b8; padding: 6px;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
}
.em-ai-wizard__close:hover { background: #f1f5f9; color: #475569; }
.em-ai-wizard__body { padding: 24px; flex: 1; overflow-x: hidden; overflow-y: auto; }
.em-ai-wizard__footer {
    border-top: 1px solid #f1f5f9;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

/* --- Steps --- */
.em-ai-step__title { font-size: 18px; font-weight: 700; color: #1e293b; margin: 0 0 6px; }
.em-ai-step__desc { font-size: 14px; color: #64748b; margin: 0 0 24px; }

/* --- Options (type, budget) --- */
.em-ai-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.em-ai-options--list { grid-template-columns: 1fr; }
.em-ai-option {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.em-ai-option:hover { border-color: #10b981; background: #f8fafc; }
.em-ai-option--active { border-color: #10b981; background: #10b98110; }
.em-ai-option--active .em-ai-option__icon { color: #10b981; }
.em-ai-option__icon { color: #94a3b8; margin-bottom: 4px; }
.em-ai-option span { font-size: 14px; font-weight: 600; color: #1e293b; }
.em-ai-option small { font-size: 12px; color: #94a3b8; }
.em-ai-option--wide {
    flex-direction: row;
    justify-content: center;
    padding: 14px 20px;
}

/* --- Location --- */
.em-ai-location__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.em-ai-location__field label { display: block; font-size: 13px; font-weight: 600; color: #475569; margin-bottom: 6px; }
.em-ai-select {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    color: #1e293b;
    background: #fff;
    transition: border-color 0.2s;
    appearance: auto;
}
.em-ai-select:focus { border-color: #10b981; outline: none; }
.em-ai-location__gps {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%;
    padding: 10px;
    border: 2px dashed #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    color: #10b981;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.em-ai-location__gps:hover { border-color: #10b981; background: #10b98108; }

/* --- Features (checkboxes) --- */
.em-ai-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.em-ai-feature {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
}
.em-ai-feature:hover { border-color: #10b981; }
.em-ai-feature--active { border-color: #10b981; background: #10b98110; color: #10b981; font-weight: 600; }
.em-ai-feature--active svg { color: #10b981; }

/* --- Textarea --- */
.em-ai-textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    color: #1e293b;
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
    transition: border-color 0.2s;
}
.em-ai-textarea:focus { border-color: #10b981; outline: none; }

/* --- Loading Animation --- */
.em-ai-loading { text-align: center; padding: 40px 0; }
.em-ai-loading__animation {
    width: 80px; height: 80px;
    margin: 0 auto 24px;
    position: relative;
}
.em-ai-loading__circle {
    width: 80px; height: 80px;
    border: 3px solid #e2e8f0;
    border-top-color: #10b981;
    border-radius: 50%;
    animation: emAiSpin 1s linear infinite;
}
@keyframes emAiSpin { to { transform: rotate(360deg); } }
.em-ai-loading__scan {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    background: linear-gradient(135deg, #10b98140, #05966940);
    border-radius: 50%;
    animation: emAiPulse 1.5s ease-in-out infinite;
}
@keyframes emAiPulse {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}
.em-ai-loading h4 { font-size: 18px; color: #1e293b; margin: 0 0 8px; }
.em-ai-loading p { font-size: 14px; color: #64748b; margin: 0; }

/* --- Error --- */
.em-ai-error { text-align: center; padding: 40px 0; }
.em-ai-error svg { color: #ef4444; margin-bottom: 16px; }
.em-ai-error h4 { font-size: 18px; color: #1e293b; margin: 0 0 8px; }
.em-ai-error p { font-size: 14px; color: #64748b; margin: 0 0 20px; }

/* --- Results --- */
.em-ai-results__fomo {
    display: flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
    animation: emAiFomoGlow 2s ease-in-out infinite;
}
@keyframes emAiFomoGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0.3); }
    50% { box-shadow: 0 0 20px 4px rgba(251,191,36,0.2); }
}
.em-ai-result {
    display: flex;
    gap: 16px;
    padding: 20px;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    margin-bottom: 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.em-ai-result:hover { border-color: #10b981; box-shadow: 0 4px 20px rgba(16,185,129,0.1); }
.em-ai-result__rank {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.em-ai-result__body { flex: 1; min-width: 0; }
.em-ai-result__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.em-ai-result__title { font-size: 16px; font-weight: 700; color: #1e293b; margin: 0; }
.em-ai-result__score { text-align: center; flex-shrink: 0; }
.em-ai-result__score-num {
    display: block;
    font-size: 20px;
    font-weight: 800;
    background: linear-gradient(135deg, #10b981, #059669);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.em-ai-result__score-label { font-size: 11px; color: #94a3b8; text-transform: uppercase; }
.em-ai-result__location {
    display: flex; align-items: center; gap: 4px;
    font-size: 13px; color: #64748b;
    margin-bottom: 8px;
}
.em-ai-result__reason { font-size: 14px; color: #475569; line-height: 1.6; margin: 0 0 10px; }
.em-ai-result__strengths { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.em-ai-result__strength {
    display: inline-block;
    background: #10b98115;
    color: #059669;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
}
.em-ai-result__note {
    display: flex; align-items: flex-start; gap: 6px;
    font-size: 12px;
    color: #f59e0b;
    background: #fffbeb;
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 12px;
}
.em-ai-result__note svg { flex-shrink: 0; margin-top: 1px; }

/* --- Lead Form --- */
.em-ai-lead {
    background: #f8fafc;
    border-radius: 14px;
    padding: 24px;
    margin-top: 20px;
    border: 2px solid #e2e8f0;
}
.em-ai-lead__title { font-size: 16px; font-weight: 700; color: #1e293b; margin: 0 0 4px; }
.em-ai-lead__desc { font-size: 13px; color: #64748b; margin: 0 0 16px; }
.em-ai-lead__form { display: flex; flex-direction: column; gap: 10px; }
.em-ai-input {
    padding: 12px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    color: #1e293b;
    transition: border-color 0.2s;
}
.em-ai-input:focus { border-color: #10b981; outline: none; }
.em-ai-lead__submit { margin-top: 4px; }

/* --- Lead Success --- */
.em-ai-lead-success {
    text-align: center;
    padding: 32px;
    margin-top: 20px;
    background: #f0fdf4;
    border-radius: 14px;
    border: 2px solid #bbf7d0;
}
.em-ai-lead-success svg { margin-bottom: 12px; animation: emAiSuccessScale 0.5s ease; }
@keyframes emAiSuccessScale { from { transform: scale(0); } to { transform: scale(1); } }
.em-ai-lead-success h4 { font-size: 18px; color: #166534; margin: 0 0 6px; }
.em-ai-lead-success p { font-size: 14px; color: #16a34a; margin: 0; }

/* --- Inline AI Banner (listing/detail) --- */
.em-ai-inline {
    background: var(--em-bg-surface, #f3f4f6);
    border: 1px solid var(--em-border, #e3e8ef);
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    margin: 16px 0 20px;
}
.em-ai-inline:hover { border-color: var(--em-accent-interactive, #10b981); background: rgba(16,185,129,0.04); }
.em-ai-inline__icon {
    width: 36px; height: 36px;
    background: rgba(16,185,129,0.1);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--em-accent-interactive, #10b981);
    flex-shrink: 0;
}
.em-ai-inline__text { flex: 1; }
.em-ai-inline__text h4 { font-size: 13px; font-weight: 600; color: var(--em-text-primary, #121926); margin: 0 0 1px; }
.em-ai-inline__text p { font-size: 12px; color: var(--em-text-secondary, #697586); margin: 0; }
.em-ai-inline__arrow { color: var(--em-accent-interactive, #10b981); flex-shrink: 0; opacity: 0.5; transition: opacity 0.2s, transform 0.2s; }
.em-ai-inline:hover .em-ai-inline__arrow { opacity: 1; transform: translateX(2px); }

/* --- Back arrow toggle (desktop: X, mobile: ←) --- */
.em-ai-wizard__close-back { display: none; }

/* --- Mobile Responsive --- */
@media (max-width: 576px) {
    .em-ai-section { margin-bottom: 28px; }
    .em-ai-banner { padding: 18px 20px; border-radius: 14px; }
    .em-ai-banner__icon { width: 42px; height: 42px; }
    .em-ai-banner__icon svg { width: 22px; height: 22px; }
    .em-ai-banner__text h3 { font-size: 15px; }
    .em-ai-banner__text p { font-size: 12px; }

    /* AI Promo — bottom sheet above bottom nav */
    .em-ai-promo__card { padding: 32px 20px; border-radius: 16px; position: fixed; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); left: 12px; right: 12px; max-width: 100%; animation: emAiSlideUp 0.4s ease; }
    @keyframes emAiSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
    .em-ai-promo__title { font-size: 19px; }

    /* AI Wizard — FULL PAGE on mobile */
    .em-ai-wizard {
        padding: 0;
        background: #fff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        align-items: stretch;
        justify-content: stretch;
    }

    .em-ai-wizard__modal {
        border-radius: 0;
        max-height: 100vh;
        max-height: 100dvh;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: 100%;
        box-shadow: none;
        animation: emAiSlideRight 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes emAiSlideRight {
        from { transform: translateX(100%); }
        to { transform: translateX(0); }
    }

    /* Close button: show ← back arrow, hide X */
    .em-ai-wizard__close-x { display: none; }
    .em-ai-wizard__close-back { display: block; }
    .em-ai-wizard__close { order: -1; margin-right: 12px; }

    /* Header compact */
    .em-ai-wizard__header-inner { padding: 12px 16px; }

    /* Body full-height scroll */
    .em-ai-wizard__body {
        padding: 20px 16px;
        padding-bottom: 100px;
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Footer sticky bottom */
    .em-ai-wizard__footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid #f1f5f9;
        z-index: 10;
    }

    /* Grid adjustments */
    .em-ai-options { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .em-ai-option { padding: 12px 8px; }
    .em-ai-option span { font-size: 13px; }

    .em-ai-location__row { grid-template-columns: 1fr; }

    .em-ai-features { grid-template-columns: 1fr 1fr; gap: 6px; }
    .em-ai-feature { padding: 8px 10px; font-size: 12px; }

    .em-ai-result { flex-direction: column; gap: 12px; padding: 16px; }
    .em-ai-result__header { flex-direction: column; gap: 8px; }
    .em-ai-result__score { display: flex; align-items: center; gap: 6px; }
    .em-ai-result__score-num { font-size: 16px; }
}