/* =====================================================================
   premium.css — Avtar premium look + smooth feel
   Loaded AFTER style.css, so everything here simply refines the base styles.
   To roll back the new look, remove the <link> to this file in index.html.
   ===================================================================== */

/* Self-hosted font (no Google Fonts round-trip → text shows instantly, works offline) */
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/fonts/jakarta-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/fonts/jakarta-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Design tokens ---------- */
:root{
  --bg:#f3f5f4;
  --surface:#ffffff;
  --surface-2:#f6f8f7;
  --surface-3:#eef3f0;
  --border:#e6ebe8;
  --border-strong:#d3ddd8;
  --text:#0d1512;
  --text-dim:#56635d;
  --text-faint:#8d9a94;
  --amber:#0e8a62;          /* primary (kept var name so every old rule picks it up) */
  --amber-dim:#dcf1e7;
  --green:#0e8a62;
  --red:#d93a35;
  --blue:#2563eb;
  --grad-start:#0a3326;     /* deep emerald header */
  --grad-end:#0f5a42;
  --gold:#c9a14a;
  --gold-soft:#f6edd6;
  --ink:#0b1410;
  --radius:16px;
  --shadow-1:0 1px 2px rgba(13,21,18,.04),0 2px 8px rgba(13,21,18,.05);
  --shadow-2:0 2px 4px rgba(13,21,18,.04),0 10px 28px rgba(13,21,18,.08);
  --ease:cubic-bezier(.2,.8,.2,1);
}
[data-theme="dark"]{
  --bg:#0b100e;
  --surface:#141b18;
  --surface-2:#18201c;
  --surface-3:#1d2622;
  --border:#232d29;
  --border-strong:#33413a;
  --text:#eef3f0;
  --text-dim:#a6b4ad;
  --text-faint:#6c7b74;
  --amber:#22b07f;
  --amber-dim:#123327;
  --gold-soft:#2a2414;
  --shadow-1:0 1px 2px rgba(0,0,0,.3);
  --shadow-2:0 8px 24px rgba(0,0,0,.35);
}

