/* ============================================================
   Mobile App PWA Pro - Core UI Stylesheet
   ============================================================ */

/* CRITICAL FIX: Force `hidden` HTML attribute to always win over display rules.
   Without this, our overlays with `display: flex` would override [hidden]'s
   `display: none`, leaving invisible elements stuck on top of the page,
   blocking every click. */
[hidden] { display: none !important; }

:root {
    --mapp-theme: #0ea5e9;
    --mapp-bg: #0f172a;
    --mapp-accent: #22d3ee;
    --mapp-text: #fff;
    --mapp-text-dim: rgba(255,255,255,.65);
    --mapp-card: rgba(255,255,255,.12);
    --mapp-border: rgba(255,255,255,.18);
    --mapp-shadow: 0 8px 32px rgba(0,0,0,.18);
    --mapp-blur: 18px;
    --mapp-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mapp-safe-top: env(safe-area-inset-top, 0px);
    --mapp-header-h: 56px;
    --mapp-nav-h: 78px;
}

@media (prefers-color-scheme: light) {
    :root:not([data-dark="true"]) {
        --mapp-text: #0f172a;
        --mapp-text-dim: rgba(15,23,42,.7);
        --mapp-card: rgba(255,255,255,.7);
        --mapp-border: rgba(0,0,0,.08);
    }
}
:root[data-dark="true"] {
    --mapp-text: #fff;
    --mapp-text-dim: rgba(255,255,255,.65);
    --mapp-card: rgba(30,41,59,.7);
    --mapp-border: rgba(255,255,255,.1);
}

/* Hide everything on desktop */
@media (min-width: 1025px) {
    .mapp-bottom-nav, .mapp-app-header, .mapp-splash, .mapp-drawer, .mapp-drawer-overlay,
    .mapp-onboarding, .mapp-install-banner, .mapp-pull-refresh, .mapp-ios-hint,
    .mapp-mini-cart, .mapp-mini-cart-overlay, .mapp-quickview-overlay, .mapp-sticky-atc,
    .mapp-transition-overlay, .mapp-chat-fab, .mapp-toast {
        display: none !important;
    }
    body { padding-bottom: 0 !important; padding-top: 0 !important; }
}

@media (max-width: 1024px) {
    body {
        padding-bottom: calc(var(--mapp-nav-h) + var(--mapp-safe-bottom));
        padding-top: calc(var(--mapp-header-h) + var(--mapp-safe-top));
    }
}

