/**
 * School Wishlists - Buggy Style (LoveForm-inspired layout)
 * Styles for wishlist modal, grid page, and detail page
 */

/* ================================================
   CSS Variables
   ================================================ */
:root {
    --wishlist-primary: #289a96;
    --wishlist-primary-hover: #1f7a77;
    --wishlist-text-dark: #222222;
    --wishlist-text-medium: #717171;
    --wishlist-text-light: #B0B0B0;
    --wishlist-border: #DDDDDD;
    --wishlist-bg-light: #F7F7F7;
    --wishlist-bg-hover: #F0F0F0;
    --wishlist-card-radius: 12px;
    --wishlist-modal-radius: 12px;
}

/* ================================================
   Wishlist Modal (LoveForm Style)
   ================================================ */
.wishlist-modal .modal-dialog {
    max-width: 568px;
    margin: 1.75rem auto;
}

.wishlist-modal .modal-content {
    border: none;
    border-radius: var(--wishlist-modal-radius);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    /* Flexbox layout to keep footer visible at bottom */
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}

.wishlist-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--wishlist-border);
    position: relative;
    /* Prevent header from shrinking in flexbox layout */
    flex-shrink: 0;
}

.wishlist-modal .modal-header .btn-close {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 8px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.wishlist-modal .modal-header .btn-close:hover {
    background: var(--wishlist-bg-light);
}

/* Back button (← arrow) - LoveForm style */
.wishlist-modal .modal-header .wishlist-back-btn {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 8px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    cursor: pointer;
}

.wishlist-modal .modal-header .wishlist-back-btn:hover {
    background: var(--wishlist-bg-light);
}

.wishlist-modal .modal-header .wishlist-back-btn svg {
    color: var(--wishlist-text-dark);
}

.wishlist-modal .modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--wishlist-text-dark);
    margin: 0;
}

.wishlist-modal .modal-body {
    padding: 24px;
    /* Flex-grow to fill space, but scroll when content overflows */
    flex: 1 1 auto;
    overflow-y: auto;
    /* Limit height to keep footer visible - header ~56px, footer ~70px, so body max ~400px */
    max-height: calc(85vh - 130px);
}

/* Create Wishlist Form */
.wishlist-create-form {
    max-width: 100%;
}

.wishlist-input-container {
    position: relative;
    margin-bottom: 8px;
}

.wishlist-name-input {
    width: 100%;
    padding: 24px 16px 8px;
    border: 1px solid var(--wishlist-border);
    border-radius: 8px;
    font-size: 16px;
    color: var(--wishlist-text-dark);
    background: white;
    transition: border-color 0.2s ease;
}

.wishlist-name-input:focus {
    outline: none;
    border-color: var(--wishlist-text-dark);
}

.wishlist-name-input:focus + .wishlist-input-label,
.wishlist-name-input:not(:placeholder-shown) + .wishlist-input-label {
    transform: translateY(-12px);
    font-size: 12px;
}

.wishlist-input-label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--wishlist-text-medium);
    font-size: 16px;
    pointer-events: none;
    transition: all 0.2s ease;
}

.wishlist-char-count {
    text-align: right;
    font-size: 12px;
    color: var(--wishlist-text-medium);
    margin-bottom: 24px;
}

.wishlist-char-count.limit-reached {
    color: var(--wishlist-primary);
}

/* Wishlist Grid in Modal - LoveForm Style 2-Column Layout */
.wishlist-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    /* Remove max-height/scroll - let modal-body handle scrolling */
    padding: 0 4px 4px 0;
}

.wishlist-grid::-webkit-scrollbar {
    width: 6px;
}

.wishlist-grid::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 3px;
}

/* Wishlist Item Card - LoveForm Style (Image on top, text below) */
.wishlist-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.wishlist-item:hover {
    background: var(--wishlist-bg-light);
}

.wishlist-item:active {
    transform: scale(0.98);
}

.wishlist-item.selected {
    background: #F0F0F0;
    outline: 2px solid var(--wishlist-primary, #222);
    outline-offset: -2px;
}

/* Wishlist Cover Image - Square aspect ratio (LoveForm Pattern) */
.wishlist-item-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    object-fit: cover;
    background: var(--wishlist-bg-light);
    transition: transform 0.3s ease;
}

/* Image hover zoom effect (LoveForm Pattern) */
.wishlist-item:hover .wishlist-item-image {
    transform: scale(1.02);
}

.wishlist-item-image-placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wishlist-item-image-placeholder svg {
    width: 32px;
    height: 32px;
    color: #ccc;
}

.wishlist-item-info {
    padding: 0 4px;
}

.wishlist-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--wishlist-text-dark);
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wishlist-item-count {
    font-size: 13px;
    color: var(--wishlist-text-medium);
}

/* Create New Wishlist Button - Full-width BLACK button at BOTTOM (LoveForm Pattern) */
.wishlist-footer-select {
    padding: 16px 24px;
    border-top: 1px solid var(--wishlist-border);
    display: flex;
    justify-content: center;
    /* CRITICAL: Prevent footer from shrinking when content overflows */
    flex-shrink: 0;
}

.wishlist-btn-create-full {
    width: 100%;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    color: white;
    background: #222222;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.wishlist-btn-create-full:hover {
    background: #000000;
    transform: scale(1.01);
}

.wishlist-btn-create-full:active {
    transform: scale(0.99);
}

/* Empty state styling */
.wishlist-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
}

/* LEGACY: Keep old create button styles for backwards compatibility (used in manual render fallback) */
.wishlist-create-new {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s ease;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}

.wishlist-create-new:hover {
    background: var(--wishlist-bg-light);
}

.wishlist-create-new-icon {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    border: 2px dashed var(--wishlist-border, #ddd);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    transition: all 0.2s ease;
}

.wishlist-create-new-icon svg {
    width: 24px;
    height: 24px;
    color: var(--wishlist-text-medium);
}

.wishlist-create-new-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--wishlist-text-dark);
    padding: 0 4px;
}

/* Modal Footer */
.wishlist-modal .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--wishlist-border);
    display: flex;
    justify-content: space-between;
    /* CRITICAL: Prevent footer from shrinking when content overflows */
    flex-shrink: 0;
}

.wishlist-btn-cancel {
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    color: var(--wishlist-text-dark);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: underline;
    transition: background 0.15s ease;
}

.wishlist-btn-cancel:hover {
    background: var(--wishlist-bg-light);
}

