/* Abang Recond: Arial regular/bold, black, white and Ferrari red. */
:root {
  --brand-red: #FF2800;
}
body, button, input, select, textarea {
  font-family: Arial, sans-serif;
}
body { font-weight: 400; }
h1, h2, h3, h4, h5, h6, b, strong { font-weight: 700; }
/* Keep decorative icon fonts supplied by their own icon libraries. */
.hero .btn-primary {
  background: #FF2800;
  color: #fff;
}
.hero .btn-primary:hover { background: #d92200; }
.hero-popular a { color: #fff; }
.motor-warranty-note { background: #f5f5f5; color: #111; }
.motor-warranty-note span { color: #444; }
/* Price and status text retain contrast on dark surfaces. */
.ar-ai-price { color: #111; }
/* Dashboard indicators stay visible against their black backgrounds. */
body:has(.master-switch) {
  --green-ai: #fff;
  --green-ai-bg: rgba(255,255,255,.12);
  --green-ai-border: rgba(255,255,255,.35);
  --bg-chat-bubble-out: #333;
}

.stock-cover { display:block; overflow:hidden; background:#f5f5f5; aspect-ratio:8/5; }
.stock-cover[hidden] { display:none; }
.stock-cover img { display:block; width:100%; height:100%; object-fit:cover; }
.detail-photo .photo-link img { width:100%; height:100%; max-height:520px; object-fit:contain; background:#f5f5f5; }


/* =====================================================================
   AR STOCK DETAIL — BLACK/GOLD + ICONIC WHATSAPP GREEN • 2026-10-09
   Only server-rendered /stock/<unit> pages carry data-tiktok-stock.
   Keep this in ar-theme.css: Edge Function already loads this file, so
   stylesheet changes do not require editing or rebuilding the Edge code.
   ===================================================================== */
body[data-tiktok-stock]{
  --ar-gold:#D4AF37;--ar-gold-soft:#F3E5AB;--ar-gold-dark:#AA7C11;
  --ar-green:#25D366;--ar-green-ink:#052A16;
  --ar-surface:#141419;--ar-surface-raised:#1D1D22;
  --ar-line:rgba(212,175,55,.23);--ar-text:#F5F5F7;--ar-muted:#B5B3B0;
  background:radial-gradient(ellipse at 50% -100px,rgba(212,175,55,.15),transparent 520px),#0A0A0C;
  color:var(--ar-text);font-family:'Plus Jakarta Sans','Segoe UI',Arial,sans-serif;
  line-height:1.55;-webkit-text-size-adjust:100%;overflow-x:hidden;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
body[data-tiktok-stock] :is(button,a,input,select){-webkit-tap-highlight-color:rgba(212,175,55,.18)}
body[data-tiktok-stock] .wrap{max-width:800px;padding:24px max(14px,env(safe-area-inset-right,0px)) 64px max(14px,env(safe-area-inset-left,0px))}
body[data-tiktok-stock] .card{background:var(--ar-surface);color:var(--ar-text);border:1px solid var(--ar-line);border-radius:22px;padding:24px;box-shadow:0 16px 50px rgba(0,0,0,.37)}
body[data-tiktok-stock] h1{color:var(--ar-text);font-family:'Plus Jakarta Sans','Segoe UI',Arial,sans-serif;font-size:clamp(21px,4.8vw,28px);line-height:1.28;letter-spacing:-.03em;overflow-wrap:break-word}
body[data-tiktok-stock] .price{color:var(--ar-gold-soft);font-family:'Plus Jakarta Sans',Arial,sans-serif;font-weight:800;font-size:clamp(27px,6vw,34px);margin:12px 0}
body[data-tiktok-stock] .badge{background:rgba(212,175,55,.12);color:var(--ar-gold-soft);border:1px solid var(--ar-line);padding:5px 11px}
body[data-tiktok-stock] .card > .badge[style]{background:rgba(212,175,55,.11)!important;color:var(--ar-gold-soft)!important;margin-left:6px}
body[data-tiktok-stock] .grid{color:var(--ar-text);gap:15px 14px;margin:20px 0}
body[data-tiktok-stock] .grid div{min-width:0;overflow-wrap:anywhere}
body[data-tiktok-stock] .grid div b{color:var(--ar-muted);font-size:11px;letter-spacing:.04em;margin-bottom:2px}
body[data-tiktok-stock] .remark{background:var(--ar-surface-raised);border:1px solid var(--ar-line);border-radius:13px;padding:13px 15px;color:var(--ar-text);font-size:13px;overflow-wrap:anywhere}
body[data-tiktok-stock] .remark b{color:var(--ar-gold-soft)}
body[data-tiktok-stock] .card img[width="640"]{background:#0A0A0C!important;border:1px solid var(--ar-line);border-radius:16px!important}
body[data-tiktok-stock] .cta{gap:12px;margin-top:22px}
body[data-tiktok-stock] .btn{border-radius:13px;min-height:52px;display:inline-flex;justify-content:center;align-items:center;gap:7px;transition:background-color .15s ease,border-color .15s ease,transform .15s ease;line-height:1.3}
body[data-tiktok-stock] .btn-wa,
body[data-tiktok-stock] #unitCalcWa,
body[data-tiktok-stock] #motorCalcWa{background:var(--ar-green);color:var(--ar-green-ink);border:1px solid #25D366;font-weight:800;box-shadow:0 5px 20px rgba(37,211,102,.17)}
body[data-tiktok-stock] .btn-wa:hover,
body[data-tiktok-stock] #unitCalcWa:hover,
body[data-tiktok-stock] #motorCalcWa:hover{background:#47E27F;color:var(--ar-green-ink)}
body[data-tiktok-stock] .btn-drive{background:linear-gradient(135deg,var(--ar-gold-soft),var(--ar-gold));color:#0A0A0C;border:1px solid var(--ar-gold)}
body[data-tiktok-stock] .btn-drive:hover{background:var(--ar-gold-soft);color:#0A0A0C}
body[data-tiktok-stock] .btn-primary{background:transparent;color:var(--ar-gold-soft);border:1.5px solid var(--ar-gold);box-shadow:inset 0 0 0 1px rgba(212,175,55,.07)}
body[data-tiktok-stock] .btn-primary:hover{background:rgba(212,175,55,.11);color:var(--ar-gold-soft)}
body[data-tiktok-stock] .share{margin-top:20px;gap:12px}
body[data-tiktok-stock] .share span{color:var(--ar-muted)}
body[data-tiktok-stock] .share a{width:44px;height:44px}
body[data-tiktok-stock] .share .wa{background:var(--ar-green)}
body[data-tiktok-stock] .share .fb{background:#1877F2}
body[data-tiktok-stock] .back{display:inline-flex;align-items:center;color:var(--ar-gold-soft);font-weight:700;margin-top:22px}
body[data-tiktok-stock] .back:hover{text-decoration:underline}
body[data-tiktok-stock] .unit-calc{border-top:1px solid var(--ar-line);margin-top:24px;padding-top:24px}
body[data-tiktok-stock] .unit-calc h3,
body[data-tiktok-stock] .motor-calc h4,
body[data-tiktok-stock] .booking-box h4,
body[data-tiktok-stock] .repayment-section h4{color:var(--ar-text)!important}
body[data-tiktok-stock] .unit-calc-sub,
body[data-tiktok-stock] .field label,
body[data-tiktok-stock] .repayment-note,
body[data-tiktok-stock] .calc-help,
body[data-tiktok-stock] .motor-calc-note,
body[data-tiktok-stock] .motor-cap,
body[data-tiktok-stock] .finance-note{color:var(--ar-muted)}
body[data-tiktok-stock] .pill{background:rgba(212,175,55,.1);color:var(--ar-gold-soft);border:1px solid var(--ar-line);padding:6px 11px}
body[data-tiktok-stock] .field input,
body[data-tiktok-stock] .field select{background:#0F0F13;border:1px solid rgba(255,255,255,.2);color:var(--ar-text);border-radius:12px;min-height:46px;color-scheme:dark}
body[data-tiktok-stock] .field input:focus,
body[data-tiktok-stock] .field select:focus{outline:2px solid var(--ar-gold);outline-offset:1px}
body[data-tiktok-stock] .field input[readonly]{background:#25252A;color:var(--ar-muted)}
body[data-tiktok-stock] .field a[style]{color:var(--ar-gold-soft)!important}
body[data-tiktok-stock] .calc-row{color:var(--ar-text);border-bottom:1px solid var(--ar-line)}
body[data-tiktok-stock] .calc-row b{color:var(--ar-gold-soft)}
body[data-tiktok-stock] .calc-row .total{color:var(--ar-gold-soft)}
body[data-tiktok-stock] .repay-box,
body[data-tiktok-stock] .motor-selected-finance div{background:var(--ar-surface-raised);border:1px solid var(--ar-line);border-radius:13px}
body[data-tiktok-stock] .repay-box .label,
body[data-tiktok-stock] .repay-box small,
body[data-tiktok-stock] .motor-selected-finance span,
body[data-tiktok-stock] .motor-loan-row .rate{color:var(--ar-muted)}
body[data-tiktok-stock] .repay-box strong,
body[data-tiktok-stock] .motor-selected-finance b,
body[data-tiktok-stock] .selected-monthly,
body[data-tiktok-stock] .motor-loan-row .monthly{color:var(--ar-gold-soft)}
body[data-tiktok-stock] .booking-box{background:linear-gradient(135deg,rgba(212,175,55,.1),rgba(212,175,55,.03));border:1px solid var(--ar-line);border-radius:16px;color:var(--ar-text);padding:18px}
body[data-tiktok-stock] .booking-point{color:var(--ar-text)}
body[data-tiktok-stock] .booking-point span{color:var(--ar-gold)}
body[data-tiktok-stock] .motor-warranty-note{background:rgba(212,175,55,.1);border:1px solid var(--ar-line);color:var(--ar-gold-soft)}
body[data-tiktok-stock] .motor-calc{border-top-color:var(--ar-line)}
body[data-tiktok-stock] .motor-loan-row{border-bottom-color:var(--ar-line)}
body[data-tiktok-stock] .finance-note{background:transparent}
body[data-tiktok-stock] :focus-visible{outline:2px solid var(--ar-gold);outline-offset:3px}
@media(max-width:620px){
  body[data-tiktok-stock] .wrap{padding:12px 10px 40px}
  body[data-tiktok-stock] .card{padding:16px;border-radius:18px}
  body[data-tiktok-stock] .grid{gap:16px 12px}
  body[data-tiktok-stock] .cta{flex-direction:column}
  body[data-tiktok-stock] .cta .btn{width:100%}
  body[data-tiktok-stock] .repay-grid,
  body[data-tiktok-stock] .motor-selected-finance{grid-template-columns:1fr}
  body[data-tiktok-stock] .motor-loan-row{gap:6px;font-size:11px}
}
@media(max-width:370px){body[data-tiktok-stock] .grid{grid-template-columns:1fr}}
@media(pointer:coarse){body[data-tiktok-stock] .field :is(input,select){font-size:16px}}
@media(prefers-reduced-motion:reduce){body[data-tiktok-stock] .btn{transition:none}}