/* =========================================================
   Gallery Dastaneh — shared styles (tokens, base, header, buttons)
   ========================================================= */

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/vazirmatn/Vazirmatn-Variable.woff2') format('woff2-variations'),
         url('../fonts/vazirmatn/Vazirmatn-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #F5EDDF;
    --bg-alt: #FBF6EA;
    --ink: #3A2B1E;
    --ink-soft: #6B5B49;
    --bronze: #A9713F;
    --bronze-dark: #7A4A23;
    --card: #EFE0C4;
    --line: #E4D6BC;
    --muted: #8A7561;
    --dark: #2E2015;
    --ok: #5B8A5B;
    /* dark + gold accents shared by the home page and the order wizard */
    --espresso: #150E09;
    --espresso-2: #22170F;
    --espresso-3: #33241A;
    --gold: #D8B98A;
    --gold-2: #C9A24B;
    --gold-hi: #F3D98B;
    --cream-hi: #FBF6EA;
    --ease: cubic-bezier(.22,.8,.24,1);
}

* { box-sizing: border-box; }
/* the hidden attribute always wins over a component's own display (e.g. a flex form toggled by tabs) */
[hidden] { display: none !important; }

html { scroll-padding-top: env(safe-area-inset-top, 0px); }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; }
button { font-family: inherit; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

/* ---------- Header ---------- */
header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(6px);
}
.headrow { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.brand span { font-size: 20px; font-weight: 800; color: var(--bronze-dark); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 26px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 15px;
    border: none;
    cursor: pointer;
    transition: transform .25s, background .25s, opacity .2s;
}
.btn-primary { position: relative; overflow: hidden; isolation: isolate; color: #2A1C10; background: linear-gradient(135deg, var(--gold-hi), var(--gold) 45%, var(--gold-2));
    box-shadow: 0 8px 22px rgba(201,162,75,.32), inset 0 1px 0 rgba(255,255,255,.55); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(201,162,75,.45), inset 0 1px 0 rgba(255,255,255,.6); }
.btn-primary:disabled { background: var(--line); color: var(--muted); box-shadow: none; cursor: not-allowed; transform: none; }
.btn-outline { border: 1.5px solid var(--bronze); color: var(--bronze-dark); background: transparent; }
.btn-outline:hover { background: var(--bronze); color: #FBF6EA; transform: translateY(-2px); }

/* big gold call-to-action with a light sweep */
.btn-gold { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; border-radius: 40px; font-weight: 800; font-size: 16px;
    color: #2A1C10; background: linear-gradient(135deg, var(--gold-hi), var(--gold) 45%, var(--gold-2)); overflow: hidden; isolation: isolate;
    box-shadow: 0 10px 30px rgba(201,162,75,.35), inset 0 1px 0 rgba(255,255,255,.55); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.btn-gold::after, .btn-primary:not(:disabled)::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%); transform: translateX(-120%); animation: shine 4.5s ease-in-out infinite; }
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(201,162,75,.5), inset 0 1px 0 rgba(255,255,255,.6); }
.btn-gold svg { transition: transform .3s var(--ease); }
.btn-gold:hover svg { transform: translateX(-4px); }
.btn-gold.big { padding: 18px 38px; font-size: 18px; }
@keyframes shine { 0%, 55% { transform: translateX(120%); } 85%, 100% { transform: translateX(-120%); } }
.btn-ghost { display: inline-flex; align-items: center; padding: 14px 26px; border-radius: 40px; font-weight: 700; font-size: 15px; color: var(--cream-hi);
    border: 1.5px solid rgba(216,185,138,.45); background: rgba(255,255,255,.04); backdrop-filter: blur(6px); transition: background .3s, border-color .3s; }
.btn-ghost:hover { background: rgba(216,185,138,.14); border-color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .btn-gold::after, .btn-primary::after { animation: none; } }
.btn-sm { padding: 8px 18px; font-size: 13px; border-radius: 20px; }

@media (max-width: 640px) {
    .wrap { padding: 0 20px; }
}