.wishlist-btn-create,
.wishlist-btn-save {
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    color: white;
    background: var(--wishlist-text-dark);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.wishlist-btn-create:hover,
.wishlist-btn-save:hover {
    background: #000;
    transform: scale(1.02);
}

.wishlist-btn-create:disabled,
.wishlist-btn-save:disabled {
    background: #ddd;
    color: #b0b0b0;
    cursor: not-allowed;
    transform: none;
}

/* ================================================
   Wishlists Grid Page
   ================================================ */
.wishlists-page {
    padding: 24px 0;
}

.wishlists-header {
    margin-bottom: 32px;
}

.wishlists-title {
    font-size: 32px;
    font-weight: 600;
    color: var(--wishlist-text-dark);
    margin: 0;
}

.wishlists-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 1239px) {
    .wishlists-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 549px) {
    .wishlists-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Wishlist Card */
.wishlist-card {
    cursor: pointer;
    transition: transform 0.15s ease;
}

.wishlist-card:hover {
    transform: translateY(-4px);
}

.wishlist-card-image {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--wishlist-card-radius);
    overflow: hidden;
    margin-bottom: 12px;
    background: var(--wishlist-bg-light);
}

.wishlist-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wishlist-card-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wishlist-card-placeholder svg {
    width: 48px;
    height: 48px;
    color: #a0aec0;
}

/* Recently Viewed Card - Special Style */
.wishlist-card.recently-viewed .wishlist-card-image {
    background: #484848;
}

.wishlist-card.recently-viewed .wishlist-card-placeholder {
    background: #484848;
}

.wishlist-card.recently-viewed .wishlist-card-placeholder svg {
    width: 48px;
    height: 48px;
    color: white;
}

/* Card Actions (3-dot menu) */
.wishlist-card-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
}

.wishlist-card-menu-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.wishlist-card:hover .wishlist-card-menu-btn {
    opacity: 1;
}

.wishlist-card-menu-btn:hover {
    background: #f7f7f7;
}

.wishlist-card-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    overflow: hidden;
    display: none;
}

.wishlist-card-dropdown.show {
    display: block;
}

.wishlist-card-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    font-size: 14px;
    color: var(--wishlist-text-dark);
    cursor: pointer;
    transition: background 0.15s ease;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}

.wishlist-card-dropdown-item:hover {
    background: var(--wishlist-bg-light);
}

.wishlist-card-dropdown-item.danger {
    color: var(--wishlist-primary);
}

.wishlist-card-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--wishlist-text-dark);
    margin: 0 0 4px;
}

.wishlist-card-count {
    font-size: 14px;
    color: var(--wishlist-text-medium);
}

/* ================================================
   Wishlist Detail Page - Full-Height LoveForm Layout
   ================================================ */
.wishlist-detail-page {
    padding: 0; /* Remove padding for full-height */
}

/* Desktop only: Body flex layout to eliminate outer scroll (min-width: 992px) */
@media (min-width: 992px) {
    body#wishlist-detail-page {
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: hidden; /* Prevent body scroll */
        margin: 0; /* Remove default margin */
    }

    body#wishlist-detail-page > main {
        flex: 1; /* Fill remaining space after nav */
        min-height: 0; /* Allow shrinking */
        overflow: hidden; /* Scroll happens inside */
    }
}

/* Full-height layout mode - FLEX APPROACH (no fragile calc) */
.wishlist-detail-page.wishlist-fullheight-layout {
    height: 100%; /* Fill parent (main) */
    overflow: hidden; /* Prevent outer scroll */
    display: flex;
    flex-direction: column;
    min-height: 0; /* Allow flex shrinking */
}

/* Full-height split content */
.wishlist-fullheight-content {
    flex: 1; /* Fill available space */
    height: 100%;
    min-height: 0; /* Critical for nested flex */
}

/* Column Header (inside cards column) - contains back, title, share chip, 3-dot menu */
.wishlist-column-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 20px 16px 20px;
    border-bottom: 1px solid var(--wishlist-border);
    margin-bottom: 16px;
}

.wishlist-column-title-section {
    flex: 1;
    min-width: 0;
}

.wishlist-column-title-section .wishlist-detail-title {
    font-size: 24px;
    margin-bottom: 8px;
}

.wishlist-column-title-section .wishlist-filter-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* School count styling in new layout */
.wishlist-school-count {
    padding: 0 20px;
    font-size: 14px;
}

.wishlist-back-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
    color: var(--wishlist-text-dark);
    text-decoration: none;
}

.wishlist-back-btn:hover {
    background: var(--wishlist-bg-light);
}

.wishlist-detail-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--wishlist-text-dark);
    margin: 0;
    flex: 1;
}

/* Legacy: Keep for backwards compatibility */
.wishlist-detail-header {
    display: none; /* Hidden in new full-height layout */
}

.wishlist-detail-actions {
    display: flex;
    gap: 12px;
}

.wishlist-action-btn {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--wishlist-text-dark);
    background: white;
    border: 1px solid var(--wishlist-text-dark);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s ease;
}

.wishlist-action-btn:hover {
    background: var(--wishlist-bg-light);
}

/* Split View Layout - LoveForm Style (40% cards, 60% map) */
.wishlist-detail-content {
    display: flex;
    gap: 0; /* No gap - map touches cards column edge */
    min-height: calc(100vh - 200px);
}

/* Full-height content override - AIRBNB PATTERN: Row scrolls, scrollbar on right */
.wishlist-fullheight-content.wishlist-detail-content {
    min-height: 0; /* CRITICAL: Allow flex shrinking */
    height: 100%;
    overflow-y: auto; /* Scrollbar appears on right edge */
    overflow-x: hidden;
}

/* Schools list column - Bootstrap handles width via col-lg-5 */
.wishlist-schools-list {
    overflow: visible; /* NO scroll here - parent row scrolls */
    display: flex;
    flex-direction: column;
    height: auto; /* Let content determine height */
    min-height: 0; /* CRITICAL: Allow flex shrinking for inner scroll */
    position: relative; /* Establish containing block for positioned children */
    padding: 0; /* Remove padding - applied to children instead */
}

/* Fixed header elements (don't scroll with content) */

/* Back Arrow Row (LoveForm pattern - above title) */
.wishlist-back-row {
    position: sticky;
    top: 0;
    background: white;
    z-index: 21;
    padding: 12px 20px 8px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Compact title - hidden by default, shows when scrolled (LoveForm pattern) */
.wishlist-compact-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 50px);
}