/* ============================================================
   APP HEADER
============================================================ */
.mapp-app-header {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 9990;
    height: calc(var(--mapp-header-h) + var(--mapp-safe-top));
    padding-top: var(--mapp-safe-top);
    contain: layout style;
}
.mapp-header-glass {
    position: absolute; inset: 0;
    background: var(--mapp-card);
    backdrop-filter: blur(var(--mapp-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--mapp-blur)) saturate(180%);
    border-bottom: 1px solid var(--mapp-border);
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.mapp-header-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: var(--mapp-header-h);
    padding: 0 12px;
}
.mapp-header-left { justify-self: start; display: flex; gap: 6px; }
.mapp-header-right { justify-self: end; display: flex; gap: 6px; }
.mapp-header-title { justify-self: center; max-width: 50vw; }
.mapp-header-brand, .mapp-header-page-title {
    font-size: 16px; font-weight: 600; color: var(--mapp-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mapp-header-btn {
    width: 40px; height: 40px;
    background: transparent;
    border: none; border-radius: 12px;
    color: var(--mapp-text);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    transition: background .2s;
}
.mapp-header-btn:hover, .mapp-header-btn:active {
    background: var(--mapp-card);
}
.mapp-header-btn svg { width: 22px; height: 22px; }
.mapp-header-badge {
    position: absolute; top: 4px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff; font-size: 10px; font-weight: 700;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--mapp-bg);
}
html[dir="rtl"] .mapp-header-badge { left: 4px; right: auto; }
html[dir="ltr"] .mapp-header-badge { right: 4px; left: auto; }
.mapp-header-badge:empty { display: none; }

/* ============================================================
   SPLASH
============================================================ */
.mapp-splash {
    position: fixed; inset: 0; z-index: 999999;
    background: linear-gradient(135deg, var(--mapp-bg), color-mix(in srgb, var(--mapp-theme) 40%, var(--mapp-bg)));
    display: flex; align-items: center; justify-content: center;
    transition: opacity .5s ease, visibility .5s ease;
    overflow: hidden;
    contain: layout style paint;
    /* Safety net: if JS fails to hide it, the splash disappears on its own
       after 4 seconds. Otherwise, a JS error or blocked script would leave
       it covering the page indefinitely and freezing every click. */
    animation: mappSplashAutoHide 4s forwards;
}
@keyframes mappSplashAutoHide {
    0%, 75% { opacity: 1; visibility: visible; pointer-events: auto; }
    100% { opacity: 0; visibility: hidden; pointer-events: none; }
}
.mapp-splash.is-hidden {
    animation: none;
    opacity: 0; visibility: hidden; pointer-events: none;
}
.mapp-splash-inner {
    position: relative; text-align: center; color: #fff; z-index: 2;
    animation: mappSplashIn .5s ease;
}
.mapp-splash-glow {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 320px; height: 320px;
    background: radial-gradient(circle, var(--mapp-accent) 0%, transparent 70%);
    opacity: .35; filter: blur(50px);
    animation: mappPulse 3s ease-in-out infinite;
    z-index: 1; will-change: transform, opacity;
}
.mapp-splash-logo {
    width: 100px; height: 100px; margin: 0 auto 22px;
    border-radius: 26px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(var(--mapp-blur));
    -webkit-backdrop-filter: blur(var(--mapp-blur));
    border: 1px solid rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.mapp-splash-logo img { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; }
.mapp-splash-title { font-size: 22px; font-weight: 700; margin: 0 0 26px; color: #fff; }
.mapp-splash-loader { display: flex; gap: 7px; justify-content: center; }
.mapp-splash-loader span {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--mapp-accent);
    animation: mappBounce 1.4s ease-in-out infinite;
}
.mapp-splash-loader span:nth-child(2) { animation-delay: .2s; }
.mapp-splash-loader span:nth-child(3) { animation-delay: .4s; }
@keyframes mappSplashIn { from{opacity:0;transform:translateY(15px)} to{opacity:1;transform:translateY(0)} }
@keyframes mappPulse { 0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.35} 50%{transform:translate(-50%,-50%) scale(1.15);opacity:.5} }
@keyframes mappBounce { 0%,80%,100%{transform:scale(.6);opacity:.4} 40%{transform:scale(1);opacity:1} }

/* ============================================================
   BOTTOM NAV
============================================================ */
.mapp-bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 9988;
    padding: 8px 12px calc(8px + var(--mapp-safe-bottom));
    pointer-events: none;
    contain: layout style;
}
.mapp-nav-glass {
    position: absolute;
    inset: 8px 12px calc(8px + var(--mapp-safe-bottom));
    background: var(--mapp-card);
    backdrop-filter: blur(var(--mapp-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--mapp-blur)) saturate(180%);
    border: 1px solid var(--mapp-border);
    border-radius: 22px;
    box-shadow: var(--mapp-shadow), inset 0 1px 0 rgba(255,255,255,.2);
}
.mapp-nav-list {
    position: relative;
    display: flex; align-items: center; justify-content: space-around;
    margin: 0; padding: 10px 8px; list-style: none;
    pointer-events: auto;
}
.mapp-nav-item { flex: 1; text-align: center; }
.mapp-nav-link {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 6px 4px;
    text-decoration: none !important;
    color: var(--mapp-text-dim) !important;
    transition: color .2s;
    border-radius: 14px;
    position: relative;
}
.mapp-nav-icon {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    transition: transform .25s cubic-bezier(0.34,1.56,0.64,1);
}
.mapp-nav-icon svg { width: 22px; height: 22px; color: currentColor; }
.mapp-nav-label { font-size: 10px; font-weight: 500; opacity: .85; }
.mapp-nav-item.is-active .mapp-nav-link { color: var(--mapp-theme) !important; }
.mapp-nav-item.is-active .mapp-nav-icon { transform: translateY(-3px) scale(1.1); }
.mapp-nav-item.is-active .mapp-nav-link::before {
    content: ''; position: absolute; top: -6px; left: 50%;
    transform: translateX(-50%);
    width: 22px; height: 3px;
    background: var(--mapp-theme);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 0 10px var(--mapp-theme);
}
.mapp-nav-badge {
    position: absolute; top: -4px; right: -8px;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff; font-size: 10px; font-weight: 700;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--mapp-bg);
}
.mapp-nav-badge:empty { display: none; }
html[dir="rtl"] .mapp-nav-badge { right: auto; left: -8px; }