/* ---------- Dark header (order wizard, account pages) ---------- */
header.order-header { background: rgba(21,14,9,.94); border-bottom: 1px solid rgba(216,185,138,.14); backdrop-filter: blur(12px); }
header.order-header .headrow { height: 74px; }
header.order-header .brand span { color: var(--gold); }
.back-home { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: rgba(251,246,234,.75); padding: 8px 14px; border-radius: 20px; border: 1px solid rgba(216,185,138,.25); transition: all .25s; }
.back-home:hover { color: var(--gold-hi); border-color: var(--gold); background: rgba(216,185,138,.08); }
.head-group { display: flex; align-items: center; gap: 10px; }
/* account chip: "ورود" or the signed-in customer's name */
.acct-link { display: inline-flex; align-items: center; gap: 8px; max-width: 190px; padding: 7px 14px 7px 8px; border-radius: 22px; font-size: 14px; font-weight: 700;
    color: var(--gold-hi); background: rgba(216,185,138,.12); border: 1px solid rgba(216,185,138,.35); transition: background .25s, border-color .25s; }
.acct-link:hover { background: rgba(216,185,138,.22); border-color: var(--gold); }
.acct-link .av { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800;
    color: var(--espresso); background: linear-gradient(135deg, var(--gold-hi), var(--gold)); }
.acct-link .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
    header.order-header .brand span { font-size: 17px; white-space: nowrap; }
    .back-home { padding: 8px 12px; white-space: nowrap; }
    .back-home .long { display: none; }
    .acct-link { padding: 5px; }
    .acct-link .nm { display: none; }
}

/* ---------- Dialog (DzUI.confirm / DzUI.alert in ui.js) ---------- */
.dz-dialog { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 18px; background: rgba(21,14,9,.55);
    backdrop-filter: blur(5px); opacity: 0; transition: opacity .2s; }
.dz-dialog.show { opacity: 1; }
.dzd-card { width: min(380px, 100%); padding: 26px 24px 20px; border-radius: 24px; text-align: center; color: var(--ink);
    background: var(--bg-alt); border: 1px solid var(--line); box-shadow: 0 30px 70px -20px rgba(21,14,9,.6);
    transform: translateY(10px) scale(.97); transition: transform .25s var(--ease); }
