/* ========== ACCOUNT MANAGEMENT ========== */
.account-tabs {
    flex-wrap: wrap;
    position: sticky;
    top: 0; /* JS sets this to actual header height */
    z-index: 100;
    background: #fff;
    padding-top: 10px;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
    border-radius: 0 0 var(--radius) var(--radius);
}

.account-tab {
    padding: 15px 18px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-light);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.account-tab:hover {
    color: var(--primary);
    background: rgba(0,0,0,0.02);
}

.account-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.account-tab:focus-visible {
    outline: none;
    color: var(--primary);
}

.account-tab-content {
    animation: fadeIn 0.3s ease;
}

/* Settings collapsible sections */
.settings-section {
    border: 1px solid #e9ecef;
    border-radius: 10px;
    margin-bottom: 16px;
    overflow: hidden;
}

.settings-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #f8f9fa;
    cursor: pointer;
    user-select: none;
}

.settings-section-header:hover {
    background: #f0f1f3;
}

.settings-section-header h4 {
    margin: 0;
    font-size: 15px;
}

.settings-section-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
    margin-right: 8px;
}

.settings-section-badge.action-needed {
    background: #fff3cd;
    color: #856404;
}

.settings-section-badge.complete {
    background: #e8f5e9;
    color: #28a745;
}

.settings-section-arrow {
    font-size: 12px;
    color: #666;
    transition: transform 0.2s;
}

.settings-section-arrow.collapsed {
    transform: rotate(-90deg);
}

.settings-section-body {
    padding: 20px;
}

.settings-section-body.collapsed {
    display: none;
}

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

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    font-size: 16px;
    transition: border-color var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.toggle-switch-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background: #f8f9fa;
    border-radius: var(--radius);
    margin-bottom: 15px;
}

.toggle-switch-container label {
    margin: 0;
    font-weight: 600;
}

.save-button {
    background: var(--primary);
    color: #fff;
    padding: 12px 30px;
    border: none;
    border-radius: var(--radius);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}