/* ============================================================
   INSTALL BANNER
============================================================ */
.mapp-install-banner {
    position: fixed; left: 12px; right: 12px;
    bottom: calc(var(--mapp-nav-h) + var(--mapp-safe-bottom) + 10px);
    z-index: 9989;
    animation: mappSlideUp .4s cubic-bezier(0.34,1.56,0.64,1);
}
.mapp-install-glass {
    background: var(--mapp-card);
    backdrop-filter: blur(var(--mapp-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--mapp-blur)) saturate(180%);
    border: 1px solid var(--mapp-border);
    border-radius: 18px; padding: 14px 16px;
    display: flex; align-items: center; gap: 12px;
    box-shadow: var(--mapp-shadow);
    color: var(--mapp-text);
}
.mapp-install-content { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mapp-install-content strong { font-size: 14px; }
.mapp-install-content span { font-size: 12px; opacity: .7; }
.mapp-install-actions { display: flex; align-items: center; gap: 8px; }
.mapp-install-btn {
    background: var(--mapp-theme); color: #fff; border: none;
    border-radius: 12px; padding: 8px 16px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--mapp-theme) 40%, transparent);
}
.mapp-install-dismiss {
    background: rgba(255,255,255,.1); color: var(--mapp-text);
    border: none; width: 28px; height: 28px;
    border-radius: 50%; font-size: 18px; cursor: pointer;
}
@keyframes mappSlideUp { from{transform:translateY(120%);opacity:0} to{transform:translateY(0);opacity:1} }

/* ============================================================
   iOS Install Hint
============================================================ */
.mapp-ios-hint {
    position: fixed; inset: 0; z-index: 100001;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: flex-end;
}
.mapp-ios-card {
    background: var(--mapp-card);
    backdrop-filter: blur(var(--mapp-blur));
    -webkit-backdrop-filter: blur(var(--mapp-blur));
    border-radius: 22px 22px 0 0;
    padding: 24px 20px calc(24px + var(--mapp-safe-bottom));
    width: 100%; color: var(--mapp-text);
    box-shadow: 0 -10px 40px rgba(0,0,0,.4);
    animation: mappSlideUp .4s;
}
.mapp-ios-close { position: absolute; top: 12px; right: 16px; background: rgba(255,255,255,.1); border: none; width: 32px; height: 32px; border-radius: 50%; color: var(--mapp-text); font-size: 20px; cursor: pointer; }
.mapp-ios-icon { font-size: 48px; text-align: center; margin-bottom: 8px; }
.mapp-ios-card h3 { margin: 0 0 16px; text-align: center; font-size: 18px; }
.mapp-ios-card ol { list-style: none; padding: 0; margin: 0; counter-reset: ios-step; }
.mapp-ios-card ol li {
    counter-increment: ios-step;
    padding: 12px 0 12px 50px;
    position: relative;
    border-bottom: 1px solid var(--mapp-border);
    display: flex; align-items: center; gap: 10px;
}
html[dir="rtl"] .mapp-ios-card ol li { padding: 12px 50px 12px 0; }
.mapp-ios-card ol li::before {
    content: counter(ios-step);
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px;
    background: var(--mapp-theme); color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
}
html[dir="rtl"] .mapp-ios-card ol li::before { left: auto; right: 0; }
.mapp-ios-card ol li svg { width: 22px; height: 22px; opacity: .6; margin-left: auto; }