/* Show compact title when scrolled */
.wishlist-back-row.scrolled .wishlist-compact-title {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.wishlist-column-header {
    position: sticky;
    top: 40px; /* After back arrow row */
    background: white;
    z-index: 20;
    padding: 8px 20px 12px 20px;
}

.wishlist-school-count {
    position: sticky;
    top: 96px; /* After back row + header (40px + 56px) */
    background: white;
    z-index: 25; /* CRITICAL: Must be higher than filter chips to prevent overlap */
    padding: 0 20px;
    padding-bottom: 12px; /* Extend background coverage to fully clear filter chips */
    margin-bottom: 12px !important;
}

.wishlist-filter-chips {
    position: sticky;
    top: 128px; /* After back row + header + count */
    background: white;
    z-index: 18;
    padding: 0 20px 12px 20px;
}

.wishlist-reset-container {
    position: sticky;
    top: 180px; /* After all above */
    background: white;
    z-index: 17;
    padding: 0 20px 12px 20px;
}

/* Scrollable content (buckets) */
.wishlist-bucket {
    padding: 0 20px; /* Content padding */
}

/* Cards grid wrapper - NO scroll, expands naturally */
.wishlist-schools-list .wishlist-cards-grid {
    /* CRITICAL: No overflow on grids - parent scrolls instead */
    overflow: visible !important;
    /* FIX: Ensure grid doesn't overflow container */
    box-sizing: border-box;
    width: 100%;
    max-width: 100%; /* Constrain to parent width */
}

/*
 * LoveForm-Style Split View Ratios (Measured from actual LoveForm screenshots)
 * =========================================================================
 * LoveForm uses DIFFERENT ratios at different viewport sizes:
 * - At 1280px: ~58% listings / ~42% map
 * - At 1440px+: ~55% listings / ~45% map (more balanced at larger screens)
 *
 * We override Bootstrap's col-lg-5/col-lg-7 (42%/58%) to match LoveForm.
 */

/* Desktop (992px-1439px): 63% cards / 37% map */
@media (min-width: 992px) {
    .wishlist-schools-list {
        flex: 0 0 63% !important;
        max-width: 63% !important;
        width: 63% !important;
    }
    .wishlist-map-column {
        flex: 0 0 37% !important;
        max-width: 37% !important;
        width: 37% !important;
    }
}

/* Large Desktop (1440px+): 59% cards / 41% map */
@media (min-width: 1440px) {
    .wishlist-schools-list {
        flex: 0 0 59% !important;
        max-width: 59% !important;
        width: 59% !important;
    }
    .wishlist-map-column {
        flex: 0 0 41% !important;
        max-width: 41% !important;
        width: 41% !important;
    }
}

/* Map column wrapper */
.wishlist-map-column {
    overflow: hidden;
    height: 100%; /* Fill parent height, not viewport */
    position: sticky; /* AIRBNB PATTERN: Map stays fixed while row scrolls */
    top: 0; /* Stick to top of scrolling container */
    align-self: flex-start; /* Stick to top of flex container */
    flex-shrink: 0; /* Prevent shrinking */
    will-change: transform; /* Optimize sticky positioning, prevent micro-adjustments */
    transform: translateZ(0); /* Force GPU acceleration for smoother sticky */
}

/* Map container inside the column */
.wishlist-map-container {
    width: 100%;
    height: 100%; /* Full height from navbar to bottom */
    border-radius: 0; /* No border-radius for full-bleed map */
    position: relative;
    overflow: hidden;
}

/* Card Grid - 2 columns default (LoveForm-style) */
.wishlist-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    overflow: visible; /* CRITICAL: No scroll on grids */
}

/*
 * Responsive Breakpoints - LoveForm-Style Card Grid
 * ================================================
 * The key insight is that 3 cards need significant container width to look good.
 * At 50% container width, we need at least 1600px viewport for 3 cards.
 *
 * Math: 3 cards × 200px min + 2 gaps × 16px + 40px padding = ~700px minimum
 * At 50% split, that's 1400px viewport. BUT LoveForm uses closer to 40% cards,
 * so we need 700px / 0.42 ≈ 1667px for comfortable 3-card layout.
 */

/* Responsive: Desktop (1240px+): 3 cards - LoveForm style */
@media (min-width: 1240px) {
    .wishlist-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

/* Responsive: Tablet/Small Desktop (550px-1239px): 2 cards - LoveForm style */
@media (min-width: 550px) and (max-width: 1239px) {
    .wishlist-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* Responsive: Mobile (<550px): 1 card - LoveForm style */
@media (max-width: 549px) {
    .wishlist-cards-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Responsive: Tablet (below lg breakpoint): map stacks below cards */
@media (max-width: 991px) {
    .wishlist-detail-page.wishlist-fullheight-layout {
        height: auto;
        overflow: visible;
    }
    .wishlist-fullheight-content.wishlist-detail-content {
        height: auto;
    }
    .wishlist-schools-list {
        height: auto;
        overflow: visible;
    }
    /* Map always visible - stacks below cards on mobile/tablet */
    .wishlist-map-column {
        position: relative; /* Remove sticky on mobile */
        height: 400px; /* Fixed height when stacked */
        margin-top: 24px;
    }
    .wishlist-column-header {
        padding: 16px;
    }
    .wishlist-school-count {
        padding: 0 16px;
    }
}

/* Responsive: Mobile-specific adjustments */
@media (max-width: 549px) {
    .wishlist-schools-list {
        padding: 0 16px 16px 16px;
    }
    .wishlist-map-column {
        height: 300px; /* Smaller map on mobile */
        margin-top: 16px;
    }
    .wishlist-column-header {
        padding: 12px 16px;
        gap: 8px;
    }
    .wishlist-column-title-section .wishlist-detail-title {
        font-size: 20px;
    }
    .wishlist-school-count {
        padding: 0 16px;
    }
}

/* School Card in Wishlist - Vertical LoveForm Style */
.wishlist-school-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.15s ease;
    /* FIX: Prevent grid children from overflowing - min-width: 0 allows cards to shrink */
    min-width: 0;
    max-width: 100%;
}

.wishlist-school-card:hover {
    transform: translateY(-2px);
}

/* Image Carousel - LoveForm's 20:19 near-square ratio */
.wishlist-school-image-carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 20 / 19; /* LoveForm's near-square ratio - NOT 4:3 */
    border-radius: 12px;
    overflow: hidden; /* CRITICAL: clips heart badge and any content extending beyond bounds */
    background: var(--wishlist-bg-light);
    /* FIX: Ensure absolute positioned children (heart badge) stay within bounds */
    isolation: isolate;
}

.wishlist-school-image-carousel .carousel-images {
    position: relative;
    width: 100%;
    height: 100%;
}

.wishlist-school-image-carousel .carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.wishlist-school-image-carousel .carousel-image.active {
    display: block;
}

/* Heart Button overlaid on image (top-right) */
.wishlist-school-heart {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.wishlist-school-heart svg {
    width: 24px;
    height: 24px;
    color: var(--wishlist-primary);
    fill: var(--wishlist-primary);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.wishlist-school-heart:hover svg {
    transform: scale(1.1);
    transition: transform 0.15s ease;
}

/* School Info - Below image */
.wishlist-school-info {
    padding: 10px 0 0 0;
}

/* Name + Rating row */
.wishlist-school-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.wishlist-school-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--wishlist-text-dark);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* Header Right Side Container (Star Rating + Voting) */
.wishlist-school-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Star Rating Display - LoveForm style inline with name */
.wishlist-school-rating {
    font-size: 14px;
    font-weight: 500;
    color: var(--wishlist-text-dark);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Voting UI (LoveForm collaborative pattern) */
.wishlist-vote-container {
    display: flex;
    align-items: center;
    gap: 4px;
}

.wishlist-vote-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid var(--wishlist-border);
    border-radius: 20px;
    color: var(--wishlist-text-medium);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.wishlist-vote-btn:hover {
    border-color: var(--wishlist-text-dark);
    background: var(--wishlist-bg-light);
}

.wishlist-vote-btn.voted {
    background: var(--wishlist-primary);
    border-color: var(--wishlist-primary);
    color: white;
}

.wishlist-vote-btn.voted:hover {
    background: var(--wishlist-primary-hover);
    border-color: var(--wishlist-primary-hover);
}

.wishlist-vote-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.vote-count {
    font-weight: 600;
    min-width: 14px;
    text-align: center;
}

/* Type + Grade Range (with TrueScore label) */
.wishlist-school-type {
    font-size: 14px;
    font-weight: 400;
    color: var(--wishlist-text-medium);
    margin: 2px 0 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* TrueScore Badge - Circular teal badge with number (matches K12 inspiration section) */
.truescore-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #2ac8c8;
    color: white;
    font-size: 0.5625rem;
    font-weight: var(--font-weight-semibold, 600);
    border-radius: 50%;
    letter-spacing: 0;
    flex-shrink: 0;
    vertical-align: middle;
}

/* TrueScore label styling (text after the badge) */
.wishlist-truescore-label {
    font-weight: 500;
    color: var(--wishlist-text-dark);
    vertical-align: middle;
}

/* School Metrics Row (Student-Teacher Ratio, Enrollment) */
.wishlist-school-metrics {
    font-size: 14px;
    font-weight: 400;
    color: var(--wishlist-text-medium);
    margin: 2px 0 0 0;
}

/* Tuition Display (LoveForm pattern - always visible like price) */
.wishlist-school-tuition {
    font-size: 15px;
    font-weight: 600;
    color: var(--wishlist-text-dark);
    margin: 4px 0 0 0;
}

/* Notes section */
.wishlist-school-note {
    margin-top: 4px;
}

.wishlist-add-note-btn {
    font-size: 14px;
    font-weight: 600;
    color: var(--wishlist-text-dark);
    background: transparent;
    border: none;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    text-align: left;
}

.wishlist-add-note-btn:hover {
    color: #000;
}

/* Note preview when has note */
.wishlist-add-note-btn.has-note {
    font-weight: 400;
    color: var(--wishlist-text-medium);
    text-decoration: none;
    font-size: 13px;
}

.wishlist-add-note-btn.has-note:hover {
    text-decoration: underline;
}

/* ===== Activity Section (LoveForm-style notes + votes) ===== */
.wishlist-activity-section {
    margin-top: 12px;
    padding: 12px;
    background: #F7F7F7;
    border-radius: 12px;
    border: 1px solid #EBEBEB;
}

.wishlist-activity-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wishlist-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    padding-right: 40px; /* Room for Edit button */
}

.activity-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

.activity-avatar .avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #E0E0E0;
}

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-author {
    font-size: 13px;
    font-weight: 600;
    color: #222222;
    margin-right: 6px;
}

.activity-text {
    font-size: 13px;
    color: #484848;
    line-height: 1.4;
}

.activity-edit-btn {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12px;
    font-weight: 600;
    color: #717171;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.activity-edit-btn:hover {
    color: #222222;
}

/* Vote Summary (when no notes) */
.wishlist-vote-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 4px 0;
}

