/* ================================================================
   SHOPORA MOBILE - interactive app-concept prototype (portfolio piece)
   Standalone design system: a native-app UI (device frame, tab bar,
   screen stack) doesn't reuse Shopora's responsive-web CSS or Bootstrap
   grid - this file is fully self-contained.
================================================================ */

:root {
    --sm-green: #0B7A2A;
    --sm-green-dark: #003F22;
    --sm-green-soft: #EAF6EF;
    --sm-black: #101820;
    --sm-text: #2D3748;
    --sm-muted: #6B7280;
    --sm-border: #E5E7EB;
    --sm-bg: #FFFFFF;
    --sm-bg-soft: #F8FAF9;
    --sm-danger: #DC2626;
    --sm-warning: #F59E0B;
    --sm-radius: 14px;
    --sm-radius-sm: 10px;
}

* { box-sizing: border-box; }

body.shopora-mobile-page {
    margin: 0;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    background: radial-gradient(circle at 20% 0%, #16231d 0%, #0c1210 55%, #080b0a 100%);
    color: #fff;
    min-height: 100vh;
}
.shopora-mobile-page a { text-decoration: none; }
.shopora-mobile-page button { font-family: inherit; cursor: pointer; }

/* ============================================================
   SHOWCASE SHELL
============================================================ */
.mobile-showcase { max-width: 1320px; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }

.mobile-showcase-topbar { margin-bottom: 2.5rem; }
.back-link {
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: rgba(255,255,255,0.7); font-size: 0.85rem; font-weight: 600;
    margin-bottom: 1.5rem;
}
.back-link:hover { color: #fff; }
.mobile-showcase-heading .eyebrow {
    display: inline-block; color: #6EE7A8; font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.6rem;
}
.mobile-showcase-heading h1 { font-size: 2.2rem; font-weight: 800; margin: 0 0 0.6rem; letter-spacing: -0.02em; }
.mobile-showcase-heading p { color: rgba(255,255,255,0.65); max-width: 640px; margin: 0; font-size: 1rem; line-height: 1.6; }

.mobile-showcase-stage {
    display: grid;
    grid-template-columns: 220px auto 260px;
    gap: 2.5rem;
    align-items: start;
    justify-content: center;
}

/* ============================================================
   SCREEN PICKER
============================================================ */
.screen-picker {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--sm-radius);
    padding: 1rem;
    display: flex; flex-direction: column; gap: 0.25rem;
    position: sticky; top: 1.5rem;
    max-height: 80vh;
    overflow-y: auto;
}
.screen-picker-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.4); margin-bottom: 0.5rem; padding: 0 0.4rem; }
.screen-picker-btn {
    background: none; border: none; text-align: left; color: rgba(255,255,255,0.65);
    font-size: 0.86rem; font-weight: 500; padding: 0.55rem 0.7rem; border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}
.screen-picker-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
.screen-picker-btn.active { background: var(--sm-green); color: #fff; font-weight: 700; }

/* ============================================================
   PHONE FRAME
============================================================ */
.phone-frame {
    width: 340px;
    height: 716px;
    background: #0c0c0e;
    border-radius: 46px;
    padding: 12px;
    box-shadow: 0 30px 70px -20px rgba(0,0,0,0.6), 0 0 0 2px rgba(255,255,255,0.05) inset;
    position: relative;
    flex-shrink: 0;
}
.phone-notch {
    position: absolute;
    top: 12px; left: 50%; transform: translateX(-50%);
    width: 130px; height: 24px;
    background: #0c0c0e;
    border-radius: 0 0 16px 16px;
    z-index: 20;
}
.phone-screen {
    position: relative;
    width: 100%; height: 100%;
    background: var(--sm-bg);
    border-radius: 36px;
    overflow: hidden;
    display: flex; flex-direction: column;
    color: var(--sm-text);
}

.app-statusbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.55rem 1.4rem 0.3rem; font-size: 0.78rem; font-weight: 700; color: var(--sm-black);
    flex-shrink: 0;
}
.statusbar-icons { display: flex; gap: 0.35rem; font-size: 0.72rem; }