.save-button:hover {
    background: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

/* ========== TRUST SECTION ========== */
.trust {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 40px var(--space-xl) 36px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.trust::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 40%, rgba(0, 201, 201, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(10, 74, 140, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.trust h2 {
    margin-bottom: var(--space-lg);
    position: relative;
    z-index: 1;
}

.trust p {
    font-size: 18px;
    color: var(--text);
    max-width: 800px;
    margin: var(--space) auto;
    position: relative;
    z-index: 1;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 740px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.trust-card {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-lg);
    padding: 28px 20px;
    text-align: center;
    transition: all var(--transition);
}

.trust-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.trust-card-icon {
    font-size: 36px;
    margin-bottom: 12px;
}

.trust-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 8px 0;
}

.trust-card p {
    font-size: 14px;
    color: var(--text-light);
    margin: 0;
    line-height: 1.5;
    max-width: none;
}

/* ========== MODALS ========== */
.modal {
    display: none;
    position: fixed;
    z-index: 5000;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    overflow-y: auto;
}

.modal-content {
    background: var(--bg);
    margin: 5% auto;
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 500px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
}

.close {
    background: #dc3545;
    color: #fff;
    float: right;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    transition: all var(--transition);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.close:hover {
    color: #dc3545;
    background: #fff;
    transform: rotate(90deg);
}

/* ========== PHOTO TIPS MODAL (above list-item-modal) ========== */
#photo-tips-modal { z-index: 5100; }

/* ========== IMAGE CROP MODAL ========== */
#image-crop-modal { z-index: 5200; }

/* ========== IMAGE PREVIEW CONTROLS ========== */
.img-preview-wrap {
    position: relative;
    width: 110px;
    height: 74px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid #17a2b8;
    background: #e0f7fa;
}

.img-preview-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.img-preview-wrap .img-btn {
    position: absolute;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: none;
    cursor: pointer;
    backdrop-filter: blur(2px);
    transition: background 0.15s;
    padding: 0;
    line-height: 1;
}

.img-preview-wrap .img-btn:hover {
    background: rgba(0,0,0,0.8);
}

.img-preview-wrap .img-btn-remove {
    top: 3px;
    right: 3px;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 11px;
    text-align: center;
    line-height: 18px;
}

.img-preview-wrap .img-btn-star {
    top: 3px;
    left: 3px;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 13px;
    text-align: center;
    line-height: 22px;
}

.img-preview-wrap .img-btn-star.is-main {
    background: rgba(255, 215, 0, 0.9);
    color: #333;
}

.img-preview-wrap .img-btn-crop {
    bottom: 3px;
    right: 3px;
    border-radius: 4px;
    width: 22px;
    height: 22px;
    font-size: 12px;
    text-align: center;
    line-height: 22px;
}

.img-preview-main-badge {
    position: absolute;
    bottom: 3px;
    left: 3px;
    background: rgba(0,0,0,0.7);
    color: #ffd700;
    font-size: 8px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ========== ITEM DETAIL MODAL - FLOATING CLOSE BUTTON ========== */
#item-detail-modal .modal-content {
    max-height: none;
    overflow: visible;
    margin-top: 0;
}

.item-detail-close-bar {
    position: relative;
    z-index: 10;
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    height: 0;
    text-align: right;
    pointer-events: none;
}

.item-detail-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-top: 12px;
    margin-right: 12px;
    background: #dc3545;
    color: #fff;
    border-radius: 50%;
    border: none;
    font-size: 22px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all var(--transition);
    pointer-events: all;
}

.item-detail-close:hover {
    color: #dc3545;
    background: #fff;
    transform: rotate(90deg);
}

/* ========== FOOTER ========== */
footer {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: rgba(255,255,255,0.9);
    padding: var(--space-sm) var(--space-lg) 16px;
    text-align: center;
    font-size: 17px;
    margin-top: auto;
}

footer a {
    color: var(--accent-light);
    text-decoration: none;
    margin: 0 var(--space-sm);
    transition: color var(--transition);
}

footer a:hover {
    color: #fff;
    text-decoration: underline;
}

/* Store badge — desktop: top-right corner */
.store-badge {
    position: absolute;
    top: 14px;
    right: 16px;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    /* Fix: remove excessive min-height on mobile — footer's margin-top:auto handles bottom-pinning */
    section[id$="-section"] {
        min-height: auto !important;
    }

    /* Mobile footer padding-bottom: just enough to clear the home indicator on
       iPhones (safe-area-inset-bottom ~34px) plus 15px breathing room. The
       earlier 40px was creating a sizable empty gap below the footer that the
       user could scroll into — particularly on devices without a home indicator
       where it added a flat 40px of dead space. */
    footer {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 15px);
    }

    /* Footer copyright line — drop "Wilmington, DE" to its own row on mobile
       (single line wraps awkwardly with a hanging pipe separator otherwise). */
    .footer-loc-sep {
        display: none;
    }
    .footer-loc {
        display: block;
    }

    /* Account management section — narrower horizontal padding on mobile so
       the inner cards (Pay & Activity stat tiles, etc.) get more usable
       width. Uses !important because the inline style on the section sets
       padding: ... 20px ... 20px. */
    #account-management-section {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Account tabs — wrap into 2 rows on mobile instead of horizontal scroll
       so all 5 tabs are visible at once. With flex: 1 1 33% the first row
       fits 3 tabs at ~33% each; the remaining 2 tabs in the second row each
       grow to ~50% to fill the row width. */
    .account-tabs {
        position: static;
        display: flex;
        flex-wrap: wrap;
        overflow: visible;
        gap: 4px;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .account-tab {
        flex: 1 1 calc(33.333% - 4px);
        padding: 10px 6px;
        font-size: 12px;
        text-align: center;
        border-bottom: 3px solid transparent;
    }

    header {
        padding: var(--space);
    }

    /* Tagline font size for mobile. Logo sizing + container layout is handled
       by the postage-stamp rules further below. */
    .logo-tagline {
        font-size: 10px;
        margin-top: 0;
        margin-bottom: 0;
    }

    /* Make slide-out menu full width on mobile */
    .nav-menu {
        width: 100%;
        right: -100%;
    }

    .nav-menu-items {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
    }

    .hamburger-menu {
        width: auto;
        height: auto;
        padding: 6px 8px;
    }

    .notification-bell {
        min-width: unset;
        width: auto;
        height: auto;
        padding: 6px 8px;
    }

    /* Messages bell — pull out of controls into col 2 area on mobile */
    #messages-bell {
        position: absolute;
        right: calc(100% + 5px);
        top: 0;
    }

    .header-right-controls {
        gap: 4px;
    }

    /* Header buttons (chat / bell / hamburger / cart / wishlist / search):
       no white border, no white halo — relies on the existing inset highlights
       plus a dark drop shadow for depth. The teal gradient + sheen on each
       button is enough definition on its own. */
    .notification-bell,
    .hamburger-menu,
    .cart-notif,
    .wishlist-notif,
    button.search-button {
        border: none;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.18),
            inset 0 -1px 0 rgba(0,0,0,0.10),
            0 2px 6px rgba(0,0,0,0.18);
    }

    /* Notification badge: tuck it inside the button corner so it doesn't
       clip against the URL bar at the top of the viewport. */
    .notification-badge {
        top: 2px;
        right: 2px;
    }

    /* Header on mobile - 3x3 grid layout. Padding-top: 6px gives the logo
       breathing room from the URL bar; tight row-gap keeps the header
       compact, slightly wider column-gap (5px) matches the chat↔bell spacing
       so the search-button↔wishlist gap reads the same. */
    header {
        padding: calc(6px + env(safe-area-inset-top, 0px)) 5px 2px 5px;
        row-gap: 2px;
        column-gap: 5px;
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-rows: auto auto auto;
        overflow: hidden;
    }

    /* Logo container as a "postage stamp": one cell spanning rows 1-2 of col 1
       so the logo + tagline stack as a tight unit, independent of row 2's
       height (which is driven by the location toggle in col 2). The translateX
       nudges the centered content right so it aligns horizontally with the
       search bar below (search bar extends into col 2 via the spanned
       search-row, so col 1's natural center sits ~18px left of the bar's). */
    .logo-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: center;
        transform: translateX(21px);
    }

    .logo-img {
        height: 56px;
        cursor: pointer;
    }

    .logo-tagline {
        cursor: pointer;
        /* Scale down for narrower mobile header. "Oh, There It Is!" fits on
           one line at this size; nowrap inherited from base styles. */
        font-size: 18px;
        letter-spacing: 0.8px;
        margin-top: -6px;
    }

    .booking-requests-notif {
        display: none !important;
    }

    .return-pending-notif {
        display: none !important;
    }

    /* Right column: col 3, span all rows. `space-between` distributes the
       3 items (buttons row / cart / wishlist) with even gaps. With the
       postage-stamp logo + tight header padding above, the leftover slack
       is small (~4px per gap), so the column looks balanced. */
    .header-right-col {
        grid-column: 3 !important;
        grid-row: 1 / 4 !important;
        align-self: stretch !important;
        align-items: stretch !important;
        justify-content: space-between !important;
        gap: 4px !important;
    }

    /* Show cart/wishlist pills on mobile when logged in */
    .cart-notif.show,
    .wishlist-notif.show {
        display: flex !important;
    }

    /* Pills: compact for mobile — emoji + badge only */
    .cart-notif,
    .wishlist-notif {
        min-width: unset !important;
        padding: 6px 8px;
        font-size: 13px;
        white-space: nowrap;
        justify-content: center;
    }

    /* Hide text labels on cart/wishlist pills — show only emoji + badge */
    .cart-notif .notif-text,
    .wishlist-notif .notif-text {
        display: none;
    }

    .header-search {
        display: contents;
    }

    /* Compact location toggle on mobile — icons only, centered in col 2 */
    .location-toggle-container {
        display: flex;
        justify-content: center;
        gap: 8px;
        padding: 0;
        grid-column: 2;
        grid-row: 2;
    }

    .location-option {
        min-width: 36px;
        min-height: 36px;
        padding: 4px 8px;
        font-size: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Hide text labels, keep just emoji icons */
    .location-option span:not(.emoji) {
        display: none;
    }

    .location-subtext {
        display: none;
    }

    /* Smaller toggle switch for mobile */
    .toggle-switch {
        width: 40px;
        height: 22px;
    }

    .toggle-slider {
        width: 16px;
        height: 16px;
    }

    .toggle-switch.near-home .toggle-slider {
        left: 20px;
    }

    /* Search row becomes a flex container spanning col 1 + col 2 at row 3.
       Search bar grows to fill remaining space; search button locks to 89px
       to match the wishlist pill width on its right. Trades the narrow
       search-button-in-col-2 layout for a much wider, more usable search bar. */
    .search-row {
        display: flex;
        align-items: center;
        gap: 5px;
        grid-column: 1 / 3;
        grid-row: 3;
    }

    .search-bar {
        flex: 1;
        font-size: 13px;
        padding: 4px 12px;
        height: 32px;
        min-height: 32px;
    }

    /* Selector is `button.search-button` (not `.search-button`) so it ties
       specificity with `button:not(.help-dismiss) { min-height: 36px }` in
       base.css and wins on source order. Width matches wishlist pill (89px). */
    button.search-button {
        flex: 0 0 89px;
        width: 89px;
        padding: 4px 6px;
        font-size: 13px;
        white-space: nowrap;
        min-height: 32px;
        max-height: 32px;
        line-height: 1.2;
        align-self: center;
    }

    /* Cart 🛒 and wishlist ♥ icons: bumped from 13px → 20px and the Unicode
       heart gets bold weight for visibility against the teal pill. */
    .cart-notif .notif-emoji,
    .wishlist-notif .notif-icon {
        font-size: 20px;
        line-height: 1;
    }
    .wishlist-notif .notif-icon {
        font-weight: 900;
    }

    .categories {
        margin-top: 100px; /* Adjust for compact mobile header */
    }

    .modal-content {
        width: 95%;
        margin: 10% auto;
        padding: var(--space-lg);
        margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
    }

    .modal {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 60px);
    }

    #item-detail-modal {
        overflow-y: hidden;
    }

    #item-detail-modal .modal-content {
        max-height: 100vh;
        overflow-y: auto;
        margin-top: 0;
        border-radius: 0;
        padding: 16px;
    }

    .item-detail-close-bar {
        width: 100%;
    }

    .categories {
        grid-template-columns: 1fr;
        padding: var(--space-xl) var(--space);
    }

    #featured-items-container,
    #featured-buy-container {
        padding: 0 5px;
    }

    /* Trim home-section side padding on mobile so featured carousel cards
       reach closer to the screen edges (32px each side -> 8px). Hero text
       and section headings keep their own max-width centering, so they
       gain a little breathing room rather than pushing flush to the edge. */
    .featured {
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
    }

    .listings-grid:not(.featured-carousel-track .listings-grid) {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    #category-cards-grid {
        gap: 10px;
        padding: 0 5px;
    }

    #category-cards-grid .browse-category-card {
        flex: 0 1 calc(50% - 5px);
        min-width: 0;
    }

    /* Category cards on mobile */
    .category-card h2 {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-dark);
    }

    .category-card p {
        font-size: 14px;
        color: var(--text-light);
    }

    .browse-category-card {
        padding: 10px 8px;
        min-height: 55px;
    }

    .browse-category-card-icon {
        font-size: 22px;
        margin-bottom: 4px;
    }

    .browse-category-card-label {
        font-size: 12px;
    }

    /* Hero text on mobile */
    .hero-title {
        font-size: 28px;
    }

    .hero-subtitle {
        font-size: 15px;
    }

    /* Listing cards on mobile (vertical home page cards) */
    .listing-card {
        display: flex;
        flex-direction: column;
        padding: 0;
    }

    .listing-card img {
        width: 100%;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        margin-bottom: 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .listing-card-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 10px 12px 0 12px;
    }

    .listing-card h3 {
        font-size: 15px;
        font-weight: 600;
        color: var(--text-dark);
        margin: 0;
    }

    .listing-card p {
        font-size: 12px;
        color: var(--text-light);
        margin: 0;
    }

    .listing-card-price-badge {
        font-size: 12px;
        padding: 4px 8px;
        bottom: 8px;
        right: 8px;
    }

    .listing-card button:not(.wishlist-heart) {
        width: calc(100% - 24px);
        padding: 10px;
        font-size: 13px;
        font-weight: 600;
        background: var(--accent);
        color: #fff;
        border: none;
        border-radius: var(--radius);
        margin: auto 12px 12px 12px;
    }

    /* Trust section on mobile */
    .trust-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .trust-card {
        padding: 20px 14px;
    }

    .trust-card-icon {
        font-size: 30px;
    }

    .trust-card h3 {
        font-size: 15px;
    }

    .trust-card p {
        font-size: 13px;
    }

    /* Search result cards on mobile — compact horizontal layout */
    .search-result-card {
        display: grid;
        grid-template-columns: 110px 1fr;
        grid-template-rows: auto auto;
        height: auto;
        min-height: auto;
        max-height: none;
        margin-bottom: 10px;
        border-radius: var(--radius-lg);
        overflow: hidden;
    }

    .search-result-card-image-wrap {
        grid-row: 1;
        width: 110px !important;
        min-width: 110px !important;
        max-width: 110px !important;
        height: 110px !important;
        max-height: 110px !important;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        align-self: start;
    }

    .search-result-card-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .search-result-card-content {
        padding: 8px 10px 4px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: hidden;
        min-width: 0;
    }

    .search-result-card-title {
        font-size: 14px;
        font-weight: 700;
        color: var(--text-dark);
        margin: 0 0 4px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
    }

    .search-result-card-description {
        font-size: 11px;
        color: var(--text-light);
        margin: 0 0 4px 0;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .search-result-card-meta {
        font-size: 11px;
        color: var(--text-light);
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: auto;
    }

    .search-result-card-meta span {
        display: inline-flex;
        align-items: center;
        gap: 3px;
    }

    .search-result-card-right {
        grid-column: 1 / -1;
        padding: 5px 10px 6px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        width: auto;
        min-width: auto;
        border-left: none;
        border-top: 1px solid var(--border);
        gap: 8px;
    }

    .search-result-card-owner-badge {
        top: auto;
        bottom: 6px;
        right: 6px;
    }

    .search-result-card-price {
        font-size: 16px;
        font-weight: 700;
        color: var(--primary);
        margin: 0;
        margin-right: auto;
        text-align: left;
    }

    .search-result-card-price-label {
        font-size: 11px;
        color: var(--text-light);
        margin: 0;
        text-align: left;
    }

    .search-result-card-button,
    .search-result-card-button.cart-btn {
        padding: 6px 12px;
        font-size: 12px;
        font-weight: 600;
        background: var(--accent);
        color: #fff;
        border: none;
        border-radius: var(--radius);
        white-space: nowrap;
        margin-top: 0;
    }

    .search-result-card-button.cart-btn {
        background: #17a2b8;
    }

    /* Store page header on mobile */
    .store-header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
    }

    .store-avatar {
        width: 100px !important;
        height: 100px !important;
        font-size: 40px !important;
    }

    .store-badge {
        position: static;
        margin-top: -8px;
    }

    .store-info {
        min-width: 0 !important;
        width: 100%;
        padding-right: 0 !important;
    }

    .store-info h1 {
        text-align: center;
    }

    .store-info > div {
        justify-content: center;
    }

    #owner-store-specialty-tags {
        justify-content: center;
    }

    /* (#owner-store-share mobile rules removed — share now lives in its own
       row below the header card; centered + flow-positioned at every viewport.) */

    #floating-help-btn {
        width: 48px !important;
        height: 48px !important;
        bottom: 70px !important;
        right: 16px !important;
    }

    .owner-store-featured-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
    }

    /* Shop page items header — stack toggle above heading on mobile.
       Otherwise the long heading wraps awkwardly into 4 lines beside the
       toggle. The hidden right-side spacer (used to keep the heading
       visually centered on desktop) is removed so the heading can use
       full width. */
    #owner-store-items-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    #owner-store-items-header > h2 {
        flex: none !important;
        text-align: center !important;
    }
    #owner-store-items-header > div[aria-hidden="true"] {
        display: none !important;
    }
    /* Toggle stays left-aligned on its own row */
    #owner-store-items-header #owner-store-view-toggle {
        align-self: flex-start;
    }

    /* Skeleton cards on mobile */
    .skeleton-card {
        display: grid;
        grid-template-columns: 110px 1fr;
        height: auto;
        min-height: auto;
        max-height: none;
    }

    .skeleton-image {
        width: 110px !important;
        min-width: 110px !important;
        height: 110px !important;
    }

    .skeleton-right {
        grid-column: 1 / -1;
        flex-direction: row;
        border-left: none;
        border-top: 1px solid var(--border);
        padding: 5px 10px 6px;
        min-width: auto;
    }

    /* Cart date/time pickers - stack vertically on mobile */
    .cart-dates-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .cart-dates-row > div {
        width: 100%;
    }

    /* Cart section buttons side by side */
    #cart-summary > div:last-child {
        flex-direction: column;
    }
}