.vote-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #484848;
}

.vote-indicator.vote-up {
    color: #00A699;
}

.vote-indicator.vote-down {
    color: #FF385C;
}

/* Activity Actions */
.wishlist-activity-actions {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #EBEBEB;
}

/* Legacy support - keep old classes working */
.wishlist-school-notes {
    margin-top: 8px;
}

.wishlist-notes-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.wishlist-note-item {
    position: relative;
    padding: 8px 12px;
    background: var(--wishlist-bg-light);
    border-radius: 8px;
    border-left: 3px solid var(--wishlist-primary);
}

.note-author {
    font-size: 12px;
    font-weight: 600;
    color: var(--wishlist-primary);
    margin-bottom: 4px;
}

.note-text {
    font-size: 13px;
    color: var(--wishlist-text-dark);
    line-height: 1.4;
    margin-bottom: 4px;
}

.note-edit-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--wishlist-text-medium);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.note-edit-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--wishlist-text-dark);
}

/* Carousel Dot Indicators */
.wishlist-school-image-carousel .carousel-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}

.wishlist-school-image-carousel .carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.wishlist-school-image-carousel .carousel-dot.active {
    background: #FFFFFF;
    transform: scale(1.2);
}

/* LEGACY: Keep old styles for backwards compatibility but override with new */
.wishlist-school-image {
    display: none; /* Hide old image container */
}

.wishlist-school-location {
    display: none; /* Hide location (now using type • grade) */
}

.wishlist-school-details {
    display: none; /* Hide old details section */
}

.wishlist-note-text {
    font-size: 14px;
    color: var(--wishlist-text-dark);
    background: var(--wishlist-bg-light);
    padding: 12px;
    border-radius: 8px;
    margin-top: 8px;
}

/* Empty State */
.wishlist-empty {
    text-align: center;
    padding: 80px 24px;
}

.wishlist-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
    color: var(--wishlist-text-light);
}

.wishlist-empty-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--wishlist-text-dark);
    margin: 0 0 12px;
}

.wishlist-empty-text {
    font-size: 16px;
    color: var(--wishlist-text-medium);
    margin: 0 0 24px;
}

.wishlist-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    color: white;
    background: var(--wishlist-primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.wishlist-empty-btn:hover {
    background: var(--wishlist-primary-hover);
    transform: translateY(-2px);
}

/* Delete Confirmation Modal */
.wishlist-delete-modal .modal-body {
    text-align: center;
    padding: 32px 24px;
}

.wishlist-delete-warning {
    font-size: 16px;
    color: var(--wishlist-text-medium);
    margin-bottom: 8px;
}

.wishlist-delete-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--wishlist-text-dark);
    margin-bottom: 8px;
}

.wishlist-delete-info {
    font-size: 14px;
    color: var(--wishlist-text-medium);
}