/* ============================================================
   SCREEN STACK
============================================================ */
.app-viewport { position: relative; flex: 1; overflow: hidden; }
.app-screen {
    position: absolute; inset: 0;
    display: none;
    flex-direction: column;
    overflow-y: auto;
    background: var(--sm-bg);
    animation: sm-fade-in 0.18s ease;
}
.app-screen.active { display: flex; }
@keyframes sm-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.app-body { padding: 0 1.1rem 1.25rem; flex: 1; }
/* Used both directly on .app-body (Sign In screen - just adds top padding
   since left/right/bottom already come from .app-body) and standalone on a
   nested div inside .app-body-flush (Product Detail - the flush wrapper
   zeroes all padding so the image can bleed full-width, so this inner
   block needs its own complete padding, not just top). */
.app-body-pad { padding: 1rem 1.1rem 1.25rem; }
.app-body-flush { padding: 0; }

.app-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.5rem 1.1rem 0.9rem; flex-shrink: 0;
}
.app-topbar-back { gap: 0.75rem; justify-content: flex-start; }
.app-topbar-eyebrow { display: block; font-size: 0.72rem; color: var(--sm-muted); }
.app-topbar-title { font-size: 1.05rem; font-weight: 800; color: var(--sm-black); }
.app-topbar-transparent { position: absolute; top: 0; left: 0; right: 0; z-index: 5; padding-top: 0.7rem; }
.app-topbar-dark .icon-btn, .app-topbar-dark .app-topbar-title { color: #fff; }
.app-topbar-dark .icon-btn { background: rgba(0,0,0,0.35); }

.icon-btn {
    width: 34px; height: 34px; border-radius: 50%; border: none;
    background: var(--sm-bg-soft); display: flex; align-items: center; justify-content: center;
    color: var(--sm-black); font-size: 1rem; position: relative; flex-shrink: 0;
}
.icon-dot { position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--sm-danger); }

/* ============================================================
   SPLASH
============================================================ */
.splash-screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; background: var(--sm-green-dark); color: #fff; }
.splash-logo { font-size: 2rem; font-weight: 800; }
.splash-logo .dot { color: #6EE7A8; }
.splash-tag { color: rgba(255,255,255,0.65); font-size: 0.85rem; margin: 0; }
.splash-dots { display: flex; gap: 0.4rem; margin-top: 1rem; }
.splash-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.35); animation: sm-pulse 1.2s infinite ease-in-out; }
.splash-dots span:nth-child(2) { animation-delay: 0.15s; }
.splash-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes sm-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* ============================================================
   AUTH / SIGN IN
============================================================ */
.auth-brand { font-size: 1.3rem; font-weight: 800; color: var(--sm-black); margin-bottom: 1.25rem; }
.auth-brand .dot { color: var(--sm-green); }
.auth-tabs { display: flex; gap: 0.4rem; background: var(--sm-bg-soft); border-radius: 999px; padding: 0.3rem; margin-bottom: 1.5rem; }
.auth-tab { flex: 1; border: none; background: none; padding: 0.5rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: var(--sm-muted); }
.auth-tab.active { background: #fff; color: var(--sm-black); box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.mobile-field { display: block; margin-bottom: 0.9rem; }
.mobile-field span { display: block; font-size: 0.78rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--sm-text); }
.mobile-field input { width: 100%; border: 1px solid var(--sm-border); border-radius: var(--sm-radius-sm); padding: 0.65rem 0.85rem; font-size: 0.88rem; background: var(--sm-bg-soft); }
.mobile-field input:focus { outline: none; border-color: var(--sm-green); background: #fff; }
.auth-forgot { display: block; text-align: right; font-size: 0.78rem; color: var(--sm-green); font-weight: 600; margin-bottom: 1.25rem; }

/* ============================================================
   BUTTONS
============================================================ */
.mobile-btn-primary, .mobile-btn-outline, .mobile-btn-ghost, .mobile-btn-biometric {
    width: 100%; border-radius: var(--sm-radius-sm); padding: 0.75rem 1rem; font-size: 0.88rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 0.7rem; border: 1px solid transparent;
    transition: transform 0.1s ease;
}
.mobile-btn-primary { background: var(--sm-green); color: #fff; }
.mobile-btn-primary:active { transform: scale(0.98); }
.mobile-btn-primary:disabled { opacity: 0.55; }
.mobile-btn-outline { background: #fff; border-color: var(--sm-green); color: var(--sm-green); }
.mobile-btn-ghost { background: none; border-color: var(--sm-border); color: var(--sm-text); }
.mobile-btn-biometric { background: var(--sm-bg-soft); color: var(--sm-black); border-color: var(--sm-border); }
.mobile-btn-biometric.pulsing i { animation: sm-pulse 0.6s infinite; color: var(--sm-green); }
.btn-added-mobile { background: #16A34A !important; color: #fff !important; }

/* ============================================================
   HOME
============================================================ */
.mobile-search-bar {
    width: 100%; display: flex; align-items: center; gap: 0.6rem;
    background: var(--sm-bg-soft); border: 1px solid var(--sm-border); border-radius: var(--sm-radius-sm);
    padding: 0.7rem 0.9rem; color: var(--sm-muted); font-size: 0.85rem; margin-bottom: 1.1rem; text-align: left;
}
.home-promo {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--sm-green-soft); border-radius: var(--sm-radius); padding: 1rem 1.1rem; margin-bottom: 1.3rem;
}
.home-promo strong { display: block; font-size: 0.95rem; color: var(--sm-black); }
.home-promo span { font-size: 0.78rem; color: var(--sm-green-dark); font-weight: 600; }
.home-promo i { font-size: 1.4rem; color: var(--sm-green); }

.section-row { display: flex; align-items: center; justify-content: space-between; margin: 1.1rem 0 0.7rem; }
.section-title { font-size: 0.98rem; font-weight: 800; color: var(--sm-black); }
.section-link { background: none; border: none; color: var(--sm-green); font-size: 0.78rem; font-weight: 700; }

.home-category-rail { display: flex; gap: 0.85rem; overflow-x: auto; padding-bottom: 0.3rem; }
.home-category-rail::-webkit-scrollbar { display: none; }
.category-chip { flex-shrink: 0; width: 62px; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; background: none; border: none; }
.category-chip-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--sm-bg-soft); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--sm-green-dark); }
.category-chip span { font-size: 0.68rem; font-weight: 600; color: var(--sm-text); text-align: center; line-height: 1.2; }