/* ========== CALENDAR VIEWS — PASTEL PLANNER THEME ========== */

/* --- Calendar Container --- */
#calendar-section .flatpickr-calendar,
#item-calendar-modal .flatpickr-calendar {
    margin: 0 auto;
    background: #FDFBF7;
    border: 1px solid #E8DFD0;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(180, 160, 130, 0.15);
    overflow: hidden;
}

#item-calendar-container .flatpickr-calendar {
    margin: 0 auto;
}

#combined-calendar-container .flatpickr-calendar {
    margin: 0 auto;
}

/* --- Month Navigation Header --- */
#calendar-section .flatpickr-months,
#item-calendar-modal .flatpickr-months {
    background: #FFF5E6;
    border-bottom: 1px solid #F0E6D8;
    padding: 6px 0;
    border-radius: 14px 14px 0 0;
}

#calendar-section .flatpickr-current-month,
#item-calendar-modal .flatpickr-current-month {
    color: #3A2E26;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.3px;
}

#calendar-section .flatpickr-current-month .cur-month,
#item-calendar-modal .flatpickr-current-month .cur-month {
    color: #3A2E26;
    font-weight: 700;
}

#calendar-section .numInputWrapper input.cur-year,
#item-calendar-modal .numInputWrapper input.cur-year {
    color: #6B5A4A;
    font-weight: 600;
}