.wishlist-btn-delete {
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    color: white;
    background: var(--wishlist-primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.wishlist-btn-delete:hover {
    background: var(--wishlist-primary-hover);
}

/* ================================================
   Heart Button Animation
   ================================================ */
@keyframes wishlistHeartPop {
    0% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

.heart-button.just-added svg {
    animation: wishlistHeartPop 0.4s ease-out;
}

/* Heart button favorited state */
.heart-button.favorited svg {
    fill: var(--wishlist-primary);
    color: var(--wishlist-primary);
}

/* Loading spinner in modal */
.wishlist-loading {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.wishlist-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--wishlist-bg-light);
    border-top-color: var(--wishlist-text-dark);
    border-radius: 50%;
    animation: wishlistSpin 0.8s linear infinite;
}

@keyframes wishlistSpin {
    to { transform: rotate(360deg); }
}

/* ================================================
   LoveForm-Style Modal Enhancements
   ================================================ */

/* Disabled Create button state */
.wishlist-btn-create:disabled,
.wishlist-btn-create[disabled] {
    background: #DDDDDD !important;
    color: #B0B0B0 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Modal backdrop darker like LoveForm */
.modal-backdrop.show {
    opacity: 0.6;
}

/* Clean modal shadow */
.modal-content {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28) !important;
}

/* Better card hover effect */
.wishlist-card:hover .wishlist-card-image img {
    transform: scale(1.02);
    transition: transform 0.3s ease;
}

.wishlist-card-image img {
    transition: transform 0.3s ease;
}

/* X button hover on delete modal */
.modal .btn-close:hover {
    background-color: #F7F7F7;
    border-radius: 50%;
}

/* Cancel button hover underline */
.wishlist-btn-cancel:hover {
    background: #F7F7F7 !important;
    border-radius: 8px;
}

/* ================================================
   Share Modal - Social Grid (LoveForm-style)
   ================================================ */
.share-social-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.share-social-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: transparent;
    border: 1px solid var(--wishlist-border, #DDDDDD);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.share-social-btn:hover {
    background: var(--wishlist-bg-light, #F7F7F7);
    border-color: var(--wishlist-text-dark, #222222);
}

.share-social-btn span {
    font-size: 12px;
    font-weight: 500;
    color: var(--wishlist-text-dark, #222222);
}

.share-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-icon-messages {
    background: linear-gradient(180deg, #5BF675 0%, #00E85E 100%);
    color: white;
}
.share-icon-whatsapp {
    background: #25D366;
    color: white;
}
.share-icon-facebook {
    background: #1877F2;
    color: white;
}
.share-icon-email {
    background: linear-gradient(180deg, #FFA94D 0%, #FF6B6B 100%);
    color: white;
}
.share-icon-messenger {
    background: linear-gradient(180deg, #00C6FF 0%, #0078FF 100%);
    color: white;
}
.share-icon-twitter {
    background: #000000;
    color: white;
}

/* Share preview card */
.share-preview {
    background: var(--wishlist-bg-light, #F7F7F7);
}

/* Copy link section */
.share-copy-section .form-control {
    font-size: 14px;
    padding: 12px 16px;
    border-radius: 8px 0 0 8px;
}

.share-copy-section .btn {
    border-radius: 0 8px 8px 0;
    font-weight: 600;
}

/* ================================================
   Map Info Window - School Card Popup
   ================================================ */
.gm-style-iw {
    padding: 0 !important;
    max-width: none !important;
}

.gm-style-iw-d {
    overflow: hidden !important;
    max-height: none !important;
}

.gm-style-iw-c {
    padding: 0 !important;
    border-radius: 12px !important;
}

/* Hide the close button's white background */
.gm-style-iw button[aria-label="Close"] {
    background: white !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
    top: 8px !important;
    right: 8px !important;
}

.map-school-popup {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

/* Mobile responsive adjustments */
@media (max-width: 576px) {
    .share-social-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .share-social-btn {
        padding: 12px;
    }

    .share-icon {
        width: 40px;
        height: 40px;
    }
}

/* ========================================================================== */
/* FILTER STYLES (LoveForm-style progressive disclosure) */
/* ========================================================================== */

/* Filter Chips Container */
.wishlist-filter-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* Individual Filter Chip (LoveForm pill shape) */
.wishlist-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: white;
    border: 1px solid #DDDDDD;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 500;
    color: #222222;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    position: relative;
}

.wishlist-filter-chip:hover {
    border-color: #222222;
    background: #F7F7F7;
}

.wishlist-filter-chip.active {
    background: #2ac8c8;
    border-color: #2ac8c8;
    color: white;
}

.wishlist-filter-chip svg {
    flex-shrink: 0;
}

/* Address Entry Pill - Shows when user has no address (onboarding incomplete) */
.wishlist-address-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #F0F8FF;
    border: 1.5px solid #2196F3;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    color: #1976D2;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.wishlist-address-pill:hover {
    background: #E3F2FD;
    border-color: #1976D2;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.15);
}

.wishlist-address-pill svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* Share Button (LoveForm pattern - inline with filter chips) */
.wishlist-share-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    background: transparent !important;
    border: 1px solid var(--wishlist-border) !important;
    border-radius: 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--wishlist-text-dark) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    /* Remove margin-left: auto - should be inline with filters */
}

.wishlist-share-btn:hover {
    background: var(--wishlist-bg-light) !important;
    border-color: var(--wishlist-text-dark) !important;
}

.wishlist-share-btn svg,
.wishlist-share-btn img {
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
    display: block !important;
}

/* Reset Filters Button (LoveForm pattern - bottom left) */
.wishlist-reset-container {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 1000;
}

.wishlist-reset-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    background: #289a96 !important;
    background-color: #289a96 !important;
    border: 2px solid #289a96 !important;
    border-radius: 24px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 6px 20px rgba(40, 154, 150, 0.4) !important;
    text-decoration: none !important;
    outline: none !important;
}

.wishlist-reset-btn:hover {
    background: #1f7a77 !important;
    background-color: #1f7a77 !important;
    border-color: #1f7a77 !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 24px rgba(40, 154, 150, 0.5) !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
}

.wishlist-reset-btn:active,
.wishlist-reset-btn:focus {
    background: #1f7a77 !important;
    border-color: #1f7a77 !important;
    color: #FFFFFF !important;
    outline: none !important;
    box-shadow: 0 6px 20px rgba(40, 154, 150, 0.4) !important;
}

.wishlist-reset-btn svg {
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
}

.wishlist-reset-btn span {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

/* Mobile responsive - adjust position */
@media (max-width: 768px) {
    .wishlist-reset-container {
        bottom: 16px;
        left: 16px;
    }

    .wishlist-reset-btn {
        padding: 8px 14px;
        font-size: 13px;
    }
}

/* Filter Dropdowns (Distance & Bell Time) */
.wishlist-filter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    min-width: 280px;
    z-index: 1100;
    animation: filterDropdownSlide 0.2s ease-out;
}

@keyframes filterDropdownSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wishlist-filter-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #EBEBEB;
}

.wishlist-filter-dropdown-header h6 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #222222;
}

.wishlist-filter-dropdown-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #717171;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.wishlist-filter-dropdown-close:hover {
    background: #F7F7F7;
}

.wishlist-filter-dropdown-options {
    padding: 8px 0;
}

.wishlist-filter-option {
    width: 100%;
    padding: 12px 20px;
    background: none;
    border: none;
    text-align: left;
    font-size: 14px;
    color: #222222;
    cursor: pointer;
    transition: background 0.15s;
    display: block;
}

.wishlist-filter-option:hover {
    background: #F7F7F7;
}

.wishlist-filter-option.active {
    background: #F7F7F7;
    font-weight: 600;
}

.wishlist-filter-dropdown-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-top: 1px solid #EBEBEB;
}

.wishlist-filter-dropdown-footer .btn-link {
    font-weight: 600;
    text-decoration: underline;
    padding: 0;
}

.wishlist-filter-dropdown-footer .btn-dark {
    border-radius: 8px;
    font-weight: 600;
    padding: 8px 24px;
}

/* Grade Filter Modal (LoveForm circular slider) */
.grade-slider-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grade-slider-svg {
    display: block;
    max-width: 100%;
    height: auto;
}

.grade-track-bg {
    transition: stroke 0.2s;
}

#gradeSelectionArc {
    transition: d 0.1s ease-out;
}