/* ============================================================
   PULL TO REFRESH
============================================================ */
.mapp-pull-refresh {
    position: fixed;
    top: calc(var(--mapp-header-h) + var(--mapp-safe-top));
    left: 50%; transform: translateX(-50%) translateY(-100%);
    z-index: 9985;
    width: 44px; height: 44px;
    background: var(--mapp-card);
    backdrop-filter: blur(var(--mapp-blur));
    -webkit-backdrop-filter: blur(var(--mapp-blur));
    border: 1px solid var(--mapp-border);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--mapp-theme);
    box-shadow: var(--mapp-shadow);
    transition: transform .3s ease, opacity .3s;
    opacity: 0;
}
.mapp-pull-refresh.is-visible {
    transform: translateX(-50%) translateY(20px);
    opacity: 1;
}
.mapp-pull-refresh.is-loading svg { animation: mappSpin 1s linear infinite; }
@keyframes mappSpin { to { transform: rotate(360deg); } }
.mapp-pull-spinner svg { width: 22px; height: 22px; }

/* ============================================================
   TRANSITIONS / SKELETON
============================================================ */
.mapp-transition-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background: var(--mapp-bg);
    opacity: 0; pointer-events: none;
    transition: opacity .25s;
    padding: calc(var(--mapp-header-h) + 20px) 16px 100px;
}
.mapp-transition-overlay.is-active { opacity: 1; pointer-events: auto; }
body.mapp-page-leaving { opacity: 0; transition: opacity .2s; }
body.mapp-page-entering { animation: mappPageEnter .35s cubic-bezier(.25,.46,.45,.94); }
@keyframes mappPageEnter { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }

.mapp-skeleton-card { background: var(--mapp-card); border-radius: 16px; padding: 16px; }
.mapp-skeleton-line {
    background: linear-gradient(90deg, var(--mapp-border) 0%, rgba(255,255,255,.25) 50%, var(--mapp-border) 100%);
    background-size: 200% 100%;
    animation: mappShimmer 1.5s infinite;
    border-radius: 8px;
    height: 14px; margin-bottom: 10px;
}
.mapp-skeleton-line-img { height: 180px; margin-bottom: 14px; }
.mapp-skeleton-line-1 { width: 80%; }
.mapp-skeleton-line-2 { width: 60%; }
.mapp-skeleton-line-3 { width: 40%; }
@keyframes mappShimmer { from{background-position:200% 0} to{background-position:-200% 0} }