/* Navigation Arrows */
#calendar-section .flatpickr-prev-month,
#calendar-section .flatpickr-next-month,
#item-calendar-modal .flatpickr-prev-month,
#item-calendar-modal .flatpickr-next-month {
    fill: #C4956A;
    color: #C4956A;
    transition: fill 0.2s ease, color 0.2s ease;
}

#calendar-section .flatpickr-prev-month:hover,
#calendar-section .flatpickr-next-month:hover,
#item-calendar-modal .flatpickr-prev-month:hover,
#item-calendar-modal .flatpickr-next-month:hover {
    fill: #A07050;
    color: #A07050;
}

#calendar-section .flatpickr-prev-month svg,
#calendar-section .flatpickr-next-month svg,
#item-calendar-modal .flatpickr-prev-month svg,
#item-calendar-modal .flatpickr-next-month svg {
    fill: #C4956A;
    transition: fill 0.2s ease;
}

#calendar-section .flatpickr-prev-month:hover svg,
#calendar-section .flatpickr-next-month:hover svg,
#item-calendar-modal .flatpickr-prev-month:hover svg,
#item-calendar-modal .flatpickr-next-month:hover svg {
    fill: #A07050;
}

/* --- Weekday Header Row --- */
#calendar-section .flatpickr-weekdays,
#item-calendar-modal .flatpickr-weekdays {
    background: #FEF0E1;
    border-bottom: 1px solid #F0E6D8;
    padding: 4px 0;
}

