/* HAKAWIN store — G2 additions to Sara's approved S1 design (identity A, D22).
   tokens.css / base.css / watermark.css are byte-identical copies of the frozen design snapshot; this file only
   (1) turns the design's inline style="" attributes into classes (the store's CSP forbids inline styles), and
   (2) styles the pages the design does not cover, with the design's own tokens and components ("interpretation",
   listed in out/G2/REPORT_G2.md). No new colours, fonts or radii. */

/* (1) inline styles of the design, as classes (same values) */
.c-primary{color:var(--primary)}
.hero-art .deco.d1{inset-inline-start:2%;bottom:6%}
.hero-art .deco.d2{inset-inline-end:0;bottom:16%;width:22px;height:22px}
.section.pt32{padding-top:32px}
.section.alt{background:var(--bg-2)}
.trust h2.t2xl{font-size:var(--t-2xl)}
.trust-list.mt16{margin-top:16px}
.footer-tag{margin-top:8px}
.hk-help.center{text-align:center}
.steps.mt12{margin-top:12px}
.step h3.tbase{font-size:var(--t-base)}
.preview-title{font-size:var(--t-2xl);color:var(--primary)}
.hk-help.mt4{margin-top:4px}
.order-meta dd.tbase{font-size:var(--t-base)}
.price-row.mt12{margin-top:12px}
.hk-help.m0{margin:0}
.form-note.mt0{margin-top:0}
.hk-help.mt12{margin-top:12px}
.sticky-cta .btn.flex-none{flex:none}

/* product gallery without inline styles: the design's JS set figure.style.display; here a class does it */
@media (min-width:900px){
  .gallery-main.has-choice figure{display:none}
  .gallery-main.has-choice figure.is-shown{display:block}
}

/* soon-product cards: the title is the link to the product page (the design shows no button on these cards) */
.p-card h3 a{color:inherit;text-decoration:none}
.p-card h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.p-card h3 a:focus-visible{outline:none}
.p-card:has(h3 a:focus-visible){outline:3px solid var(--focus);outline-offset:3px}

/* (2) interpretation — pages the design does not show, built from its components */
.narrow{max-width:720px;margin-inline:auto}
/* interpretation: pages without a stepper get the same top rhythm as the stepper (16px + 20px) */
main > .narrow:first-child{margin-top:36px}
.page-head{margin-bottom:16px}
.page-head h1{font-size:var(--t-2xl);font-weight:800;color:var(--primary)}
.page-head p{color:var(--muted);margin-top:6px}
.form-card + .form-card,.form-card + .notice,.notice + .form-card{margin-top:16px}
.form-card h2{font-size:var(--t-xl);margin-bottom:8px}
.form-card > p + p{margin-top:10px}
.stack > * + *{margin-top:12px}

/* status / spinner (generating pages) */
.status-card{text-align:center;display:grid;justify-items:center;gap:12px}
.spinner{width:56px;height:56px;border-radius:50%;border:5px solid var(--gold-tint);border-top-color:var(--primary);animation:hk-spin 1s linear infinite}
@keyframes hk-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:3s}}
.status-icon{width:64px;height:64px}

/* notices: error / success variants of the design's .notice */
.notice.is-error{background:var(--error-tint);color:#7D1C15}
.notice.is-error svg{color:var(--error)}
.notice.is-ok{background:var(--accent-tint)}
.notice p + p{margin-top:6px}
.draft-banner{display:flex;gap:10px;align-items:flex-start;background:var(--ink);color:var(--bg);border-radius:14px;padding:12px 14px;font-size:var(--t-sm);font-weight:700;margin-block:12px 20px}

/* order summary rows (reuses .order-meta of the preview page) */
.order-meta bdi{font-family:var(--f-body);letter-spacing:.04em}

/* success / delivery */
.success-text{font-size:var(--t-lg);font-weight:700;color:var(--ink)}
.dl-row{margin-top:16px}
.ref-big{font-family:var(--f-display);font-weight:800;font-size:var(--t-2xl);color:var(--primary);letter-spacing:.06em;direction:ltr;unicode-bidi:isolate;margin-block:4px}

/* support form: textarea + three choices, same look as .hk-input / .hk-choice */
textarea.hk-input{min-height:160px;font-family:var(--f-body);font-weight:500;font-size:var(--t-base);line-height:1.7;resize:vertical;padding:12px 16px}
.hk-input.hk-small{font-family:var(--f-body);font-weight:700;font-size:var(--t-base)}
.hk-choices.three{grid-template-columns:1fr}
@media (min-width:600px){.hk-choices.three{grid-template-columns:repeat(3,1fr)}}
.hk-choices.three .hk-choice{font-size:var(--t-base)}
.hk-field.is-invalid textarea.hk-input{border-color:var(--error)}

/* disabled (coming-soon) form: declared structure, not usable */
.hk-field[disabled] .hk-choice,.hk-field .hk-input:disabled{background:var(--bg-2);border-color:var(--line);color:var(--muted);cursor:not-allowed}
fieldset.soon-fields{border:0;padding:0;margin:0;min-width:0}
.soon-cover{max-width:340px;margin-inline:auto;width:100%;box-shadow:var(--shadow-2)}
.soon-cover .c-title{font-size:clamp(1.25rem,1rem + 1.2vw,1.75rem)}

/* submitting state of the order form (the design's .btn[disabled] look + a small spinner) */
.btn[aria-busy="true"]::before{content:"";width:18px;height:18px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--muted);animation:hk-spin 1s linear infinite}