.product-rail { display: flex; gap: 0.8rem; overflow-x: auto; padding-bottom: 0.3rem; }
.product-rail::-webkit-scrollbar { display: none; }
.product-rail .product-card-mobile { flex-shrink: 0; width: 128px; }

/* ============================================================
   PRODUCT CARD / LIST (rendered by JS - shared across Home,
   Category, Search, Listing, Cart, Wishlist, Checkout review)
============================================================ */
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.product-card-mobile { background: #fff; border: 1px solid var(--sm-border); border-radius: var(--sm-radius-sm); padding: 0.6rem; position: relative; text-align: left; }
.product-card-mobile .thumb { position: relative; aspect-ratio: 1; background: var(--sm-bg-soft); border: none; border-radius: 8px; overflow: hidden; margin-bottom: 0.5rem; padding: 0; }
.product-card-mobile .thumb img { width: 100%; height: 100%; object-fit: contain; padding: 0.5rem; box-sizing: border-box; }
.product-card-mobile .badge-mobile { position: absolute; top: 0.4rem; left: 0.4rem; background: var(--sm-danger); color: #fff; font-size: 0.6rem; font-weight: 700; padding: 0.15rem 0.4rem; border-radius: 999px; z-index: 2; }
.product-card-mobile .wish-btn { position: absolute; top: 0.4rem; right: 0.4rem; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,0.9); border: none; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: var(--sm-muted); z-index: 2; }
.product-card-mobile .wish-btn.active { color: var(--sm-danger); }
.product-card-mobile .name { display: block; font-size: 0.78rem; font-weight: 600; color: var(--sm-black); margin-bottom: 0.25rem; line-height: 1.3; min-height: 2.1em; border: none; background: none; padding: 0; text-align: left; }
.product-card-mobile .price { font-size: 0.85rem; font-weight: 800; color: var(--sm-black); }
.product-card-mobile .price-old { font-size: 0.7rem; color: #A1A9B3; text-decoration: line-through; margin-left: 0.3rem; }
.product-card-mobile .swatch-row { display: flex; gap: 0.25rem; margin: 0.3rem 0; }
.product-card-mobile .swatch-dot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 0 0 1px #fff; }

.product-list { display: flex; flex-direction: column; gap: 0.7rem; }
.product-list-row { display: flex; align-items: center; gap: 0.75rem; background: #fff; border: 1px solid var(--sm-border); border-radius: var(--sm-radius-sm); padding: 0.6rem; text-align: left; }
.product-list-row .thumb { position: relative; width: 56px; height: 56px; flex-shrink: 0; background: var(--sm-bg-soft); border-radius: 8px; overflow: hidden; }
.product-list-row .thumb img { width: 100%; height: 100%; object-fit: contain; padding: 0.3rem; box-sizing: border-box; }
.product-list-row .info { flex: 1; min-width: 0; background: none; border: none; text-align: left; padding: 0; }
.product-list-row .name { display: block; font-size: 0.82rem; font-weight: 600; color: var(--sm-black); }
.product-list-row .meta { font-size: 0.74rem; color: var(--sm-muted); }
.product-list-row .price { font-size: 0.85rem; font-weight: 800; color: var(--sm-black); }
.product-list-row .qty-stepper-mobile { margin-top: 0.35rem; }
.product-list-row .remove-btn { background: none; border: none; color: var(--sm-danger); font-size: 0.9rem; padding: 0.3rem; }

/* ============================================================
   CATEGORY GRID (full browse screen)
============================================================ */
.category-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.category-tile { display: flex; align-items: center; gap: 0.7rem; background: var(--sm-bg-soft); border: 1px solid var(--sm-border); border-radius: var(--sm-radius-sm); padding: 0.8rem; text-align: left; }
.category-tile i { font-size: 1.1rem; color: var(--sm-green-dark); }
.category-tile span { font-size: 0.8rem; font-weight: 700; color: var(--sm-black); }

/* ============================================================
   SEARCH
============================================================ */
.app-search-input { flex: 1; border: 1px solid var(--sm-border); border-radius: var(--sm-radius-sm); padding: 0.55rem 0.85rem; font-size: 0.85rem; background: var(--sm-bg-soft); }
.app-search-input:focus { outline: none; border-color: var(--sm-green); background: #fff; }
.chip-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.chip-label { font-size: 0.74rem; color: var(--sm-muted); }
.chip { background: var(--sm-bg-soft); border: 1px solid var(--sm-border); border-radius: 999px; padding: 0.35rem 0.7rem; font-size: 0.74rem; font-weight: 600; color: var(--sm-text); }

/* ============================================================
   LISTING TOOLBAR
============================================================ */
.listing-toolbar { display: flex; align-items: center; justify-content: space-between; margin: 0.9rem 0; font-size: 0.76rem; color: var(--sm-muted); }
.listing-sort { display: flex; align-items: center; gap: 0.3rem; font-weight: 600; }

/* ============================================================
   PRODUCT DETAIL
============================================================ */
.pdp-image-wrap { position: relative; aspect-ratio: 1; background: var(--sm-bg-soft); overflow: hidden; }
.pdp-image-wrap img { width: 100%; height: 100%; object-fit: contain; padding: 2.5rem 2rem 1.5rem; box-sizing: border-box; }
.pdp-category { font-size: 0.74rem; color: var(--sm-green); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.pdp-name { font-size: 1.15rem; font-weight: 800; color: var(--sm-black); margin: 0.3rem 0 0.4rem; }
.pdp-rating { font-size: 0.78rem; color: var(--sm-muted); margin-bottom: 0.6rem; }
.pdp-rating i { color: var(--sm-warning); }
.pdp-price-row { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.9rem; }
.pdp-price { font-size: 1.3rem; font-weight: 800; color: var(--sm-green-dark); }
.pdp-price-old { font-size: 0.85rem; color: #A1A9B3; text-decoration: line-through; }
.pdp-variants { margin-bottom: 1rem; }
.pdp-variants-label { font-size: 0.78rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--sm-text); }
.pdp-swatch-row { display: flex; gap: 0.55rem; flex-wrap: wrap; }
.pdp-swatch { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 0 0 1px #fff; }
.pdp-swatch.active { box-shadow: 0 0 0 1px #fff, 0 0 0 2px var(--sm-green); }
.pdp-description { font-size: 0.82rem; color: var(--sm-muted); line-height: 1.6; margin: 1rem 0; }
.qty-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.82rem; font-weight: 700; margin: 1rem 0; }
.qty-stepper-mobile { display: flex; align-items: center; gap: 0.9rem; background: var(--sm-bg-soft); border-radius: 999px; padding: 0.3rem 0.7rem; }
.qty-stepper-mobile button { border: none; background: none; font-size: 1rem; font-weight: 800; color: var(--sm-green-dark); width: 20px; }
.app-sticky-footer { padding: 0.9rem 1.1rem calc(0.9rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--sm-border); background: #fff; flex-shrink: 0; }
.app-sticky-footer .mobile-btn-primary, .app-sticky-footer .mobile-btn-outline { margin-bottom: 0; }
.app-sticky-footer-summary .summary-row { margin-bottom: 0.5rem; }

/* Colorizes a product photo the same way the web build does: masked to the
   photo's own alpha shape and blended with mix-blend-mode: color, so
   picking a shade "changes the pic" without needing per-shade photography. */
.variant-tint {
    position: absolute; inset: 0;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
    background-color: var(--tint-color, transparent);
    mix-blend-mode: color;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}
.variant-tint.tinted { opacity: 0.55; }
.pdp-image-wrap .variant-tint { padding: 2.5rem 2rem 1.5rem; box-sizing: border-box; -webkit-mask-origin: content-box; mask-origin: content-box; -webkit-mask-clip: content-box; mask-clip: content-box; }
.product-card-mobile .thumb .variant-tint, .product-list-row .thumb .variant-tint { padding: 0.5rem; box-sizing: border-box; -webkit-mask-origin: content-box; mask-origin: content-box; -webkit-mask-clip: content-box; mask-clip: content-box; }

/* ============================================================
   AR SHADE TRY-ON
============================================================ */
.ar-stage { position: relative; flex: 1; background: #111; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ar-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.ar-video.active { display: block; }
.ar-fallback { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; color: rgba(255,255,255,0.55); text-align: center; padding: 2rem; }
.ar-fallback i { font-size: 3rem; }
.ar-fallback p { font-size: 0.78rem; margin: 0; line-height: 1.5; }
.ar-fallback.hidden-fallback { display: none; }
.ar-tint-dot {
    position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%);
    width: 64px; height: 34px; border-radius: 50%;
    background-color: var(--tint-color, transparent);
    mix-blend-mode: multiply; opacity: 0; transition: opacity 0.2s ease, background-color 0.2s ease;
    pointer-events: none;
}
.ar-tint-dot.tinted { opacity: 0.65; }
.ar-enable-btn {
    position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3); color: #fff;
    border-radius: 999px; padding: 0.55rem 1rem; font-size: 0.78rem; font-weight: 600; display: flex; align-items: center; gap: 0.4rem;
    backdrop-filter: blur(6px);
}
.ar-enable-btn.hidden-enable { display: none; }
.ar-shade-strip { background: #fff; padding: 1rem 1.1rem; flex-shrink: 0; }
.ar-shade-name { display: block; font-size: 0.82rem; font-weight: 700; color: var(--sm-black); margin-bottom: 0.6rem; }
.ar-swatch-row { display: flex; gap: 0.6rem; overflow-x: auto; }
.ar-swatch { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 0 0 1px #fff; }
.ar-swatch.active { box-shadow: 0 0 0 1px #fff, 0 0 0 2px var(--sm-green); }

/* ============================================================
   CART / CHECKOUT
============================================================ */
.summary-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; color: var(--sm-text); margin-bottom: 0.4rem; }
.summary-row-total { font-size: 1rem; font-weight: 800; color: var(--sm-black); padding-top: 0.5rem; border-top: 1px solid var(--sm-border); }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; padding: 3rem 1rem; color: var(--sm-muted); text-align: center; }
.empty-state i { font-size: 2.4rem; opacity: 0.4; }
.empty-state p { margin: 0; font-size: 0.85rem; }
.empty-state .mobile-btn-primary { width: auto; padding-left: 1.5rem; padding-right: 1.5rem; margin-top: 0.5rem; }
.mobile-empty-note { grid-column: 1 / -1; text-align: center; color: var(--sm-muted); font-size: 0.82rem; padding: 2.5rem 1rem; margin: 0; }

.checkout-steps-mobile { display: flex; gap: 0.5rem; margin: 0.9rem 0 1.2rem; }
.checkout-step-mobile {
    flex: 1; text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--sm-muted);
    padding: 0 0 0.5rem; border: none; border-bottom: 3px solid var(--sm-border); background: none;
}
.checkout-step-mobile.active, .checkout-step-mobile.done { color: var(--sm-green-dark); border-bottom-color: var(--sm-green); }
.checkout-step-mobile.done { cursor: pointer; }

.mobile-option-card { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--sm-border); border-radius: var(--sm-radius-sm); padding: 0.8rem 0.9rem; margin-bottom: 0.7rem; cursor: pointer; }
.mobile-option-card.selected { border-color: var(--sm-green); background: var(--sm-green-soft); }
.mobile-option-card strong { display: block; font-size: 0.85rem; color: var(--sm-black); }
.mobile-option-card span { font-size: 0.74rem; color: var(--sm-muted); }
.mobile-option-card i { color: var(--sm-green); font-size: 1.1rem; display: none; }
.mobile-option-card.selected i { display: block; }

.checkout-recap { margin-bottom: 1.1rem; }
.checkout-recap-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; color: var(--sm-text); padding: 0.6rem 0; border-bottom: 1px solid var(--sm-border); }
.checkout-recap-row i { color: var(--sm-green-dark); font-size: 1rem; }
.checkout-recap-row .recap-label { color: var(--sm-muted); min-width: 60px; }

/* ============================================================
   CONFIRMATION
============================================================ */
.confirmation-body { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; flex: 1; gap: 0.5rem; }
.confirmation-check { width: 64px; height: 64px; border-radius: 50%; background: var(--sm-green); color: #fff; font-size: 1.8rem; display: flex; align-items: center; justify-content: center; margin-bottom: 0.6rem; }
.confirmation-body h2 { font-size: 1.2rem; font-weight: 800; color: var(--sm-black); margin: 0 0 0.3rem; }
.text-muted-mobile { color: var(--sm-muted); font-size: 0.82rem; max-width: 240px; margin: 0 0 1rem; }
.confirmation-order-no { font-size: 0.85rem; color: var(--sm-text); margin-bottom: 1.5rem; }

/* ============================================================
   ORDER TRACKING
============================================================ */
.tracking-card { background: var(--sm-green-soft); border-radius: var(--sm-radius); padding: 1rem; margin: 0.9rem 0 1.3rem; }
.tracking-order-no { display: block; font-size: 0.76rem; color: var(--sm-green-dark); font-weight: 700; margin-bottom: 0.3rem; }
.tracking-eta { font-size: 0.85rem; color: var(--sm-black); }
.tracking-timeline { display: flex; flex-direction: column; }
.tracking-step { display: flex; gap: 0.9rem; padding-bottom: 1.4rem; position: relative; }
.tracking-step::before {
    content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--sm-border);
}
.tracking-step:last-child::before { display: none; }
.tracking-step.done::before { background: var(--sm-green); }
.tracking-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--sm-bg-soft); border: 2px solid var(--sm-border); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: var(--sm-muted); flex-shrink: 0; z-index: 1; }
.tracking-step.done .tracking-dot { background: var(--sm-green); border-color: var(--sm-green); color: #fff; }
.tracking-step.active .tracking-dot { background: #fff; border-color: var(--sm-green); color: var(--sm-green); box-shadow: 0 0 0 4px var(--sm-green-soft); }
.tracking-step strong { display: block; font-size: 0.85rem; color: var(--sm-black); }
.tracking-step span { font-size: 0.74rem; color: var(--sm-muted); }

/* ============================================================
   ACCOUNT
============================================================ */
.account-profile { display: flex; align-items: center; gap: 0.9rem; padding: 0.5rem 0 1.3rem; }
.account-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--sm-green); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; flex-shrink: 0; }
.account-profile strong { display: block; font-size: 0.92rem; color: var(--sm-black); }
.account-profile span { font-size: 0.76rem; color: var(--sm-muted); }
.account-menu { display: flex; flex-direction: column; }
.account-menu-item { display: flex; align-items: center; gap: 0.75rem; background: none; border: none; border-bottom: 1px solid var(--sm-border); padding: 0.85rem 0.1rem; font-size: 0.85rem; font-weight: 600; color: var(--sm-text); text-align: left; }
.account-menu-item i:first-child { color: var(--sm-green-dark); font-size: 1rem; width: 18px; }
.account-menu-item .chevron { margin-left: auto; color: var(--sm-muted); font-size: 0.78rem; }
.account-logout { margin-top: 1.3rem; color: var(--sm-danger); border-color: #FCA5A5; }

/* ============================================================
   STORE LOCATOR
============================================================ */
.store-map { position: relative; height: 200px; background: linear-gradient(135deg, #DCEFE3, #C9E6D3); flex-shrink: 0; overflow: hidden; }
.store-map-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(0,63,34,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0,63,34,0.06) 1px, transparent 1px); background-size: 24px 24px; }
.store-pin { position: absolute; transform: translate(-50%, -100%); color: var(--sm-green-dark); font-size: 1.4rem; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25)); }
.store-list { display: flex; flex-direction: column; padding: 0.9rem 1.1rem; gap: 0.7rem; }
.store-item { display: flex; align-items: center; gap: 0.75rem; background: var(--sm-bg-soft); border: 1px solid var(--sm-border); border-radius: var(--sm-radius-sm); padding: 0.75rem; text-align: left; }
.store-item.selected { border-color: var(--sm-green); background: var(--sm-green-soft); }
.store-item i { color: var(--sm-green-dark); font-size: 1.1rem; }
.store-item strong { display: block; font-size: 0.85rem; color: var(--sm-black); }
.store-item span { font-size: 0.74rem; color: var(--sm-muted); }

/* ============================================================
   NOTIFICATIONS
============================================================ */
.notification-list { display: flex; flex-direction: column; gap: 0.7rem; padding-top: 0.6rem; }
.notification-item { display: flex; gap: 0.8rem; background: var(--sm-bg-soft); border-radius: var(--sm-radius-sm); padding: 0.8rem; position: relative; text-align: left; border: none; width: 100%; }
.notification-item.unread { background: var(--sm-green-soft); }
.notification-icon { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--sm-green-dark); font-size: 0.95rem; flex-shrink: 0; }
.notification-item .info { flex: 1; }
.notification-item strong { display: block; font-size: 0.82rem; color: var(--sm-black); }
.notification-item p { margin: 0.15rem 0 0; font-size: 0.76rem; color: var(--sm-muted); line-height: 1.4; }
.notification-item time { font-size: 0.68rem; color: var(--sm-muted); }
.notification-unread-dot { position: absolute; top: 0.9rem; right: 0.9rem; width: 7px; height: 7px; border-radius: 50%; background: var(--sm-green); }

