/* ═══════════════════════════════════════════════════════
   TezAl.shop — iPhone Design System
   Apple Human Interface Guidelines inspired UI layer
   ═══════════════════════════════════════════════════════ */

/* ── Apple Design Tokens ─────────────────────────────── */
:root {
    /* SF Pro font stack */
    --apple-font: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                  "SF Pro Text", "Inter", "Helvetica Neue", sans-serif;

    /* Apple easing curves */
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-snappy:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-smooth:   cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce:   cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Apple spacing (8px grid) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;

    /* Apple radii */
    --r-xs:  6px;
    --r-sm:  10px;
    --r-md:  14px;
    --r-lg:  18px;
    --r-xl:  24px;
    --r-2xl: 32px;
    --r-pill: 999px;

    /* Apple shadows (light) */
    --shadow-xs:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-sm:  0 2px 8px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
    --shadow-md:  0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
    --shadow-lg:  0 8px 32px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.04);
    --shadow-xl:  0 20px 60px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.06);

    /* Skeleton shimmer light */
    --skel-base:    #e8ecf0;
    --skel-shine:   #f4f6f8;

    /* Haptic color (button press flash) */
    --haptic-light: rgba(255,255,255,.15);
    --haptic-dark:  rgba(0,0,0,.08);
}

[data-theme="dark"] {
    --shadow-xs:  0 1px 3px rgba(0,0,0,.25);
    --shadow-sm:  0 2px 8px rgba(0,0,0,.30);
    --shadow-md:  0 4px 16px rgba(0,0,0,.35);
    --shadow-lg:  0 8px 32px rgba(0,0,0,.40);
    --shadow-xl:  0 20px 60px rgba(0,0,0,.50);

    --skel-base:  #1c2333;
    --skel-shine: #253048;
}

/* ── Font smoothing (Apple-grade) ────────────────────── */
body, input, button, select, textarea {
    font-family: var(--apple-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ════════════════════════════════════════════════════════
   1. PAGE ENTRANCE TRANSITION
   ════════════════════════════════════════════════════════ */
@keyframes pageEnter {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pageLeave {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-8px) scale(.98); }
}

main {
    animation: pageEnter .38s var(--ease-snappy) both;
}

/* Page-leave class added by JS before navigation */
body.page-leaving main {
    animation: pageLeave .22s var(--ease-smooth) both;
    pointer-events: none;
}

/* ════════════════════════════════════════════════════════
   2. SKELETON LOADING
   ════════════════════════════════════════════════════════ */
@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}

.skeleton,
.skel {
    background: linear-gradient(
        90deg,
        var(--skel-base)  0%,
        var(--skel-shine) 45%,
        var(--skel-base)  90%
    );
    background-size: 800px 100%;
    animation: shimmer 1.6s ease-in-out infinite;
    border-radius: var(--r-sm);
    color: transparent !important;
    pointer-events: none;
}
.skeleton * { visibility: hidden; }

/* Skeleton card — full listing card placeholder */
.skeleton-card {
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--skel-base);
}
.skeleton-card .skel-img  { height: 180px; background: linear-gradient(90deg, var(--skel-base) 0%, var(--skel-shine) 45%, var(--skel-base) 90%); background-size: 800px 100%; animation: shimmer 1.6s ease-in-out infinite; }
.skeleton-card .skel-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.skeleton-card .skel-line { height: 14px; border-radius: var(--r-xs); background: linear-gradient(90deg, var(--skel-base) 0%, var(--skel-shine) 45%, var(--skel-base) 90%); background-size: 800px 100%; animation: shimmer 1.6s ease-in-out infinite; }
.skeleton-card .skel-line.short { width: 55%; }
.skeleton-card .skel-line.med   { width: 75%; }
.skeleton-card .skel-line.price { width: 40%; height: 18px; }

/* Staggered shimmer delays */
.skeleton-card:nth-child(2) .skel-img { animation-delay: .1s; }
.skeleton-card:nth-child(3) .skel-img { animation-delay: .2s; }
.skeleton-card:nth-child(4) .skel-img { animation-delay: .3s; }
.skeleton-card:nth-child(5) .skel-img { animation-delay: .4s; }
.skeleton-card:nth-child(6) .skel-img { animation-delay: .5s; }