.dz-dialog.show .dzd-card { transform: none; }
.dzd-ico { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; font-size: 24px;
    background: linear-gradient(135deg, #FFF4DA, var(--card)); box-shadow: 0 0 0 6px rgba(216,185,138,.18); }
.dzd-card.danger .dzd-ico { background: #FBE9E4; box-shadow: 0 0 0 6px rgba(196,83,63,.12); }
.dzd-card h3 { margin: 0 0 6px; font-size: 17px; font-weight: 900; }
.dzd-card p { margin: 0 0 20px; font-size: 14px; line-height: 2; color: var(--ink-soft); white-space: pre-line; }
.dzd-acts { display: flex; gap: 10px; justify-content: center; }
.dzd-btn { flex: 1; max-width: 160px; padding: 12px 16px; border-radius: 14px; border: 0; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 800;
    color: #2A1C10; background: linear-gradient(135deg, var(--gold-hi), var(--gold) 50%, var(--gold-2)); box-shadow: 0 10px 22px -12px rgba(201,162,75,.9);
    transition: transform .2s; }
.dzd-btn:hover { transform: translateY(-1px); }
.dzd-btn:focus-visible { outline: 3px solid rgba(169,113,63,.45); outline-offset: 2px; }
.dzd-btn.ghost { color: var(--ink); background: #fff; border: 1px solid var(--line); box-shadow: none; }
.dzd-btn.danger { color: #fff; background: linear-gradient(135deg, #D0654F, #B23E2A); box-shadow: 0 10px 22px -12px rgba(178,62,42,.8); }
@media (prefers-reduced-motion: reduce) { .dz-dialog, .dzd-card { transition: none; } }

/* ---------- site footer (every public page) ---------- */
.site-foot { padding: 64px 0 30px; background: var(--espresso); color: rgba(251,246,234,.7); }
.foot-grid { display: flex; justify-content: space-between; gap: 34px 40px; flex-wrap: wrap; margin-bottom: 40px; }
.foot-col h4 { font-size: 14px; font-weight: 800; color: var(--cream-hi); margin: 0 0 16px; }
.foot-col a, .foot-col span { display: block; font-size: 13.5px; color: rgba(251,246,234,.65); margin-bottom: 11px; transition: color .2s; }
.foot-col a:hover { color: var(--gold-hi); }
.foot-col a.foot-brand { display: flex; margin-bottom: 14px; }
.foot-brand img.foot-logo { width: 46px; height: 46px; }
.foot-col .foot-brand span { font-size: 18px; color: var(--gold); margin: 0; }
.foot-about { max-width: 300px; font-size: 13.5px; line-height: 2; margin: 0; }
.foot-badge a, .foot-badge img { display: inline-block; margin: 0; }
.foot-badge img { max-width: 110px; height: auto; border-radius: 12px; background: #fff; padding: 4px; }
.copyright { text-align: center; font-size: 12px; color: rgba(251,246,234,.45); padding-top: 22px; border-top: 1px solid rgba(216,185,138,.15); }
@media (max-width: 640px) {
    .site-foot { padding: 48px 0 26px; }
    .foot-grid { display: grid; grid-template-columns: 1fr 1fr; }
    .foot-about-col { grid-column: 1 / -1; }
}

/* ---------- customer reviews (home page and /reviews) ---------- */
.rv-grid { columns: 3 280px; column-gap: 18px; }
.rvc { break-inside: avoid; margin: 0 0 18px; border-radius: 22px; overflow: hidden; background: var(--bg-alt, #FFFCF6); border: 1px solid var(--line, #E9DCC3);
    box-shadow: 0 18px 40px -30px rgba(46,32,21,.45); }
.rvc-pics { display: grid; gap: 3px; background: #F1E6D2; }
.rvc-pics.n2 { grid-template-columns: 1fr 1fr; }
.rvc-pics.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.rvc-pics.n3 a:first-child { grid-row: span 2; }
.rvc-pics a { display: block; overflow: hidden; }
.rvc-pics img { display: block; width: 100%; height: 100%; max-height: 300px; object-fit: cover; transition: transform .4s; }
.rvc-pics.n1 img { aspect-ratio: 4 / 3.4; }
.rvc-pics.n2 img { aspect-ratio: 1; }
.rvc-pics a:hover img { transform: scale(1.04); }
.rvc-body { padding: 16px 18px 18px; }
.rvc-stars { position: relative; display: inline-block; font-size: 17px; letter-spacing: 2px; line-height: 1; direction: ltr; color: #E8DCC6; }
.rvc-stars span { background: linear-gradient(90deg, #E3A82B calc(var(--r) / 5 * 100%), #E8DCC6 0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rvc-stars.big { font-size: 24px; }
.rvc-text { margin: 10px 0 12px; font-size: 14.5px; line-height: 2.05; color: var(--ink-soft, #5A4632); white-space: pre-line; }
.rvc-who { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted, #8B7A66); }
.rvc-who b { color: var(--ink, #2E2015); }
.rvc-who .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 13px; color: #2A1C10; background: linear-gradient(135deg, #FFF1C9, #C9A24B); }
.rvc-reply { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #F6EEDF; font-size: 13px; line-height: 1.9; color: var(--ink-soft, #5A4632); }
.rv-sum { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.rv-sum > b { font-size: 46px; font-weight: 900; line-height: 1; color: var(--gold-hi, #F3D98B); }
.rv-sum small { display: block; margin-top: 6px; font-size: 13px; color: rgba(251,246,234,.7); }
.rv-pager { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.rv-pager a, .rv-pager span { min-width: 38px; padding: 8px 10px; border-radius: 12px; text-align: center; font-weight: 700; border: 1px solid var(--line, #E9DCC3); background: #fff; }
.rv-pager span { background: var(--espresso-3, #3A2819); color: #FBF3E2; }