/* privacy draft document */
.doc h2{font-size:var(--t-xl);margin-top:24px;margin-bottom:6px}
.doc ul{margin:0;padding-inline-start:20px}
.doc li + li{margin-top:4px}
.doc p,.doc li{color:var(--ink)}
.back-link{margin-top:16px;text-align:center}
/* G3 (D24): buyer acknowledgment on the payment page — native checkbox + text, design tokens only */
.hk-consent{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;margin:16px 0}
.hk-consent input{flex:none;width:22px;height:22px;margin:3px 0 0;accent-color:var(--primary);cursor:pointer}
.hk-consent input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.hk-consent label{flex:1;min-width:0;font-size:var(--t-sm);color:var(--ink);cursor:pointer}
.hk-consent .hk-error{flex-basis:100%;margin-top:0}
.hk-field.hk-consent.is-invalid input{outline:2px solid var(--error);outline-offset:2px}

/* G5b: sample / preview images (watermarked 50-DPI files from /theme/img/ and /order/…/preview/): not draggable or selectable;
   not printable — in print they are hidden and the note added by app.js («المعاينة غير قابلة للطباعة») is shown in their place. */
img[src^="/theme/img/"],img[src*="/preview/"]{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.hk-noprint{display:none}
@media print{
  img[src^="/theme/img/"],img[src*="/preview/"]{display:none!important;visibility:hidden!important}
  .thumbs{display:none!important}
  .hk-noprint{display:flex!important;align-items:center;justify-content:center;min-height:6em;padding:1em;text-align:center;
    font-weight:700;color:#000;border:1px dashed #000;border-radius:8px;background:#fff}
  .cover .hk-noprint{position:absolute;inset:0;min-height:0;padding:.25em;font-size:.7rem}
}

/* G5c: «رحلتي لتعلّم الحمام» boy / girl samples — product-page toggle (links), neutral pair of covers, order-form covers */
.hk-variant{display:flex;justify-content:center;gap:8px;margin-bottom:12px;scroll-margin-top:96px}
.hk-variant .btn{min-width:96px}
.hk-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hk-covers{display:flex;gap:8px;flex:none}
.hk-covers .is-off{display:none}
.hk-covers:not(.is-chosen) .mini{width:64px}
@media (min-width:900px){.hk-covers:not(.is-chosen) .mini{width:120px}}

/* G9: bank-transfer page, payment states, admin dashboard */
.footer-contact{margin-top:8px;font-size:var(--t-sm)}
.footer-contact a{color:var(--on-primary);text-decoration:underline;font-weight:500}
.ref-box{text-align:center;margin-bottom:12px}
.ref-box .ref-big{direction:ltr;letter-spacing:.08em}
.ref-mid{font-size:1.15rem;font-weight:700;letter-spacing:.05em}
.state-badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:var(--t-sm);font-weight:700;background:var(--gold-tint);color:var(--ink)}
.state-badge.st-uploaded{background:#FFF1C9;color:#6B4B00}
.state-badge.st-confirmed{background:var(--accent-tint);color:#14532D}
.state-badge.st-rejected{background:var(--error-tint);color:#7D1C15}
.pay-steps{margin:8px 0 12px;padding-inline-start:22px}
.pay-steps li{margin:4px 0}
.pay-method{border:1px solid var(--line, #e5e0d8);border-radius:12px;padding:10px 12px;margin-top:10px}
.pay-method h3{margin:0 0 6px;font-size:1rem}
.pay-method bdi{font-family:monospace;word-break:break-all}
.admin{padding-top:16px;padding-bottom:24px}
.admin-summary{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0 0 12px;padding:0}
.admin-summary li{display:flex;align-items:center;gap:6px}
.admin-logout{margin:0 0 12px}
.admin-list{display:grid;gap:12px}
.admin-card .price-row{margin-bottom:8px}
.receipt-thumb{display:block;max-width:100%;max-height:260px;margin:10px auto;border:1px solid #ddd;border-radius:8px}
.admin-actions{display:grid;gap:10px;margin-top:10px}
.admin-actions textarea{min-height:64px}

/* Store UI fixes (CEO-approved via COO, 2 Nov 2026) — store theme only, not a synced design copy.
   1) struck-through (old) price: smaller and lighter than the current price, still legible (--muted = 6.46:1 on --bg).
   2) «خصّص الكتاب» stays on one line (bundle page at 390 px wrapped to two lines); tighter padding on small phones. */
.price-offer .price-was{font-size:max(.75em,var(--t-xs));font-weight:500;color:var(--muted)}
.btn.customize{white-space:nowrap}
@media (max-width:420px){.sticky-cta{gap:10px}.sticky-cta .btn.customize{padding-inline:16px}}
@media (max-width:359px){.sticky-cta .price-offer{white-space:normal;line-height:1.25}.sticky-cta .btn.customize{padding-inline:12px;font-size:var(--t-sm)}}
/* D1 (Fahad): home page at 320 px — the bundle card's offer price («بدلًا من ٩٩ ر.س ٧٩ ر.س سعر الإطلاق», nowrap) pushed the
   page to 338 px. On small phones the offer price may wrap and shrink beside its button (no change from 360 px up). */
@media (max-width:359px){.price-offer{white-space:normal;min-width:0;line-height:1.25}}