/* ============================================================
   TOAST
============================================================ */
.mapp-toast {
    position: fixed; top: calc(var(--mapp-header-h) + var(--mapp-safe-top) + 10px);
    left: 50%; transform: translateX(-50%) translateY(-150%);
    z-index: 100002;
    background: var(--mapp-card);
    backdrop-filter: blur(var(--mapp-blur));
    -webkit-backdrop-filter: blur(var(--mapp-blur));
    border: 1px solid var(--mapp-border);
    border-radius: 14px;
    padding: 10px 16px;
    display: flex; align-items: center; gap: 10px;
    color: var(--mapp-text);
    box-shadow: var(--mapp-shadow);
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s;
    opacity: 0;
}
.mapp-toast.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; }
.mapp-toast-icon {
    width: 24px; height: 24px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
}
.mapp-toast.is-error .mapp-toast-icon {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

/* ============================================================
   LAZY IMAGES
============================================================ */
.mapp-lazy-img {
    transition: filter .4s, opacity .4s;
}
.mapp-lazy-img:not(.is-loaded) {
    filter: blur(8px);
    opacity: .6;
    /* CSS safety net: if our JS never gets to mark the image as loaded —
       because the image was injected by a third-party AJAX flow we don't
       observe — clear the blur after 1.5s anyway. Better to show an
       unconfirmed image than leave a smudge on the page forever. */
    animation: mappLazyClear 0.4s 1.5s forwards;
}
@keyframes mappLazyClear {
    to { filter: blur(0); opacity: 1; }
}

/* ============================================================
   STANDALONE MODE
============================================================ */
@media all and (display-mode: standalone) {
    body {
        -webkit-user-select: none; user-select: none;
        -webkit-tap-highlight-color: transparent;
        overscroll-behavior-y: contain;
    }
    a, button, input, textarea { -webkit-user-select: auto; user-select: auto; }
}

/* Hide nav when keyboard open */
body.mapp-keyboard-open .mapp-bottom-nav { transform: translateY(150%); transition: transform .3s; }

/* Buttons */
.mapp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px;
    border-radius: 14px;
    font-size: 14px; font-weight: 600;
    text-decoration: none !important;
    cursor: pointer; border: none;
    transition: transform .15s, opacity .2s;
}
.mapp-btn:active { transform: scale(.97); }
.mapp-btn-primary { background: var(--mapp-theme); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--mapp-theme) 40%, transparent); }
.mapp-btn-outline { background: transparent; color: var(--mapp-text); border: 1px solid var(--mapp-border); }

/* Save-data mode */
body.mapp-save-data img, body.mapp-save-data video { filter: contrast(.95); }
body.mapp-save-data .mapp-splash-glow { display: none; }