#gradeHandleMin,
#gradeHandleMax {
    transition: all 0.15s;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

#gradeHandleMin:hover,
#gradeHandleMax:hover {
    r: 18;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}

#gradeHandleMin:active,
#gradeHandleMax:active {
    cursor: grabbing;
}

.grade-slider-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.grade-range-display {
    font-size: 3rem;
    font-weight: 700;
    color: #222;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.grade-range-label {
    font-size: 1rem;
    color: #717171;
    font-weight: 500;
}

.grade-range-dates {
    font-size: 1rem;
    color: #222;
}

.grade-endpoint-label {
    font-weight: 600;
    padding: 4px 12px;
    border-bottom: 2px solid #222;
}

/* Bucket Styles (for filtered school organization) */
.wishlist-bucket {
    margin-bottom: 32px;
}

.wishlist-bucket-title {
    font-size: 18px;
    font-weight: 600;
    color: #222222;
    margin-bottom: 16px;
}

.wishlist-bucket-secondary {
    opacity: 0.7;
}

.wishlist-bucket-secondary .wishlist-bucket-title {
    color: #717171;
}

.wishlist-school-card-dimmed {
    opacity: 0.6;
    position: relative;
}

/* Filter Mismatch Badge */
.wishlist-filter-mismatch-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    z-index: 10;
    backdrop-filter: blur(8px);
}

/* Bucket Expand/Collapse */
.wishlist-bucket-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 8px 0;
    font-size: 14px;
    font-weight: 600;
    color: #222222;
    cursor: pointer;
    text-decoration: underline;
    margin-top: 12px;
}

.wishlist-bucket-toggle:hover {
    color: #289a96;
}

.wishlist-bucket-toggle svg {
    transition: transform 0.2s;
}

.wishlist-bucket-toggle.collapsed svg {
    transform: rotate(-90deg);
}

/* Mobile Responsive Filters */
@media (max-width: 768px) {
    .wishlist-filter-chips {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .wishlist-filter-chips::-webkit-scrollbar {
        display: none;
    }

    .wishlist-filter-chip {
        padding: 8px 14px;
        font-size: 13px;
    }

    .wishlist-filter-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        border-radius: 12px 12px 0 0;
        max-height: 80vh;
        overflow-y: auto;
    }

    .grade-slider-container {
        max-width: 320px;
    }

    .grade-range-display {
        font-size: 2.5rem;
    }

    .grade-endpoint-label {
        font-size: 0.9rem;
    }
}

/* ===================================================================
   IOS-STYLE TIME PICKER (Slot Machine Pattern)
   =================================================================== */

/* Time Mode Selector (Before/After Toggle) */
.time-mode-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    justify-content: center;
}

.time-mode-btn {
    flex: 1;
    padding: 12px 24px;
    background: white;
    border: 1px solid #DDDDDD;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #717171;
    cursor: pointer;
    transition: all 0.15s ease;
}

.time-mode-btn:hover {
    border-color: #222222;
    background: #F7F7F7;
}

.time-mode-btn.active {
    background: #2ac8c8;
    border-color: #2ac8c8;
    color: white;
}

/* Time Picker Container */
.time-picker-container {
    position: relative;
    height: 260px;
    background: #F7F7F7;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
    padding: 0 20px;
}

/* Center Highlight Bar (iOS pattern) */
.time-picker-highlight {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 44px;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.05);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    pointer-events: none;
    z-index: 1;
}

/* Individual Time Column */
.time-picker-column {
    position: relative;
    flex: 1;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Scrollable Content */
.time-picker-scroller {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 108px 0; /* (260px - 44px) / 2 = 108px padding to center selected item */
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none; /* Hide scrollbar */
    -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
    -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
    width: 100%;
}

.time-picker-scroller::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome/Safari */
}

/* Time Option Item */
.time-option {
    scroll-snap-align: center;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 400;
    color: #222222;
    opacity: 0.3;
    transition: opacity 0.2s ease, font-size 0.2s ease;
    cursor: pointer;
    user-select: none;
    width: 100%;
}

/* Active/Selected State (when in center highlight) */
.time-option.active {
    opacity: 1;
    font-weight: 600;
    font-size: 28px;
}

/* Colon Separator */
.time-picker-separator {
    font-size: 32px;
    font-weight: 600;
    color: #222222;
    padding: 0 8px;
    z-index: 2;
    pointer-events: none;
}

/* Selected Time Display (Below Picker) */
.selected-time-display {
    margin-top: 16px;
    font-size: 16px;
    color: #717171;
}

.time-mode-text {
    font-weight: 400;
    margin-right: 8px;
}

.selected-time-value {
    font-weight: 600;
    color: #222222;
}

/* Fade Gradient Overlay (Top/Bottom) */
.time-picker-column::before,
.time-picker-column::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 80px;
    pointer-events: none;
    z-index: 2;
}

.time-picker-column::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(247, 247, 247, 1) 0%, rgba(247, 247, 247, 0) 100%);
}

.time-picker-column::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(247, 247, 247, 1) 0%, rgba(247, 247, 247, 0) 100%);
}

/* Mobile Responsive Adjustments */
@media (max-width: 576px) {
    .time-picker-container {
        height: 220px;
        padding: 0 12px;
    }

    .time-picker-scroller {
        padding: 88px 0; /* Adjusted for shorter container */
    }

    .time-option {
        font-size: 20px;
        height: 40px;
    }

    .time-option.active {
        font-size: 24px;
    }

    .time-picker-separator {
        font-size: 28px;
        padding: 0 4px;
    }

    .time-picker-highlight {
        height: 40px;
    }
}

/* ================================================================
   COLLABORATOR AVATAR STACK (LoveForm pattern)
   Shows stacked avatars when wishlist is shared
   ================================================================ */

.wishlist-collaborators-stack {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 20px;
    transition: background-color 0.2s ease;
    margin-left: 8px;
}

.wishlist-collaborators-stack:hover {
    background-color: var(--wishlist-bg-hover);
}

.collaborator-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid white;
    margin-left: -10px;
    position: relative;
    background: white;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.collaborator-avatar:first-child {
    margin-left: 0;
}

