/* Viewer follows the shared theme; explicit story colors still take precedence. */
.sirbal-stories__viewer:not([open]) { display:none; }
.sirbal-stories__viewer {
	--viewer-accent:var(--story-accent,var(--sirbal-color-petrol,#0b3f50));
	--viewer-surface:var(--story-surface,var(--sirbal-color-surface,#fff));
	--viewer-ink:var(--story-ink,var(--sirbal-color-ink,#10222b));
	--story-media-height:min(54vh,470px); --story-media-height:min(54dvh,470px);
	width:clamp(340px,calc(var(--story-media-height)*var(--story-media-ratio,1) + 32px),520px); max-width:calc(100% - 24px); max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px); margin:auto; padding:0; border:1px solid var(--sirbal-color-line,#10222b1f); border-radius:24px; background:var(--viewer-surface); color:var(--viewer-ink); box-shadow:var(--sirbal-shadow-lg,0 24px 64px #10222b24); overflow:auto; overscroll-behavior:contain;
}
.sirbal-stories__viewer::backdrop { background:#061a26c9; }
.sirbal-stories__frame { display:grid; grid-template-columns:minmax(0,1fr); padding:16px; }
.sirbal-stories__toolbar { grid-column:1/-1; display:flex; align-items:center; gap:8px; }
.sirbal-stories__heading { flex:1; min-width:0; }
.sirbal-stories__heading > span { display:block; margin-bottom:2px; font-size:11px; font-variant-numeric:tabular-nums; opacity:.65; }
#sirbal-story-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0; color:inherit; font-size:15px; line-height:1.7; font-weight:750; }
.sirbal-stories__viewer button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:44px; min-height:44px; padding:10px; border:1px solid var(--sirbal-color-line,#10222b1f); border-radius:50%; background:var(--viewer-surface); color:inherit; font:inherit; font-size:12px; cursor:pointer; transition:background 180ms,border-color 180ms; }
.sirbal-stories__viewer button svg { display:block; flex-shrink:0; }
.sirbal-stories__viewer :is([data-story-sound],[data-story-play]) { font-size:0; }
.sirbal-stories__viewer [hidden] { display:none; }
.sirbal-stories__viewer button:disabled { opacity:.3; cursor:default; }
.sirbal-stories__viewer :is(a,button):focus-visible { outline:3px solid var(--sirbal-color-gold,#c9a96e); outline-offset:3px; }
.sirbal-stories__viewer [data-story-play] { width:44px; height:44px; background:var(--viewer-accent); border-color:transparent; color:#fff; }
[data-story-play][aria-pressed="false"] .sirbal-stories__icon-pause,
[data-story-play][aria-pressed="true"] .sirbal-stories__icon-play,
[data-story-sound][aria-pressed="false"] .sirbal-stories__sound-on,
[data-story-sound][aria-pressed="true"] .sirbal-stories__sound-off { display:none; }
.sirbal-stories__segments { grid-column:1/-1; display:flex; gap:4px; margin:12px 0; }
.sirbal-stories__segments span { flex:1; height:3px; border-radius:999px; background:var(--sirbal-color-line,#10222b1f); }
.sirbal-stories__segments span[data-active] { background:var(--viewer-accent); }
.sirbal-stories__stage { min-width:0; align-self:start; }
.sirbal-stories__media { position:relative; display:grid; place-items:center; height:auto; overflow:hidden; border-radius:16px; }
.sirbal-stories__media :is(img,video) { display:block; width:min(100%,calc(var(--story-media-height)*var(--story-media-ratio))); height:auto; aspect-ratio:var(--story-media-ratio); object-fit:contain; border-radius:16px; }
.sirbal-stories__media[aria-busy="true"]::after { position:absolute; inset:auto auto 16px; content:"در حال بارگذاری…"; padding:8px 12px; border-radius:999px; background:#0b1b24; color:#fff; font-size:12px; }
.sirbal-stories__status { margin:8px 0; font-size:12px; line-height:1.8; }
.sirbal-stories__status:empty { margin:0; }
.sirbal-stories__controls { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px; border-radius:16px; background:var(--sirbal-color-canvas,#f7f8f7); margin-top:8px; }
.sirbal-stories__controls :is([data-story-prev],[data-story-next]) { border-color:transparent; border-radius:999px; padding-inline:12px; }
.sirbal-stories__details { min-width:0; margin-top:12px; }
.sirbal-stories__description { white-space:pre-line; margin:0 0 16px; font-size:13px; line-height:1.9; overflow-wrap:anywhere; }
.sirbal-stories__description:empty { display:none; }
.sirbal-stories__product { display:grid; grid-template-columns:48px minmax(0,1fr) 96px; align-items:center; gap:8px; padding:10px; border:1px solid var(--sirbal-color-line,#10222b1f); border-radius:16px; background:var(--viewer-surface); color:inherit; text-decoration:none; }
.sirbal-stories__product img { width:48px; height:60px; object-fit:cover; border-radius:12px; }
.sirbal-stories__product > span { min-width:0; font-size:12px; line-height:1.8; overflow-wrap:anywhere; }
.sirbal-stories__product strong { display:block; font-size:12px; font-weight:700; }
.sirbal-stories__price { display:block; margin-top:4px; font-size:11px; }
.sirbal-stories__price :is(.amount,.woocommerce-Price-currencySymbol,ins) { color:var(--viewer-accent); }
.sirbal-stories__price del { opacity:.6; margin-inline-end:4px; }
.sirbal-stories__price ins { background:transparent; }
.sirbal-stories__product b { display:grid; place-items:center; min-height:44px; padding:8px; border-radius:12px; background:var(--viewer-accent); color:#fff; text-align:center; font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.sirbal-stories__orphan { padding:16px; font-size:13px; line-height:1.9; }
@media (hover:hover) and (pointer:fine) {
	.sirbal-stories__viewer button:not(:disabled):hover { border-color:var(--viewer-accent); }
	.sirbal-stories__product:hover b { filter:brightness(.92); }
}
@media (max-width:600px) {
	.sirbal-stories__viewer { --story-media-height:min(56vh,470px); --story-media-height:min(56dvh,470px); max-width:calc(100% - 16px); max-height:calc(100vh - 16px); max-height:calc(100dvh - 16px); border-radius:20px; }
	.sirbal-stories__frame { padding:12px; padding-top:max(12px,env(safe-area-inset-top)); padding-bottom:max(12px,env(safe-area-inset-bottom)); }
}
@media (max-height:550px) { .sirbal-stories__viewer { --story-media-height:38vh; --story-media-height:38dvh; } }