/* ============================================================
   DRAWER
============================================================ */
.mapp-drawer-overlay {
    position: fixed; inset: 0; z-index: 99994;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    opacity: 0; transition: opacity .3s;
}
.mapp-drawer-overlay.is-open { opacity: 1; }
.mapp-drawer {
    position: fixed; top: 0; bottom: 0; z-index: 99995;
    width: min(320px, 80vw);
    background: var(--mapp-bg);
    color: var(--mapp-text);
    display: flex; flex-direction: column;
    box-shadow: 10px 0 40px rgba(0,0,0,.3);
    transition: transform .35s cubic-bezier(.25,.46,.45,.94);
    padding-top: var(--mapp-safe-top);
    padding-bottom: var(--mapp-safe-bottom);
}
html[dir="rtl"] .mapp-drawer { left: 0; transform: translateX(-100%); }
html[dir="ltr"] .mapp-drawer { right: 0; transform: translateX(100%); }
.mapp-drawer.is-open { transform: translateX(0); }
.mapp-drawer-header {
    padding: 24px 20px 20px;
    border-bottom: 1px solid var(--mapp-border);
    position: relative;
    background: linear-gradient(135deg, color-mix(in srgb, var(--mapp-theme) 25%, var(--mapp-bg)), var(--mapp-bg));
}
.mapp-drawer-close {
    position: absolute; top: 12px; right: 12px;
    background: var(--mapp-card); border: none;
    width: 36px; height: 36px; border-radius: 50%;
    color: var(--mapp-text); font-size: 22px; cursor: pointer;
}
html[dir="rtl"] .mapp-drawer-close { right: auto; left: 12px; }
.mapp-drawer-user { display: flex; align-items: center; gap: 12px; }
.mapp-drawer-avatar img { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--mapp-theme); }
.mapp-drawer-user-info strong { display: block; font-size: 16px; }
.mapp-drawer-user-info span { font-size: 12px; opacity: .7; }
.mapp-drawer-guest { text-align: center; }
.mapp-drawer-guest h3 { margin: 0 0 16px; }
.mapp-drawer-nav { flex: 1; overflow-y: auto; padding: 12px 0; }
.mapp-drawer-nav ul { list-style: none; margin: 0; padding: 0; }
.mapp-drawer-nav li a {
    display: block;
    padding: 14px 20px;
    color: var(--mapp-text) !important;
    text-decoration: none !important;
    font-size: 15px;
    border-bottom: 1px solid var(--mapp-border);
    transition: background .15s;
}
.mapp-drawer-nav li a:hover, .mapp-drawer-nav li a:active { background: var(--mapp-card); }
.mapp-drawer-footer { padding: 16px 20px; border-top: 1px solid var(--mapp-border); display: flex; flex-direction: column; gap: 8px; }
.mapp-drawer-footer button, .mapp-drawer-footer a {
    display: flex; align-items: center; gap: 10px;
    background: var(--mapp-card); border: none;
    padding: 12px 14px; border-radius: 12px;
    color: var(--mapp-text); cursor: pointer;
    text-decoration: none !important;
    font-size: 14px;
}
.mapp-drawer-footer svg { width: 18px; height: 18px; }
.mapp-drawer-logout { background: rgba(239,68,68,.15) !important; color: #ef4444 !important; justify-content: center; }

/* ============================================================
   ONBOARDING
============================================================ */
.mapp-onboarding {
    position: fixed; inset: 0; z-index: 100000;
    background: linear-gradient(135deg, var(--mapp-bg), color-mix(in srgb, var(--mapp-theme) 30%, var(--mapp-bg)));
    color: #fff;
    display: flex; flex-direction: column;
    padding: var(--mapp-safe-top) 0 calc(20px + var(--mapp-safe-bottom));
    transition: opacity .3s;
}
.mapp-onboarding.is-closing { opacity: 0; }
.mapp-onboarding-skip { text-align: right; padding: 16px 20px; }
html[dir="rtl"] .mapp-onboarding-skip { text-align: left; }
.mapp-onboarding-skip button { background: transparent; border: none; color: #fff; opacity: .7; font-size: 14px; cursor: pointer; padding: 6px 10px; }
.mapp-onboarding-slides {
    flex: 1; display: flex;
    transition: transform .4s cubic-bezier(.25,.46,.45,.94);
}
.mapp-onboarding-slide {
    min-width: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 20px 40px; text-align: center;
}
.mapp-onboarding-icon { font-size: 80px; margin-bottom: 28px; animation: mappBounceIn .6s; }
.mapp-onboarding-slide h2 { font-size: 24px; margin: 0 0 12px; }
.mapp-onboarding-slide p { font-size: 15px; opacity: .8; max-width: 320px; line-height: 1.6; }
@keyframes mappBounceIn { 0%{transform:scale(.5);opacity:0} 60%{transform:scale(1.15)} 100%{transform:scale(1);opacity:1} }

.mapp-onboarding-dots {
    display: flex; gap: 8px; justify-content: center; margin: 20px 0;
}
.mapp-dot {
    width: 8px; height: 8px;
    background: rgba(255,255,255,.3);
    border-radius: 50%; cursor: pointer;
    transition: all .25s;
}
.mapp-dot.is-active { width: 24px; background: var(--mapp-accent); border-radius: 4px; }
.mapp-onboarding-controls { padding: 0 24px; }
.mapp-onboarding-controls .mapp-btn { width: 100%; padding: 14px; font-size: 15px; }

/* ============================================================
   PROFESSIONAL CART-ANCHORED FEEDBACK
   Replaces the top-of-screen toast for add-to-cart actions with
   feedback localized to the cart icon (like real shopping apps).
============================================================ */

/* Tooltip floater anchored above the cart icon */
.mapp-cart-floater {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(8px) scale(.6);
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 14px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
    z-index: 9989;
    box-shadow: 0 8px 20px rgba(34,197,94,.45), 0 1px 0 rgba(255,255,255,.15) inset;
    letter-spacing: .2px;
}
.mapp-cart-floater.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}
.mapp-cart-floater::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #16a34a;
}
.mapp-cart-floater.is-error {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 8px 20px rgba(239,68,68,.45), 0 1px 0 rgba(255,255,255,.15) inset;
}
.mapp-cart-floater.is-error::after { border-top-color: #dc2626; }
.mapp-cart-floater.is-info {
    background: linear-gradient(135deg, var(--mapp-theme), var(--mapp-accent));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--mapp-theme) 45%, transparent), 0 1px 0 rgba(255,255,255,.15) inset;
}
.mapp-cart-floater.is-info::after { border-top-color: var(--mapp-theme); }