.collaborator-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.collaborator-avatar-owner {
    z-index: 3;
}

.collaborator-avatar:nth-child(2) {
    z-index: 2;
}

.collaborator-avatar:nth-child(3) {
    z-index: 1;
}

.collaborator-overflow {
    background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
}

.collaborator-overflow span {
    font-size: 11px;
    font-weight: 600;
    color: #666;
}

/* Hover effect - slight lift */
.wishlist-collaborators-stack:hover .collaborator-avatar {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .collaborator-avatar {
        width: 28px;
        height: 28px;
        margin-left: -8px;
    }

    .collaborator-overflow span {
        font-size: 10px;
    }
}

/* ================================================================
   COLLABORATORS MODAL (LoveForm pattern)
   ================================================================ */

.collaborators-modal-content {
    border-radius: 16px;
    border: none;
    overflow: hidden;
}

.collaborators-modal-header {
    border-bottom: 1px solid #ebebeb;
    padding: 16px 24px;
}

.collaborators-modal-header .modal-title {
    font-size: 16px;
    font-weight: 600;
    color: #222;
}

.collaborators-modal-body {
    padding: 0;
}

.collaborator-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid #f5f5f5;
}

.collaborator-row:last-of-type {
    border-bottom: none;
}

.collaborator-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.collaborator-row-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.collaborator-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.collaborator-name {
    font-size: 14px;
    font-weight: 500;
    color: #222;
}

.collaborator-role-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    color: #717171;
    background: #f5f5f5;
    padding: 2px 8px;
    border-radius: 4px;
    width: fit-content;
}

.collaborator-action-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.collaborator-remove-btn {
    background: transparent;
    color: #222;
    text-decoration: underline;
}

.collaborator-remove-btn:hover {
    color: #c13515;
}

.collaborator-leave-btn {
    background: transparent;
    color: #c13515;
    text-decoration: underline;
}

.collaborator-leave-btn:hover {
    color: #a01212;
}

.collaborators-empty {
    padding: 32px 24px;
    text-align: center;
}

.collaborators-empty p {
    margin: 0;
    font-size: 14px;
    color: #222;
}

.collaborators-empty .text-muted {
    color: #717171;
    font-size: 13px;
    margin-top: 4px;
}

.collaborators-footer {
    padding: 16px 24px;
    border-top: 1px solid #ebebeb;
}

.collaborators-invite-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 24px;
    background: #222;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.collaborators-invite-btn:hover {
    background: #000;
}

.collaborators-invite-btn svg {
    fill: white;
}

/* "More options" link (LoveForm pattern) */
.collaborators-more-options {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    background: transparent;
    border: none;
    font-size: 14px;
    font-weight: 500;
    color: #222;
    text-decoration: underline;
    cursor: pointer;
    text-align: center;
}

.collaborators-more-options:hover {
    color: #000;
}

/* Owner role as plain text (not badge) - LoveForm pattern */
.collaborator-role-text {
    font-size: 14px;
    font-weight: 400;
    color: #717171;
}

/* "+" button in avatar stack (LoveForm pattern) */
.collaborator-add-btn {
    background: #f7f7f7;
    border: 2px dashed #dddddd;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.collaborator-add-btn:hover {
    background: #ebebeb;
    border-color: #b0b0b0;
}

.collaborator-add-btn span {
    font-size: 16px;
    font-weight: 400;
    color: #717171;
}

/* Header with back button (LoveForm pattern) */
.collaborators-header-with-back {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.collaborators-back-btn {
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.collaborators-back-btn:hover {
    background: #f5f5f5;
}

/* More options view - option row (LoveForm pattern) */
.collaborators-option-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    padding: 20px 24px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.collaborators-option-row:hover {
    background: #f7f7f7;
}

.collaborators-option-icon {
    flex-shrink: 0;
    color: #222;
}

.collaborators-option-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.collaborators-option-title {
    font-size: 16px;
    font-weight: 500;
    color: #222;
}

.collaborators-option-subtitle {
    font-size: 14px;
    font-weight: 400;
    color: #717171;
}

/* Deactivate confirmation modal (LoveForm pattern) */
.deactivate-modal-body {
    padding: 0 24px 24px 24px;
    text-align: center;
}

.deactivate-title {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin-bottom: 8px;
}

.deactivate-description {
    font-size: 14px;
    font-weight: 400;
    color: #717171;
    margin-bottom: 24px;
    line-height: 1.5;
}

.deactivate-actions {
    display: flex;
    gap: 12px;
}

.deactivate-cancel-btn {
    flex: 1;
    padding: 14px 24px;
    background: transparent;
    border: 1px solid #222;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #222;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.deactivate-cancel-btn:hover {
    background: #f7f7f7;
}

.deactivate-confirm-btn {
    flex: 1;
    padding: 14px 24px;
    background: #222;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.deactivate-confirm-btn:hover {
    background: #000;
}

/* ================================================================
   SHARE MODAL - AIRBNB EXACT PATTERN ("Invite others to join")
   ================================================================ */

/* Modal container */
.share-modal-loveform {
    border-radius: 12px;
    overflow: hidden;
    max-width: 568px;
    /* Prevent modal jump by using contain */
    contain: layout;
}

.share-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: none;
    /* Fixed height to prevent jump */
    min-height: 56px;
}

.share-modal-header .btn-close {
    opacity: 1;
}

.modal-body.share-modal-body {
    padding: 0 24px 40px 24px !important;
    /* Prevent content shift during animation */
    min-height: 380px;
}

/* Title (centered, bold) */
.share-modal-title {
    font-size: 22px;
    font-weight: 600;
    color: #222;
    text-align: left;
    margin-bottom: 24px;
}

/* Preview section (thumbnail + "Join my wishlist: [name] · [count] saved") */
.share-preview-loveform {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.share-preview-thumb {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    /* Prevent jump when image loads */
    background-color: #f0f0f0;
}

.share-preview-text {
    font-size: 14px;
    font-weight: 400;
    color: #222;
    margin: 0;
    line-height: 1.4;
    /* Prevent text jump */
    min-height: 20px;
}

/* Share options grid (2-column, rectangular buttons) */
.share-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.share-option-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #222;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.share-option-btn:hover {
    border-color: #222;
    background: #fafafa;
}

.share-option-btn svg {
    flex-shrink: 0;
    color: #222;
}

/* Footer notice */
.share-modal-notice {
    font-size: 12px;
    color: #717171;
    text-align: left;
    margin: 8px 0 0 0;
    padding-top: 8px;
    line-height: 1.5;
}

.share-modal-learn-more {
    color: #222;
    font-weight: 600;
    text-decoration: underline;
}

.share-modal-learn-more:hover {
    color: #000;
}

/* Copy success toast */
.share-copied-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: #222;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ================================================================
   SHARE MODAL (Old pattern - for backwards compatibility)
   ================================================================ */

.wishlist-share-modal .modal-header {
    border-bottom: 1px solid var(--wishlist-border);
    padding: 20px 24px;
}

.wishlist-share-modal .modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--wishlist-text-dark);
}