#calendar-section span.flatpickr-weekday,
#item-calendar-modal span.flatpickr-weekday {
    color: #7A6455;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Day Cells --- */
#calendar-section .flatpickr-day,
#item-calendar-modal .flatpickr-day {
    border: 1px solid #F0E6D8;
    border-radius: 8px;
    color: #3A2E26;
    font-weight: 500;
    transition: all 0.15s ease;
    margin: 1px;
    line-height: 38px;
    height: 38px;
    max-width: 38px;
}

/* Hover */
#calendar-section .flatpickr-day:hover,
#item-calendar-modal .flatpickr-day:hover {
    background: #FFF0DB;
    border-color: #E8D5B8;
}

/* Today */
#calendar-section .flatpickr-day.today,
#item-calendar-modal .flatpickr-day.today {
    background: #FFEAA7;
    border-color: #F6D55C;
    color: #6B5820;
    font-weight: 700;
}

#calendar-section .flatpickr-day.today:hover,
#item-calendar-modal .flatpickr-day.today:hover {
    background: #FFE082;
    border-color: #E6C44A;
}

/* Selected */
#calendar-section .flatpickr-day.selected,
#calendar-section .flatpickr-day.selected:hover,
#item-calendar-modal .flatpickr-day.selected,
#item-calendar-modal .flatpickr-day.selected:hover {
    background: #B8D4E3 !important;
    border-color: #7FB3D3 !important;
    color: #2C5F7C !important;
    font-weight: 700;
}

/* Previous/Next Month Days */
#calendar-section .flatpickr-day.prevMonthDay,
#calendar-section .flatpickr-day.nextMonthDay,
#item-calendar-modal .flatpickr-day.prevMonthDay,
#item-calendar-modal .flatpickr-day.nextMonthDay {
    color: #D4C8B8;
    border-color: #F5EDE0;
}

/* Disabled */
#calendar-section .flatpickr-day.flatpickr-disabled,
#item-calendar-modal .flatpickr-day.flatpickr-disabled {
    color: #D4C8B8;
    background: transparent;
}

/* --- Multi-Month Divider --- */
#calendar-section .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer + .dayContainer {
    border-left: 1px dashed #E8DFD0;
}