/* Cart icon bounce on success */
@keyframes mappCartIconBounce {
    0%   { transform: scale(1) translateY(0); }
    18%  { transform: scale(.88) translateY(3px); }
    40%  { transform: scale(1.3) translateY(-8px); }
    60%  { transform: scale(.96) translateY(0); }
    80%  { transform: scale(1.1) translateY(-2px); }
    100% { transform: scale(1) translateY(0); }
}
.mapp-cart-bounce {
    animation: mappCartIconBounce .72s cubic-bezier(.34,1.56,.64,1) !important;
}

/* Cart icon shake on error */
@keyframes mappCartIconShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px) rotate(-3deg); }
    40% { transform: translateX(5px) rotate(3deg); }
    60% { transform: translateX(-4px) rotate(-2deg); }
    80% { transform: translateX(4px) rotate(2deg); }
}
.mapp-cart-shake {
    animation: mappCartIconShake .5s ease !important;
}

/* The "fly to cart" dot — small gradient pellet that zooms from the
   tapped product button to the cart icon to close the visual loop. */
.mapp-fly-dot {
    position: fixed;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--mapp-theme), var(--mapp-accent));
    border-radius: 50%;
    pointer-events: none;
    z-index: 999998;
    opacity: 1;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--mapp-theme) 55%, transparent);
    transition: transform .75s cubic-bezier(.55, 0, .55, 1.45), opacity .75s ease;
    will-change: transform, opacity;
}
.mapp-fly-dot::before {
    content: '+1';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -.3px;
}

/* Make sure the floater can position relative to the cart link */
.mapp-nav-cart { position: relative; }

/* Subtle highlight on the cart icon while the dot is flying in */
.mapp-cart-bounce + .mapp-nav-badge,
.mapp-nav-icon.mapp-cart-bounce .mapp-nav-badge {
    /* badge already pulses via .is-pulse */
}

/* ============================================================
   WOODMART THEME COMPATIBILITY
   WoodMart shows its own "Product added" notification overlay
   on AJAX add-to-cart. With our cart-anchored floater + fly-to-cart
   animation, that secondary notification is redundant and visually
   competes with ours. Hide it cleanly only on mobile/tablet where
   our app UI is active.
============================================================ */
@media (max-width: 1024px) {
    .wd-popup-notification,
    .wd-popup-notification-content,
    .woodmart-popup-notification,
    .added_to_cart.wc-forward,
    /* Generic add-to-cart success messages in product loops */
    .woocommerce-message[role="alert"]:not(.cart-empty) {
        display: none !important;
    }
}

/* Fix for WoodMart's quick-shop / variations modal — make sure it
   sits BELOW our drawer overlays and bottom nav so app UI is still
   reachable when it's open. */
.wd-popup-quick-shop,
.wd-popup,
.popup-quick-shop {
    z-index: 9985 !important;
}

/* Loading state on WoodMart's add-to-cart icon should mirror ours */
.wd-add-btn.loading,
.wd-add-btn-loop.loading,
.add_to_cart_button.loading {
    opacity: .6;
    pointer-events: none;
}