/* ---------- Base: crisp type, native-feeling touch ---------- */
html{-webkit-tap-highlight-color:transparent;scroll-behavior:auto;}
body{
  background:var(--bg);
  font-feature-settings:"tnum" 1,"ss01" 1;   /* tabular numbers → prices/timers don't jiggle */
  text-rendering:optimizeLegibility;
}
a,button,.btn,.chip,.list-card,.card,.bottom-nav-item,.share-btn,.admin-tab{
  touch-action:manipulation;                 /* no 300ms tap delay */
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,h4{letter-spacing:-.025em;}
.page-head h1{font-size:1.65rem;font-weight:800;}

/* Inside the installed app (TWA / home-screen PWA): no bounce, no text-select handles */
.native-app, .native-app body{overscroll-behavior-y:none;}
.native-app *:not(input):not(textarea):not(select){-webkit-user-select:none;user-select:none;}
.native-app input, .native-app textarea{-webkit-user-select:text;user-select:text;}

/* ---------- Topbar: deep emerald, white type ---------- */
.topbar{
  background:linear-gradient(120deg,var(--grad-start) 0%,var(--grad-end) 100%);
  border-bottom:0;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 6px 20px rgba(10,51,38,.18);
  padding-top:env(safe-area-inset-top,0);
}
.brand,.brand-accent{color:#fff;opacity:1;}
.brand-text{font-weight:800;letter-spacing:-.02em;}
.brand-mark{
  background:linear-gradient(145deg,#f2d488,var(--gold)) !important;
  box-shadow:0 2px 8px rgba(201,161,74,.35);
  border-radius:9px;width:30px;height:30px;
}
.brand-mark svg path{fill:#2b220c;}
.main-nav a{color:rgba(255,255,255,.78);opacity:1;}
.main-nav a:hover,.main-nav a.active{background:rgba(255,255,255,.12);color:#fff;}
.wallet-pill{
  background:rgba(255,255,255,.1);border:1px solid rgba(201,161,74,.55);color:#fff;
  font-weight:700;letter-spacing:.01em;
}
.wallet-pill::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--gold);margin-right:7px;vertical-align:1px;box-shadow:0 0 0 3px rgba(201,161,74,.18);
}
.topbar .btn-ghost{color:#fff;border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06);}
.topbar .btn-primary{background:var(--gold);color:#2b220c;}
.topbar .theme-toggle-btn,.topbar .lang-toggle-btn{color:#fff;border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06);}

/* ---------- Buttons ---------- */
.btn{
  border-radius:12px;font-weight:700;letter-spacing:.005em;
  transition:transform .12s var(--ease),box-shadow .2s var(--ease),filter .2s;
}
.btn:hover{filter:none;}
.btn:active{transform:scale(.965);}
.btn-primary{
  background:linear-gradient(180deg,#12a074 0%,var(--amber) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 4px 12px rgba(14,138,98,.28);
}
.btn-primary:active{box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 2px 6px rgba(14,138,98,.25);}
.btn-ghost{background:var(--surface);border:1px solid var(--border-strong);}
.btn-danger{box-shadow:0 4px 12px rgba(217,58,53,.22);}

/* ---------- Cards & lists ---------- */
.list{gap:14px;}
.list-card,.card,.panel,.wallet-box,.stat-card,.settings-section,.form-card,
.payment-topup-card,.online-payment-card{
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow-1);
}
.list-card{padding:14px;transition:transform .14s var(--ease),box-shadow .2s var(--ease);}
.list-card:hover{box-shadow:var(--shadow-2);border-color:var(--border);}
.list-card:active{transform:scale(.985);}
.card:hover{transform:none;box-shadow:var(--shadow-2);}
.list-thumb{border-radius:14px;background:var(--surface-2);border:1px solid var(--border);}
.list-thumb img{object-fit:cover;}
.list-title{font-weight:800;letter-spacing:-.01em;}
.list-amount b{font-weight:800;color:var(--text);}
.list-timer{
  background:var(--ink);color:#fff;border:0;
  border-radius:999px;padding:4px 10px;font-weight:700;letter-spacing:.02em;
  box-shadow:0 2px 6px rgba(11,20,16,.18);
}
.list-timer::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#ff5a4f;margin-right:6px;vertical-align:1px;animation:avtar-blink 1.6s ease-in-out infinite;
}
@keyframes avtar-blink{0%,100%{opacity:1}50%{opacity:.25}}
.quick-bid-badge{background:var(--gold-soft);color:#6b5217;font-weight:800;border:1px solid rgba(201,161,74,.4);}
.quick-bid-badge .icon{stroke:#6b5217;}
.grade-badge{background:var(--amber-dim);color:#0a5c41;font-weight:700;}
[data-theme="dark"] .grade-badge{color:#7fe0b8;}
.share-btn{border-color:var(--border);box-shadow:var(--shadow-1);}
.live-dot{background:#ff5a4f;}

/* ---------- Search ---------- */
.search-bar{border-radius:14px;box-shadow:var(--shadow-1);border-color:var(--border);}
.search-bar:focus-within{border-color:var(--amber);box-shadow:0 0 0 4px rgba(14,138,98,.12);}
.search-refresh-btn{border-radius:14px;box-shadow:var(--shadow-1);}
.chip{border-radius:999px;font-weight:600;}
.chip.active{background:var(--ink);border-color:var(--ink);}

/* ---------- Forms ---------- */
.form-field input,.form-field select,.form-field textarea,.bid-form input,.amount-field{
  border-radius:12px !important;
  transition:border-color .15s,box-shadow .15s;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus,.bid-form input:focus{
  outline:none;border-color:var(--amber) !important;box-shadow:0 0 0 4px rgba(14,138,98,.12);
}

/* ---------- Wallet "bank card" ---------- */
.wallet-dark-card{
  background:radial-gradient(120% 140% at 100% 0%,rgba(201,161,74,.28) 0%,rgba(201,161,74,0) 55%),
             linear-gradient(135deg,#0b1d17 0%,#0f3a2c 60%,#0a2b20 100%) !important;
  background-blend-mode:normal !important;
  border-radius:22px;
  box-shadow:0 14px 34px rgba(10,43,32,.32);
  position:relative;overflow:hidden;
}
.wallet-dark-card::after{
  content:"";position:absolute;right:-40px;bottom:-60px;width:180px;height:180px;border-radius:50%;
  border:1px solid rgba(201,161,74,.25);pointer-events:none;
}
.wallet-dark-row .label{color:rgba(255,255,255,.6);}
.wallet-dark-row .val{font-weight:800;letter-spacing:-.01em;}

/* ---------- Product detail ---------- */
.detail-media{border-radius:20px !important;box-shadow:var(--shadow-1);}
.bid-current,.buy-now-price{font-weight:800;letter-spacing:-.02em;}
.detail-gallery-strip img{border-radius:12px;transition:transform .15s var(--ease),box-shadow .15s;}
.detail-gallery-strip img.active{box-shadow:0 0 0 2px var(--amber);}

/* ---------- Bottom nav: solid (no blur = smooth scrolling on low-end phones) ---------- */
.bottom-nav{
  background:var(--surface) !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  border-top:1px solid var(--border);
  box-shadow:0 -6px 20px rgba(13,21,18,.06);
}
.bottom-nav-item{position:relative;transition:color .2s;padding-top:10px;}
.bottom-nav-item .bottom-nav-icon{
  display:flex;align-items:center;justify-content:center;
  width:52px;height:30px;border-radius:999px;transition:background .25s var(--ease),transform .2s var(--ease);
}
.bottom-nav-item.active{color:var(--amber);}
.bottom-nav-item.active .bottom-nav-icon{background:var(--amber-dim);}
.bottom-nav-item:active .bottom-nav-icon{transform:scale(.9);}
.bottom-nav-label{font-weight:700;letter-spacing:.01em;}

/* ---------- Modals & toasts ---------- */
.modal-backdrop{background:rgba(6,12,10,.55);animation:avtar-fade .18s ease-out;}
.modal{border-radius:22px;box-shadow:0 24px 60px rgba(0,0,0,.25);animation:avtar-pop .22s var(--ease);}
@media(max-width:700px){
  .modal-backdrop{align-items:flex-end;padding:0;}
  .modal{
    border-radius:24px 24px 0 0;max-width:100%;max-height:88vh;
    padding-bottom:calc(26px + env(safe-area-inset-bottom,0));
    animation:avtar-sheet .26s var(--ease);
  }
}
@keyframes avtar-fade{from{opacity:0}to{opacity:1}}
@keyframes avtar-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes avtar-sheet{from{transform:translateY(100%)}to{transform:none}}
.toast{
  background:var(--ink);color:#fff;border:0;border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.25);font-weight:600;
}
@media(max-width:700px){
  .toast-stack{left:14px;right:14px;top:auto;bottom:calc(76px + env(safe-area-inset-bottom,0));align-items:center;}
  .toast{max-width:100%;animation:avtar-pop .22s var(--ease);}
}

/* ---------- Page transition: content eases in on every screen change ---------- */
.app.page-enter{animation:avtar-page .24s var(--ease) both;}
@keyframes avtar-page{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Skeleton loaders (replace plain "Loading…") ---------- */
.sk-wrap{display:flex;flex-direction:column;gap:14px;padding:4px 0;}
.sk-card{
  display:flex;gap:12px;background:var(--surface);border:1px solid var(--border);
  border-radius:18px;padding:14px;box-shadow:var(--shadow-1);
}
.sk{
  background:linear-gradient(90deg,var(--surface-3) 0%,var(--surface-2) 40%,var(--surface-3) 80%);
  background-size:300% 100%;animation:avtar-shimmer 1.2s ease-in-out infinite;border-radius:10px;
}
.sk-thumb{width:72px;height:72px;border-radius:14px;flex:none;}
.sk-lines{flex:1;display:flex;flex-direction:column;gap:9px;padding-top:4px;}
.sk-line{height:12px;}
.sk-line.w40{width:40%}.sk-line.w60{width:60%}.sk-line.w80{width:80%}
@keyframes avtar-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* Images fade in once decoded instead of popping */
.list-thumb img,.detail-media img,.inventory-detail-media img,.card-media img{
  animation:avtar-fade .3s ease-out;
}

/* ---------- WhatsApp button: lighter shadow ---------- */
.whatsapp-float-btn{box-shadow:0 6px 18px rgba(37,211,102,.35);}

/* ---------- Footer ---------- */
.site-footer{border-top:0;color:var(--text-faint);}

/* ---------- Respect "reduce motion" accessibility setting ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}

/* ---------- Detail page refinements ---------- */
.detail-view-more{
  border:1px solid var(--border) !important;border-radius:14px !important;
  background:var(--surface) !important;color:var(--text) !important;
  box-shadow:var(--shadow-1);font-weight:700;
}
.detail-view-more .icon{stroke:var(--amber);}
.detail-view-more:active{transform:scale(.98);}
@media(max-width:700px){
  .detail-grid h1{font-size:1.55rem;line-height:1.2;}
}

/* Buy Now: deep ink instead of plain blue — reads more premium next to the emerald brand */
.btn-blue{background:linear-gradient(180deg,#1c2a24 0%,var(--ink) 100%);color:#fff;box-shadow:0 4px 14px rgba(11,20,16,.25);}
[data-theme="dark"] .btn-blue{background:linear-gradient(180deg,#f2d488,var(--gold));color:#2b220c;}
.buy-now-price,.price-val.blue{color:var(--text) !important;}
[data-theme="dark"] .quick-bid-badge{color:#e8cf8f;}
[data-theme="dark"] .quick-bid-badge .icon{stroke:#e8cf8f;}

/* Radios/checkboxes never stretch full-width (was pushing option text off to the side) */
input[type="radio"],input[type="checkbox"]{width:auto !important;flex:none;margin:0;accent-color:var(--amber);}
input[type="radio"]{width:18px !important;height:18px;}
/* Payment choice in Buy Now: tappable option cards */
#bnPayOptions{display:flex;flex-direction:column;gap:10px;}
#bnPayOptions label{
  align-items:flex-start !important;gap:12px !important;padding:13px 14px;border:1px solid var(--border);
  border-radius:14px;background:var(--surface);cursor:pointer;line-height:1.4;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
#bnPayOptions label input{margin-top:2px;}
#bnPayOptions label:has(input:checked){border-color:var(--amber);background:var(--amber-dim);box-shadow:0 0 0 3px rgba(14,138,98,.1);}

/* =====================================================================
   COLOUR THEME: original Avtar green + black accents
   (overrides the emerald/gold colours above; layout & smoothness stay the same)
   ===================================================================== */
:root{
  --bg:#eef5f1; --surface:#ffffff; --surface-2:#f3f8f5; --surface-3:#e9f3ee;
  --border:#e2ebe6; --border-strong:#cfe0d8;
  --text:#121815; --text-dim:#5c6b64; --text-faint:#93a29b;
  --amber:#1fa971; --green:#1fa971; --amber-dim:#c9ecdb;
  --grad-start:#8fe6b7; --grad-end:#3fbd8d;
  --ink:#111312;            /* the black */
  --gold:#1fa971; --gold-soft:#e9f3ee;
}
[data-theme="dark"]{
  --bg:#0f1512; --surface:#171f1a; --surface-2:#1c2620; --surface-3:#212c25;
  --border:#2a362f; --border-strong:#3a4a41;
  --text:#eef3f0; --text-dim:#a9b8b0; --text-faint:#6f8078;
  --amber:#1fa971; --amber-dim:#173829; --ink:#050606; --gold-soft:#1c2620;
}
/* Topbar: original light-green gradient, black text & black pills */
.topbar{box-shadow:0 4px 16px rgba(31,169,113,.18);}
.brand,.brand-accent{color:#111312;}
.brand-mark{background:#111312 !important;box-shadow:0 2px 8px rgba(0,0,0,.25);}
.brand-mark svg path{fill:#8fe6b7;}
.main-nav a{color:#111312;opacity:.75;}
.main-nav a:hover,.main-nav a.active{background:rgba(255,255,255,.4);color:#111312;opacity:1;}
.wallet-pill{background:#111312;border:1px solid #111312;color:#fff;}
.wallet-pill::before{background:#3fe0a0;box-shadow:0 0 0 3px rgba(63,224,160,.2);}
.topbar .btn-ghost{color:#111312;border-color:rgba(17,19,18,.35);background:rgba(255,255,255,.35);}
.topbar .btn-primary{background:#111312;color:#fff;box-shadow:none;}
.topbar .theme-toggle-btn,.topbar .lang-toggle-btn{color:#111312;border-color:rgba(17,19,18,.35);background:rgba(255,255,255,.35);}
/* Green buttons */
.btn-primary{background:linear-gradient(180deg,#27bb80 0%,#1fa971 100%);box-shadow:0 4px 12px rgba(31,169,113,.3);}
.btn-primary:active{box-shadow:0 2px 6px rgba(31,169,113,.25);}
.search-bar:focus-within,.form-field input:focus,.form-field select:focus,.form-field textarea:focus,.bid-form input:focus{box-shadow:0 0 0 4px rgba(31,169,113,.14);}
/* Black accents */
.btn-blue,[data-theme="dark"] .btn-blue{background:linear-gradient(180deg,#2a2d2b 0%,#111312 100%);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.25);}
[data-theme="dark"] .btn-blue{border:1px solid #2f3a34;}
.list-timer{background:#111312;}
.chip.active{background:#111312;border-color:#111312;}
.quick-bid-badge,[data-theme="dark"] .quick-bid-badge{background:#111312;color:#fff;border:1px solid #111312;}
.quick-bid-badge .icon,[data-theme="dark"] .quick-bid-badge .icon{stroke:#3fe0a0;}
.grade-badge{color:#0c4f34;}
.wallet-dark-card{
  background:radial-gradient(120% 140% at 100% 0%,rgba(63,189,141,.45) 0%,rgba(63,189,141,0) 55%),
             linear-gradient(135deg,#0b0c0c 0%,#161a18 60%,#0b0c0c 100%) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.3);
}
.wallet-dark-card::after{border-color:rgba(143,230,183,.25);}
#bnPayOptions label:has(input:checked){box-shadow:0 0 0 3px rgba(31,169,113,.12);}

/* New Avtar'lo logo mark (phone + A) inside the black brand box */
.brand-mark{padding:4px;}
.brand-mark img{width:100%;height:100%;object-fit:contain;}

/* ===== SCROLL FIX (permanent) =====
   Android WebView / Play Store app: "overflow-x:hidden" on BOTH html and body turns body into its
   own scroll box, which can swallow finger-swipes so the page won't scroll. "clip" hides sideways
   overflow WITHOUT creating a scroll box, so the normal page scroll always works. */
html{overflow-x:clip !important;overflow-y:auto !important;height:auto !important;-webkit-overflow-scrolling:touch;}
body{overflow-x:clip !important;overflow-y:visible !important;height:auto !important;min-height:100%;position:static !important;touch-action:pan-x pan-y;}
/* Popup open → lock background scroll with a class (auto-released by app.js, can never get stuck) */
html.modal-open, html.modal-open body{overflow:hidden !important;}
.modal{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;}
.modal-backdrop{touch-action:pan-y;}
/* No-text-select only on tappable UI (a universal * selector is heavy on Android and can fight touch) */
.native-app *:not(input):not(textarea):not(select){-webkit-user-select:auto;user-select:auto;}
.native-app button,.native-app .btn,.native-app .bottom-nav-item,.native-app .chip,.native-app .share-btn,.native-app img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
.native-app, .native-app body{overscroll-behavior-x:none;overscroll-behavior-y:auto;}
html.native-app{overscroll-behavior-y:none;}