/* ════════════════════════════════════════════════════════
   3. MICRO-INTERACTIONS — BUTTONS
   ════════════════════════════════════════════════════════ */

/* Generic press state — all buttons & links */
button,
a,
[role="button"] {
    -webkit-tap-highlight-color: transparent;
    tap-action: manipulation;
}

/* Active press scale */
button:not(:disabled):active,
.btn:active,
.hdr-cta:active,
.mob-cta-btn:active,
.mob-nav-item:active,
.ls-item:active {
    transform: scale(0.97);
    transition: transform .1s var(--ease-snappy) !important;
}

/* Ripple effect base */
.ripple-host {
    position: relative;
    overflow: hidden;
}
@keyframes rippleOut {
    0%   { transform: scale(0);   opacity: .4; }
    80%  { transform: scale(2.8); opacity: .08; }
    100% { transform: scale(3);   opacity: 0; }
}
.ripple-circle {
    position: absolute;
    border-radius: 50%;
    background: var(--haptic-light);
    width: 60px; height: 60px;
    margin-top: -30px; margin-left: -30px;
    pointer-events: none;
    animation: rippleOut .5s var(--ease-smooth) forwards;
}
[data-theme="light"] .ripple-circle { background: var(--haptic-dark); }

/* CTA button — enhanced */
.hdr-cta,
.mob-cta-btn,
.btn-primary,
.btn-orange {
    position: relative;
    overflow: hidden;
    transition: transform .15s var(--ease-spring),
                box-shadow .15s var(--ease-smooth),
                background .15s;
    will-change: transform;
}
.hdr-cta:hover,
.mob-cta-btn:hover,
.btn-primary:hover,
.btn-orange:hover {
    transform: translateY(-2px) scale(1.01);
}

/* Icon button pulse on notification */
@keyframes bellPulse {
    0%, 100% { transform: rotate(0); }
    15%  { transform: rotate(12deg); }
    30%  { transform: rotate(-10deg); }
    45%  { transform: rotate(8deg); }
    60%  { transform: rotate(-6deg); }
    75%  { transform: rotate(4deg); }
}
.hdr-icon-btn.has-notif i {
    animation: bellPulse 2.5s ease-in-out 1s 2;
    display: inline-block;
}

/* ════════════════════════════════════════════════════════
   4. MICRO-INTERACTIONS — CARDS
   ════════════════════════════════════════════════════════ */

/* Listing card lift */
.listing-card,
.product-card,
.auction-card,
.shop-card,
[class*="listing-card"],
[class*="product-card"] {
    transition: transform .22s var(--ease-spring),
                box-shadow .22s var(--ease-smooth);
    will-change: transform;
    border-radius: var(--r-lg) !important;
}
.listing-card:hover,
.product-card:hover,
.auction-card:hover,
.shop-card:hover,
[class*="listing-card"]:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--shadow-xl);
}

/* Card image zoom on hover */
.listing-card img,
[class*="listing-card"] img,
[class*="product-card"] img {
    transition: transform .4s var(--ease-smooth);
}
.listing-card:hover img,
[class*="listing-card"]:hover img,
[class*="product-card"]:hover img {
    transform: scale(1.05);
}

/* ════════════════════════════════════════════════════════
   5. SCROLL-TRIGGERED REVEAL
   ════════════════════════════════════════════════════════ */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s var(--ease-snappy),
                transform .5s var(--ease-snappy);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered children */