.wishlist-share-modal .modal-body {
    padding: 24px;
}

.share-section {
    animation: fadeIn 0.2s ease;
}

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

.share-info {
    text-align: center;
    margin-bottom: 24px;
}

.share-icon {
    color: var(--wishlist-brand);
    margin-bottom: 16px;
}

.share-info h6 {
    font-size: 16px;
    font-weight: 600;
    color: var(--wishlist-text-dark);
    margin-bottom: 8px;
}

.share-info p {
    font-size: 14px;
    margin-bottom: 0;
}

.share-link-container {
    margin-bottom: 24px;
}

.share-link-container .form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--wishlist-text-dark);
    margin-bottom: 8px;
}

.share-link-container .input-group {
    border: 1px solid var(--wishlist-border);
    border-radius: 8px;
    overflow: hidden;
}

.share-link-container .form-control {
    border: none !important;
    background: var(--wishlist-bg-light);
    font-size: 14px;
    padding: 10px 12px;
}

.share-link-container .form-control:focus {
    box-shadow: none;
    background: var(--wishlist-bg-light);
}

.share-link-container .btn {
    border: none;
    border-left: 1px solid var(--wishlist-border);
    background: white;
    color: var(--wishlist-brand);
    font-weight: 600;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.share-link-container .btn:hover {
    background: var(--wishlist-bg-light);
}

#copyFeedback {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--wishlist-brand);
    opacity: 0;
    transition: opacity 0.2s ease;
}

#copyFeedback.show {
    opacity: 1;
}

.share-collaborators h6 {
    font-size: 14px;
    font-weight: 600;
    color: var(--wishlist-text-dark);
}

.collaborator-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.collaborator-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    background: var(--wishlist-bg-light);
    border-radius: 8px;
}

.collaborator-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--wishlist-brand);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

.collaborator-info {
    flex: 1;
}

.collaborator-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--wishlist-text-dark);
    margin-bottom: 2px;
}

.collaborator-date {
    font-size: 12px;
    color: var(--wishlist-text-muted);
}

/* ===== Multi-Platform Share Modal (LoveForm pattern) ===== */
.share-modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12);
}

.share-modal-header {
    border-bottom: 1px solid #EBEBEB;
    padding: 16px 24px;
}

.share-modal-header .modal-title {
    font-size: 16px;
    font-weight: 600;
    color: #222222;
}

.modal-body.share-modal-body {
    padding: 0 24px 40px 24px !important;
    /* Prevent content shift during animation */
    min-height: 380px;
}

/* Wishlist Preview Header */
.share-wishlist-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #F7F7F7;
    border-radius: 12px;
    margin-bottom: 20px;
}

.share-preview-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.share-preview-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #E0E0E0;
}

.share-preview-text {
    font-size: 14px;
    color: #222222;
    line-height: 1.4;
}

.share-preview-label {
    display: block;
    color: #717171;
    font-size: 13px;
}

.share-preview-name {
    font-weight: 600;
}

.share-preview-count {
    color: #717171;
}

/* Multi-Platform Share Buttons Grid */
.share-platforms-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.share-platform-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 12px;
    transition: background 0.2s ease;
}

.share-platform-btn:hover {
    background: #F7F7F7;
}

.share-platform-btn:active {
    background: #EBEBEB;
}

.share-platform-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #F7F7F7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222222;
    transition: all 0.2s ease;
}

.share-platform-btn:hover .share-platform-icon {
    transform: scale(1.05);
}

/* Platform-specific icon colors */
.share-icon-whatsapp {
    background: #25D366;
    color: white;
}

.share-icon-messenger {
    background: linear-gradient(135deg, #00B2FF, #006AFF);
    color: white;
}

.share-icon-facebook {
    background: #1877F2;
    color: white;
}

.share-icon-twitter {
    background: #000000;
    color: white;
}

.share-icon-messages {
    background: #34C759;
    color: white;
}

.share-platform-label {
    font-size: 12px;
    color: #484848;
    font-weight: 500;
}

/* Link Copied Toast */
.share-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #222222;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s ease;
}

.share-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.share-toast svg {
    color: #00A699;
}

/* ================================================================
   BUCKET ORGANIZATION (LoveForm pattern - Phase 1)
   ================================================================ */

.wishlist-bucket {
    margin-bottom: 32px;
}

.wishlist-bucket-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--wishlist-border);
}

.wishlist-bucket-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--wishlist-text-dark);
    margin: 0;
}

.wishlist-bucket-title span {
    color: var(--wishlist-brand);
}

/* Secondary bucket (doesn't meet criteria) */
.wishlist-bucket-secondary .wishlist-bucket-header {
    border-bottom-color: var(--wishlist-border);
    opacity: 0.8;
}

.wishlist-bucket-secondary .wishlist-bucket-title {
    color: var(--wishlist-text-muted);
}

/* Toggle button for secondary bucket */
.wishlist-bucket-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--wishlist-border);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--wishlist-text-dark);
    cursor: pointer;
    transition: all 0.2s ease;
}

.wishlist-bucket-toggle:hover {
    background: var(--wishlist-bg-light);
    border-color: var(--wishlist-text-dark);
}

.wishlist-bucket-toggle svg {
    transition: transform 0.2s ease;
}

.wishlist-cards-grid-collapsed {
    display: none !important;
}

/* When expanded, rotate arrow */
.wishlist-cards-grid:not(.wishlist-cards-grid-collapsed) + .wishlist-bucket-toggle svg {
    transform: rotate(180deg);
}

/* Dimmed cards in secondary bucket */
.wishlist-school-card-dimmed {
    opacity: 0.6;
    filter: grayscale(20%);
    position: relative;
}

.wishlist-school-card-dimmed:hover {
    opacity: 0.8;
    filter: grayscale(10%);
}

/* Mismatch reason badge (overlay on dimmed cards) */
.wishlist-mismatch-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 10;
    pointer-events: none;
    max-width: calc(100% - 48px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Spacing between bucket sections */
.wishlist-bucket-primary {
    margin-bottom: 48px;
}

.wishlist-bucket-secondary {
    margin-top: 48px;
}

/* ================================================================
   GRAYED STATE for Un-favorited Schools with Undo (BUG-052)
   LoveForm Pattern: "Deferred UI Update with Re-Add Undo"
   ================================================================ */

/* Grayed out school card (pending removal - stays in DOM until component reload) */
.wishlist-school-card.grayed {
    opacity: 0.4;
    transition: opacity 0.2s ease;
    pointer-events: none; /* Prevent clicking grayed cards */
}

/* Allow heart button to remain clickable for undo */
.wishlist-school-card.grayed .wishlist-school-heart {
    pointer-events: auto;
    opacity: 1; /* Keep heart at full opacity for visibility */
}