/*
|--------------------------------------------------------------------------
| App-Feel — universal mobile UX polish for the storefront
|--------------------------------------------------------------------------
|
| Loaded site-wide AFTER store.css so its rules win in conflicts.
| Focus areas:
|   1. Touch targets ≥ 44px (Apple HIG / Material guidance)
|   2. Native-feeling scroll + tap feedback
|   3. Safe-area-inset support for notched phones
|   4. Disable hover-lift effects on touch devices (no "stuck hover")
|   5. Bottom-sheet pattern for filters / sort
|   6. Loading skeletons + smoother transitions
|   7. Better mobile typography + spacing
|
*/

/* ============================================================
   1. UNIVERSAL TOUCH POLISH
   ============================================================ */

/* Remove the 300ms tap delay + grey highlight on iOS */
html { -webkit-tap-highlight-color: transparent; }
body { -webkit-text-size-adjust: 100%; }

/* Buttons / links: minimum 44x44 hit area on touch screens */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .nav-link,
    .dropdown-item,
    .store-icon-btn,
    .list-group-item-action {
        min-height: 44px;
    }
    .btn-sm {
        min-height: 38px;
    }

    /* Disable hover transforms — they cause "stuck hover" after tap */
    .product-card:hover,
    .flash-product-card:hover,
    .about-team-card:hover,
    .about-value-card:hover,
    .coupon-card:hover,
    .promo-banner:hover,
    .footer-social-link:hover {
        transform: none !important;
        box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.04)) !important;
    }

    /* Replace hover with tap-down feedback (briefly press) */
    .btn:active,
    .product-card:active,
    .nav-link:active,
    .list-group-item-action:active {
        transform: scale(0.97);
        transition: transform .08s ease;
    }
}

/* Safe-area for notched / rounded-corner phones (iPhone, modern Android) */
@supports (padding: max(0px)) {
    .bottom-nav,
    .mobile-cta-bar {
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
    .store-header,
    .announcement-bar {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
}

/* Smooth momentum scroll for any horizontally-scrolling container */
.swiper,
.pdp-thumbs-col,
.scroll-snap-x {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* ============================================================
   2. MOBILE PRODUCT LISTING — bigger cards, drawer filters
   ============================================================ */

@media (max-width: 767.98px) {
    /* Filter sidebar slides in as a bottom sheet on mobile */
    .filters-card,
    .filters-sidebar,
    [data-mobile-filters="card"] {
        display: none;
    }
    body.filters-open .filters-card {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1090;
        background: var(--card-bg, #fff);
        overflow-y: auto;
        padding: 16px 16px max(80px, env(safe-area-inset-bottom)) 16px;
        animation: sheetSlideUp 0.25s ease forwards;
    }
    .filters-drawer-backdrop {
        display: none;
    }
    body.filters-open .filters-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1080;
        background: rgba(0, 0, 0, 0.45);
        animation: fadeIn 0.2s ease forwards;
    }

    /* Sticky mobile toolbar — Filters + Sort always reachable */
    .mobile-listing-toolbar {
        position: sticky;
        top: 0;
        z-index: 100;
        background: var(--card-bg, #fff);
        border-bottom: 1px solid var(--border-color, #e8e0d6);
        padding: 8px 12px;
        display: flex;
        gap: 8px;
        margin: -12px -12px 12px;
    }
    .mobile-listing-toolbar .btn {
        flex: 1;
        font-size: .85rem;
        font-weight: 600;
        border-radius: 12px;
        background: var(--surface, #f5f0eb);
        border: 1px solid var(--border-color, #e8e0d6);
        color: var(--body-color);
    }

    /* Product card — taller image, cleaner text */
    .product-card {
        border-radius: 14px;
    }
    .product-image,
    .product-card-img {
        aspect-ratio: 1;
    }
    .product-info,
    .product-card-body {
        padding: 10px 12px 12px;
    }
    .product-name,
    .product-card-title {
        font-size: 0.86rem;
        line-height: 1.3;
        font-weight: 600;
    }
    .product-price .price-sale,
    .price-current {
        font-size: 0.95rem;
        font-weight: 700;
    }
    .product-price .price-old,
    .price-original {
        font-size: 0.72rem;
    }
    .product-add-btn {
        width: 36px;
        height: 36px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
    }
}

@keyframes sheetSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================
   3. PRODUCT DETAIL — sticky bottom add-to-cart bar
   ============================================================ */

.pdp-mobile-cta-bar {
    display: none;
}
@media (max-width: 991.98px) {
    .pdp-mobile-cta-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 56px; /* sit above the bottom-nav (56px tall) */
        z-index: 1040;
        background: var(--card-bg, #fff);
        border-top: 1px solid var(--border-color, #e8e0d6);
        padding: 10px 12px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        gap: 8px;
        box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.06);
        animation: ctaSlideUp 0.3s ease forwards;
    }
    .pdp-mobile-cta-bar .pdp-cta-price {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .pdp-mobile-cta-bar .pdp-cta-price .price {
        font-weight: 800;
        font-size: 1.1rem;
        color: var(--heading-color, #1a1a2e);
    }
    .pdp-mobile-cta-bar .pdp-cta-price .label {
        font-size: 0.7rem;
        color: var(--text-muted, #94a3b8);
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }
    .pdp-mobile-cta-bar .pdp-cta-add {
        flex: 2;
        background: var(--primary);
        color: #fff;
        border: 0;
        border-radius: 14px;
        font-weight: 700;
        padding: 12px 18px;
        font-size: 0.95rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    .pdp-mobile-cta-bar .pdp-cta-add:disabled {
        opacity: 0.6;
    }

    /* Push body content up so it isn't hidden behind the CTA bar */
    body.has-pdp-cta {
        padding-bottom: 130px;
    }
}
@keyframes ctaSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* ============================================================
   4. CHECKOUT — mobile-friendly form
   ============================================================ */

@media (max-width: 767.98px) {
    .checkout-form .form-control,
    .checkout-form .form-select {
        font-size: 16px;          /* prevents iOS auto-zoom on focus */
        padding: 12px 14px;
        border-radius: 10px;
    }
    .checkout-summary {
        position: sticky;
        bottom: 56px;             /* sit above bottom-nav */
        z-index: 50;
    }
}

/* ============================================================
   5. ACCOUNT PAGES — better mobile sidebar / content
   ============================================================ */

@media (max-width: 991.98px) {
    /* The account sidebar that's `position: sticky` on desktop —
       on mobile, undo the sticky so it doesn't sit awkwardly. */
    .col-lg-3.mb-4.mb-lg-0 .card[style*="sticky"] {
        position: static !important;
    }
    /* Account dashboard banners get tighter mobile padding */
    .col-lg-9 .card[style*="linear-gradient"] {
        font-size: .92rem;
    }
}

/* ============================================================
   6. UNIVERSAL LOADING + EMPTY STATES
   ============================================================ */

.skeleton {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.4s ease-in-out infinite;
    border-radius: 8px;
}
@keyframes skeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
}

/* ============================================================
   7. NICER ACTIVE STATES + ANIMATIONS
   ============================================================ */

.btn,
.product-card,
a.list-group-item-action {
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* Subtle scale on form-control focus to confirm input is active */
.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.18);
    border-color: var(--primary);
}