/* Inner content background */
#calendar-section .flatpickr-innerContainer,
#item-calendar-modal .flatpickr-innerContainer {
    background: #FDFBF7;
}

#calendar-section .flatpickr-rContainer,
#item-calendar-modal .flatpickr-rContainer {
    background: #FDFBF7;
}

#calendar-section .flatpickr-days,
#item-calendar-modal .flatpickr-days {
    background: #FDFBF7;
}

/* --- Mobile --- */
@media (max-width: 768px) {
    #calendar-section .flatpickr-calendar.multiMonth {
        width: 100% !important;
    }

    #calendar-section .flatpickr-day,
    #item-calendar-modal .flatpickr-day {
        height: 36px;
        line-height: 36px;
        max-width: 36px;
    }
}

/* --- Pending Booking Dot Pulse --- */
@keyframes cal-pending-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
.cal-dot-pending {
    animation: cal-pending-pulse 2s ease-in-out infinite;
}

/* ========== HOW IT WORKS PAGE ========== */
.hiw-hero {
    background: linear-gradient(135deg, #0A4A8C 0%, #004d99 50%, #00C9C9 100%);
    padding: 80px 20px 60px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.hiw-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(255,255,255,0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 30%, rgba(0, 201, 201, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.hiw-hero h1 {
    font-size: 42px;
    margin: 0 0 16px 0;
    font-weight: 800;
    letter-spacing: -0.5px;
    position: relative;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.hiw-hero p {
    font-size: 19px;
    margin: 0 0 36px 0;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    position: relative;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}

.hiw-hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}

.hiw-hero-btn {
    padding: 14px 32px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid #fff;
    transition: all 0.25s ease;
    text-decoration: none;
}

.hiw-hero-btn.owner {
    background: #fff;
    color: #0A4A8C;
}

.hiw-hero-btn.owner:hover {
    background: #e0f0ff;
    transform: translateY(-2px);
}

.hiw-hero-btn.borrower {
    background: transparent;
    color: #fff;
}

.hiw-hero-btn.borrower:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-2px);
}

/* 3-Step Overview */
.hiw-steps {
    padding: 60px 20px;
    background: #fff;
}

.hiw-steps-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.hiw-steps h2 {
    font-size: 30px;
    color: #0A4A8C;
    margin: 0 0 40px 0;
    font-weight: 700;
}

.hiw-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.hiw-step {
    padding: 30px 20px;
}

.hiw-step-number {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0A4A8C, #00C9C9);
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.hiw-step-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.hiw-step h3 {
    font-size: 18px;
    color: #0A4A8C;
    margin: 0 0 10px 0;
    font-weight: 700;
}

.hiw-step p {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Section styles */
.hiw-section {
    padding: 70px 20px;
}

.hiw-section-inner {
    max-width: 900px;
    margin: 0 auto;
}

.hiw-section h2 {
    font-size: 32px;
    margin: 0 0 12px 0;
    font-weight: 800;
}

.hiw-section .hiw-subtitle {
    font-size: 17px;
    color: #666;
    line-height: 1.7;
    margin: 0 0 40px 0;
    max-width: 650px;
}

.hiw-section.owners {
    background: #f0fafa;
}

.hiw-section.owners h2 {
    color: #00A0A0;
}

.hiw-section.borrowers {
    background: #fff;
}

.hiw-section.borrowers h2 {
    color: #0A4A8C;
}

/* Fee card */
.hiw-fee-card {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-bottom: 40px;
    border-left: 5px solid #00C9C9;
}

.hiw-fee-card h3 {
    font-size: 20px;
    color: #0A4A8C;
    margin: 0 0 16px 0;
}

.hiw-fee-card .fee-highlight {
    font-size: 28px;
    font-weight: 800;
    color: #00C9C9;
    margin: 0 0 8px 0;
}

.hiw-fee-card .fee-note {
    font-size: 14px;
    color: #999;
    margin: 0 0 24px 0;
}

.hiw-fee-example {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.hiw-fee-example .fee-math {
    font-size: 15px;
    color: #666;
    flex: 1;
    min-width: 200px;
    line-height: 1.8;
}

.hiw-fee-example .fee-result {
    background: linear-gradient(135deg, #0A4A8C, #00C9C9);
    color: #fff;
    padding: 16px 24px;
    border-radius: 10px;
    text-align: center;
    min-width: 160px;
}

.hiw-fee-example .fee-result .amount {
    font-size: 28px;
    font-weight: 800;
    display: block;
}

.hiw-fee-example .fee-result .label {
    font-size: 13px;
    opacity: 0.85;
}

/* Zero-fee highlight */
.hiw-zero-fee {
    background: linear-gradient(135deg, #0A4A8C, #004d99);
    border-radius: 16px;
    padding: 36px;
    color: #fff;
    text-align: center;
    margin-bottom: 40px;
}

.hiw-zero-fee .zero {
    font-size: 52px;
    font-weight: 900;
    display: block;
    margin-bottom: 8px;
    letter-spacing: -2px;
}

.hiw-zero-fee p {
    font-size: 17px;
    color: #fff;
    margin: 0;
    line-height: 1.6;
}

/* Icon grid for protections */
.hiw-icon-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.hiw-icon-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hiw-icon-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.hiw-icon-card .icon {
    font-size: 32px;
    margin-bottom: 12px;
    display: block;
}

.hiw-icon-card h4 {
    font-size: 16px;
    color: #0A4A8C;
    margin: 0 0 8px 0;
    font-weight: 700;
}

.hiw-icon-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Borrower icon cards on white bg need slight border */
.hiw-section.borrowers .hiw-icon-card {
    border: 1px solid #eee;
}

/* Booking timeline steps */
.hiw-timeline {
    margin-bottom: 40px;
}

.hiw-timeline-step {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 20px 0;
    position: relative;
}

.hiw-timeline-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 22px;
    top: 56px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #0A4A8C, #00C9C9);
}

.hiw-timeline-dot {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #0A4A8C;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    flex-shrink: 0;
}

.hiw-timeline-content h4 {
    font-size: 16px;
    color: #0A4A8C;
    margin: 0 0 6px 0;
    font-weight: 700;
}

.hiw-timeline-content p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Extras list */
.hiw-extras {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hiw-extra-tag {
    background: #e0f7f7;
    color: #00A0A0;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
}

.hiw-section.borrowers .hiw-extra-tag {
    background: #e0e8f0;
    color: #0A4A8C;
}

/* Trust section */
.hiw-trust {
    background: linear-gradient(135deg, #f5f7fa 0%, #e4ecf5 100%);
    padding: 60px 20px;
    text-align: center;
}

.hiw-trust-inner {
    max-width: 700px;
    margin: 0 auto;
}

.hiw-trust h2 {
    font-size: 28px;
    color: #0A4A8C;
    margin: 0 0 20px 0;
    font-weight: 700;
}

.hiw-trust p {
    font-size: 16px;
    color: #334155;
    line-height: 1.8;
    margin: 0 0 12px 0;
}

.hiw-trust-badges {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.hiw-trust-badge {
    text-align: center;
}

.hiw-trust-badge .badge-icon {
    font-size: 36px;
    display: block;
    margin-bottom: 8px;
}

.hiw-trust-badge .badge-label {
    font-size: 13px;
    color: #334155;
    font-weight: 600;
}

/* CTA footer */
.hiw-cta {
    background: linear-gradient(135deg, #0A4A8C 0%, #00C9C9 100%);
    padding: 70px 20px;
    text-align: center;
    color: #fff;
}

.hiw-cta h2 {
    font-size: 32px;
    margin: 0 0 16px 0;
    font-weight: 800;
}

.hiw-cta p {
    font-size: 17px;
    color: #fff;
    margin: 0 0 36px 0;
}

.hiw-cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.hiw-cta-btn {
    padding: 14px 36px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.25s ease;
    text-decoration: none;
}

.hiw-cta-btn.primary {
    background: #fff;
    color: #0A4A8C;
}

.hiw-cta-btn.primary:hover {
    background: #e0f0ff;
    transform: translateY(-2px);
}

.hiw-cta-btn.secondary {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}

.hiw-cta-btn.secondary:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .hiw-hero {
        padding: 60px 16px 40px;
    }

    .hiw-hero h1 {
        font-size: 30px;
    }

    .hiw-hero p {
        font-size: 16px;
    }

    .hiw-steps-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .hiw-step {
        padding: 20px;
        background: #f8f9fa;
        border-radius: 12px;
    }

    .hiw-icon-grid {
        grid-template-columns: 1fr;
    }

    .hiw-section {
        padding: 50px 16px;
    }

    .hiw-section h2 {
        font-size: 26px;
    }

    .hiw-fee-example {
        flex-direction: column;
    }

    .hiw-fee-example .fee-result {
        width: 100%;
    }

    .hiw-zero-fee .zero {
        font-size: 40px;
    }

    .hiw-cta {
        padding: 50px 16px;
    }

    .hiw-cta h2 {
        font-size: 26px;
    }

    .hiw-trust-badges {
        gap: 20px;
    }
}

/* ====================== FAQ PAGE ====================== */

.faq-hero {
    background: linear-gradient(135deg, #0A4A8C 0%, #004d99 50%, #007088 100%);
    padding: 60px 20px 40px;
    text-align: center;
    color: #fff;
    position: relative;
}

.faq-hero h1 {
    font-size: 36px;
    margin: 0 0 12px 0;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.faq-hero p {
    font-size: 17px;
    margin: 0;
    color: #fff;
    font-weight: 500;
    text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}

/* Category Pills */
.faq-search-wrap {
    display: flex;
    justify-content: center;
    padding: 24px 20px 0;
    background: #f8f9fa;
}

.faq-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 520px;
    padding: 12px 18px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 50px;
    transition: border-color 0.2s;
}

.faq-search-bar:focus-within {
    border-color: #00C9C9;
}

.faq-search-icon {
    font-size: 18px;
    flex-shrink: 0;
    opacity: 0.5;
}

.faq-search-bar input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    color: #333;
    background: transparent;
}

.faq-search-bar input::placeholder {
    color: #aaa;
}

.faq-search-clear {
    background: none;
    border: none;
    font-size: 22px;
    color: #999;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.faq-search-clear:hover {
    color: #333;
}

.faq-item.faq-hidden {
    display: none;
}

.faq-group.faq-group-hidden {
    display: none;
}

.faq-categories {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px 20px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.faq-category-btn {
    padding: 8px 20px;
    border-radius: 50px;
    border: 2px solid #00C9C9;
    background: #fff;
    color: #0A4A8C;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.faq-category-btn:hover {
    background: #00C9C9;
    color: #fff;
    transform: translateY(-1px);
}

/* FAQ Groups */
.faq-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

.faq-group {
    margin-bottom: 40px;
}

.faq-group-title {
    font-size: 22px;
    font-weight: 700;
    color: #0A4A8C;
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 3px solid #00C9C9;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* FAQ Items (Accordion) */
.faq-item {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.faq-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    cursor: pointer;
    gap: 16px;
    user-select: none;
}

.faq-question h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #0A4A8C;
    line-height: 1.4;
}

.faq-chevron {
    font-size: 20px;
    font-weight: 700;
    color: #00C9C9;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.faq-item.active .faq-chevron {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-answer-inner {
    padding: 0 20px 20px 20px;
    color: #555;
    font-size: 15px;
    line-height: 1.7;
}

.faq-answer-inner p {
    margin: 0 0 10px 0;
    color: #555;
}

.faq-answer-inner p:last-child {
    margin-bottom: 0;
}

.faq-answer-inner strong {
    color: #0A4A8C;
}

.faq-answer-inner ul,
.faq-answer-inner ol {
    margin: 8px 0;
    padding-left: 20px;
}

.faq-answer-inner li {
    margin-bottom: 6px;
    color: #555;
}

.faq-item.active .faq-answer {
    max-height: 1200px;
}

/* Guide screenshot thumbnails */
.guide-thumb-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.guide-thumb {
    height: 160px;
    border-radius: 8px;
    border: 2px solid #e9ecef;
    object-fit: cover;
    cursor: zoom-in;
    transition: transform 0.2s, box-shadow 0.2s;
}

.guide-thumb:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.faq-item.active .faq-question {
    border-bottom: 1px solid #f0f0f0;
}

/* FAQ CTA */
.faq-cta {
    text-align: center;
    padding: 60px 20px;
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
}

.faq-cta h2 {
    font-size: 28px;
    margin: 0 0 12px 0;
    color: #0A4A8C;
}

.faq-cta p {
    color: #666;
    font-size: 16px;
    margin: 0 0 30px 0;
}

.faq-cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.faq-cta-btn {
    padding: 14px 32px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: 2px solid #0A4A8C;
}

.faq-cta-btn.primary {
    background: #0A4A8C;
    color: #fff;
}

.faq-cta-btn.primary:hover {
    background: #004d99;
    border-color: #004d99;
    transform: translateY(-2px);
}

.faq-cta-btn.secondary {
    background: transparent;
    color: #0A4A8C;
}

.faq-cta-btn.secondary:hover {
    background: #0A4A8C;
    color: #fff;
    transform: translateY(-2px);
}

/* FAQ Responsive */
@media (max-width: 768px) {
    .faq-search-wrap {
        padding: 18px 16px 0;
    }

    .faq-search-bar {
        padding: 10px 14px;
    }

    .faq-search-bar input {
        font-size: 15px;
    }

    .faq-hero {
        padding: 50px 16px 30px;
    }

    .faq-hero h1 {
        font-size: 28px;
    }

    .faq-hero p {
        font-size: 15px;
    }

    .faq-categories {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding: 16px;
        -webkit-overflow-scrolling: touch;
    }

    .faq-category-btn {
        font-size: 13px;
        padding: 6px 16px;
    }

    .faq-content {
        padding: 24px 16px;
    }

    .faq-group-title {
        font-size: 19px;
    }

    .faq-question {
        padding: 14px 16px;
    }

    .faq-question h4 {
        font-size: 15px;
    }

    .faq-answer-inner {
        padding: 0 16px 16px 16px;
        font-size: 14px;
    }

    .faq-cta {
        padding: 40px 16px;
    }

    .faq-cta h2 {
        font-size: 24px;
    }
}

/* ======================== COMMUNITY GUIDELINES PAGE ======================== */

.guidelines-hero {
    background: linear-gradient(135deg, #0A4A8C 0%, #1a5276 50%, #2e7d32 100%);
    padding: 60px 20px 40px;
    text-align: center;
    color: #fff;
    position: relative;
}

.guidelines-hero h1 {
    font-size: 36px;
    margin: 0 0 12px 0;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.guidelines-hero p {
    font-size: 17px;
    margin: 0;
    color: #fff;
    font-weight: 500;
    text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}

/* Wear and tear two-column grid */
.wear-tear-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.wear-tear-column {
    border-radius: 12px;
    padding: 20px;
}

.wear-tear-column.normal {
    background: #f1f8e9;
    border-left: 4px solid #4caf50;
}

.wear-tear-column.not-normal {
    background: #fce4ec;
    border-left: 4px solid #e53935;
}

/* Photo documentation grid responsive */
@media (max-width: 768px) {
    .guidelines-hero {
        padding: 50px 16px 30px;
    }

    .guidelines-hero h1 {
        font-size: 28px;
    }

    .guidelines-hero p {
        font-size: 15px;
    }

    .wear-tear-grid {
        grid-template-columns: 1fr;
    }

    #gl-photos .faq-group + div [style*="grid-template-columns"] {
        grid-template-columns: 1fr;
    }
}