/* ============================================================
   TOAST (feedback for actions that don't have a screen in this
   prototype yet, e.g. Settings/Help - see Shopora.showToast)
============================================================ */
.mobile-toast {
    position: absolute;
    left: 50%;
    bottom: 78px;
    transform: translate(-50%, 10px);
    background: rgba(16, 24, 32, 0.92);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    white-space: nowrap;
    max-width: calc(100% - 2.5rem);
    text-overflow: ellipsis;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 40;
}
.mobile-toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   TAB BAR
============================================================ */
.app-tabbar {
    display: flex; align-items: stretch; border-top: 1px solid var(--sm-border);
    background: #fff; flex-shrink: 0; padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tab-btn {
    flex: 1; border: none; background: none; display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
    padding: 0.6rem 0 0.5rem; font-size: 0.64rem; font-weight: 600; color: var(--sm-muted); position: relative;
}
.tab-btn i { font-size: 1.1rem; }
.tab-btn.active { color: var(--sm-green); }
.tab-badge {
    position: absolute; top: 2px; right: calc(50% - 18px);
    background: var(--sm-danger); color: #fff; font-size: 0.6rem; font-weight: 700;
    min-width: 15px; height: 15px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

/* ============================================================
   FEATURE CALLOUTS SIDEBAR
============================================================ */
.feature-callouts { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 1.5rem; }
.feature-callout-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.4); }
.feature-callout { display: flex; gap: 0.8rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--sm-radius); padding: 0.9rem; }
.feature-callout i { font-size: 1.2rem; color: #6EE7A8; flex-shrink: 0; }
.feature-callout strong { display: block; font-size: 0.85rem; color: #fff; margin-bottom: 0.15rem; }
.feature-callout span { font-size: 0.76rem; color: rgba(255,255,255,0.55); line-height: 1.4; }
.feature-callout-note { font-size: 0.74rem; color: rgba(255,255,255,0.4); line-height: 1.5; margin-top: 0.3rem; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1180px) {
    .mobile-showcase-stage { grid-template-columns: 1fr; justify-items: center; }
    .screen-picker { position: static; width: 100%; max-width: 340px; flex-direction: row; flex-wrap: wrap; max-height: none; }
    .feature-callouts { position: static; width: 100%; max-width: 340px; }
}
@media (max-width: 420px) {
    .phone-frame { width: 100%; max-width: 340px; height: 700px; border-radius: 34px; padding: 8px; }
    .phone-screen { border-radius: 26px; }
    .mobile-showcase { padding: 1.75rem 1rem 3.5rem; }
    .mobile-showcase-heading h1 { font-size: 1.7rem; }
}