.reveal-group > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .45s var(--ease-snappy),
                transform .45s var(--ease-snappy);
}
.reveal-group.visible > *:nth-child(1) { opacity:1; transform:none; transition-delay:.05s; }
.reveal-group.visible > *:nth-child(2) { opacity:1; transform:none; transition-delay:.10s; }
.reveal-group.visible > *:nth-child(3) { opacity:1; transform:none; transition-delay:.15s; }
.reveal-group.visible > *:nth-child(4) { opacity:1; transform:none; transition-delay:.20s; }
.reveal-group.visible > *:nth-child(5) { opacity:1; transform:none; transition-delay:.25s; }
.reveal-group.visible > *:nth-child(6) { opacity:1; transform:none; transition-delay:.30s; }
.reveal-group.visible > *:nth-child(n+7) { opacity:1; transform:none; transition-delay:.35s; }

/* ════════════════════════════════════════════════════════
   6. INPUTS — Apple-style focus
   ════════════════════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
textarea,
select {
    transition: border-color .18s, box-shadow .18s, background .18s;
    border-radius: var(--r-md) !important;
    outline: none !important;
}
input:focus,
textarea:focus,
select:focus {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 4px rgba(249,115,22,.12) !important;
}

/* ════════════════════════════════════════════════════════
   7. IMAGE PROGRESSIVE LOADING (blur-up)
   ════════════════════════════════════════════════════════ */
img.lazy {
    filter: blur(8px) saturate(.6);
    transform: scale(1.04);
    transition: filter .5s var(--ease-smooth),
                transform .5s var(--ease-smooth);
}
img.lazy.loaded {
    filter: blur(0) saturate(1);
    transform: scale(1);
}

/* ════════════════════════════════════════════════════════
   8. LOADER — iOS spinner style
   ════════════════════════════════════════════════════════ */
@keyframes iosSpin {
    0%   { opacity: 1; }
    100% { opacity: .15; }
}

.ios-spinner {
    display: inline-block;
    position: relative;
    width: 24px; height: 24px;
}
.ios-spinner span {
    position: absolute;
    top: 50%; left: 50%;
    width: 2px; height: 7px;
    margin-top: -9px; margin-left: -1px;
    border-radius: 2px;
    background: currentColor;
    transform-origin: 1px 9px;
    animation: iosSpin .8s linear infinite;
}
.ios-spinner span:nth-child(1)  { transform: rotate(  0deg); animation-delay:  -.7s; }
.ios-spinner span:nth-child(2)  { transform: rotate( 45deg); animation-delay:  -.6s; }
.ios-spinner span:nth-child(3)  { transform: rotate( 90deg); animation-delay:  -.5s; }
.ios-spinner span:nth-child(4)  { transform: rotate(135deg); animation-delay:  -.4s; }
.ios-spinner span:nth-child(5)  { transform: rotate(180deg); animation-delay:  -.3s; }
.ios-spinner span:nth-child(6)  { transform: rotate(225deg); animation-delay:  -.2s; }
.ios-spinner span:nth-child(7)  { transform: rotate(270deg); animation-delay:  -.1s; }
.ios-spinner span:nth-child(8)  { transform: rotate(315deg); animation-delay:     0s; }

/* ════════════════════════════════════════════════════════
   9. PAGE LOADING INDICATOR (top progress bar)
   ════════════════════════════════════════════════════════ */
#page-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    background: linear-gradient(90deg, #f97316, #fb923c, #f97316);
    background-size: 200% 100%;
    z-index: 9999;
    width: 0%;
    opacity: 0;
    border-radius: 0 3px 3px 0;
    transition: width .3s var(--ease-smooth), opacity .2s;
    animation: progressShimmer 1.5s ease-in-out infinite;
}
@keyframes progressShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
#page-progress.loading {
    opacity: 1;
}
#page-progress.done {
    width: 100% !important;
    opacity: 0;
    transition: width .1s, opacity .4s .1s;
}

/* ════════════════════════════════════════════════════════
   10. TOAST NOTIFICATIONS (iOS style)
   ════════════════════════════════════════════════════════ */
#toast-container {
    position: fixed;
    bottom: 24px; left: 50%;
    transform: translateX(-50%);
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(16px) scale(.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-10px) scale(.92); }
}

.ios-toast {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: var(--r-pill);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: #fff;
    background: rgba(20,20,20,.88);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: var(--shadow-xl);
    pointer-events: auto;
    animation: toastIn .3s var(--ease-spring) both;
    max-width: 90vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ios-toast.success { background: rgba(16,185,129,.9); }
.ios-toast.error   { background: rgba(239, 68, 68,.9); }
.ios-toast.warn    { background: rgba(245,158,11,.9); }
.ios-toast.leaving { animation: toastOut .25s var(--ease-smooth) both; }

[data-theme="light"] .ios-toast {
    background: rgba(30,30,30,.85);
}

/* ════════════════════════════════════════════════════════
   11. TYPOGRAPHY — Apple type scale
   ════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: -.025em;
    line-height: 1.25;
}
h1 { font-size: clamp(26px, 5vw, 40px); font-weight: 800; }
h2 { font-size: clamp(20px, 4vw, 30px); font-weight: 700; }
h3 { font-size: clamp(16px, 3vw, 22px); font-weight: 700; }

p {
    line-height: 1.65;
}

/* ════════════════════════════════════════════════════════
   12. INTERACTIVE STATES — Badge, chips
   ════════════════════════════════════════════════════════ */

/* Price badge pulse on VIP listings */
@keyframes priceGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(249,115,22,.4); }
    50%       { box-shadow: 0 0 0 6px rgba(249,115,22,.0); }
}
.listing-card.is-vip .price,
[class*="listing-card"].is-vip [class*="price"] {
    animation: priceGlow 2.5s ease-in-out infinite;
}

/* Favorite button heartbeat */
@keyframes heartPop {
    0%  { transform: scale(1); }
    40% { transform: scale(1.35); }
    70% { transform: scale(.9); }
    100%{ transform: scale(1); }
}
.fav-btn.active i,
.favorite-btn.active i,
[class*="fav-btn"].active i {
    animation: heartPop .4s var(--ease-spring) both;
    color: #ef4444 !important;
}

/* ════════════════════════════════════════════════════════
   13. MODAL — iOS sheet style
   ════════════════════════════════════════════════════════ */
@keyframes sheetUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@keyframes sheetDown {
    from { transform: translateY(0);    opacity: 1; }
    to   { transform: translateY(100%); opacity: 0; }
}

.ios-sheet {
    animation: sheetUp .35s var(--ease-spring) both;
    border-radius: var(--r-2xl) var(--r-2xl) 0 0 !important;
}
.ios-sheet.closing {
    animation: sheetDown .25s var(--ease-smooth) both;
}

/* Drag handle */
.ios-sheet-handle {
    width: 36px;
    height: 4px;
    border-radius: var(--r-pill);
    background: rgba(128,128,128,.35);
    margin: 10px auto 6px;
}

/* ════════════════════════════════════════════════════════
   14. GLOBAL TRANSITIONS — smoothen everything
   ════════════════════════════════════════════════════════ */
a {
    transition: color .15s, opacity .15s, background .15s;
}
button, input, select, textarea {
    transition: border-color .18s, box-shadow .18s, background .18s,
                color .18s, transform .12s;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    main { animation: none; }
    .reveal, .reveal-group > * { opacity: 1; transform: none; }
}

/* ════════════════════════════════════════════════════════
   15. DARK MODE — glass morphism cards
   ════════════════════════════════════════════════════════ */
[data-theme="dark"] .listing-card,
[data-theme="dark"] [class*="listing-card"],
[data-theme="dark"] .product-card {
    background: rgba(17,24,39,.75);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(255,255,255,.06);
}

/* ════════════════════════════════════════════════════════
   16. MOBILE — touch optimizations
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Increase touch targets */
    button, [role="button"], a.mob-nav-item {
        min-height: 44px;
    }

    /* Smoother momentum scroll */
    .mob-drawer,
    .ls-dropdown,
    [class*="scroll"] {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Card lift reduced on mobile (performance) */
    .listing-card:hover,
    [class*="listing-card"]:hover {
        transform: none;
        box-shadow: var(--shadow-md);
    }

    /* Active feedback instead */
    .listing-card:active,
    [class*="listing-card"]:active {
        transform: scale(.98);
        transition: transform .08s !important;
    }
}