/* ===== Kamadoors (کامادر) stories ===== */
.kd-widget{font-family:inherit;direction:rtl;position:relative;width:100%;--kd-ring:#d946ef;--kd-accent:var(--kd-ring)}
.kd-highlights{display:flex;align-items:flex-start;gap:18px;overflow-x:auto;padding:8px 2px 12px;scrollbar-width:thin;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.kd-widget .kd-highlight{appearance:none;-webkit-appearance:none;border:0!important;background:transparent!important;box-shadow:none!important;color:inherit;cursor:pointer;display:flex;flex:0 0 108px;flex-direction:column;align-items:center;gap:9px;padding:0!important;margin:0;min-width:0;text-align:center;border-radius:0;-webkit-tap-highlight-color:transparent}
.kd-ring{display:grid;place-items:center;width:100px;height:100px;border-radius:50%;padding:3px;background:conic-gradient(var(--kd-ring),#ff8a00,#e1306c,var(--kd-ring))}
.kd-disc{width:100%;height:100%;border:2px solid var(--kd-bg,#fff);background:#222;border-radius:50%;overflow:hidden;display:grid;place-items:center;position:relative}
.kd-disc img{width:100%;height:100%;object-fit:cover;display:block}
.kd-initial{font-size:36px;color:#fff}
.kd-widget .kd-name{display:block;font-size:14px;font-weight:600;line-height:1.5;max-width:108px;overflow-wrap:anywhere;color:#fff!important}
.kd-theme-dark{color:#f5f5f5;--kd-bg:#171717}
.kd-theme-light{color:#222;--kd-bg:#fff}
body.kd-no-scroll{overflow:hidden!important}

/* ----- Viewer (moved to <body> by JS so no theme/Elementor container can clip it) ----- */
.kd-viewer{--kd-h:min(92vh,920px);position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;direction:ltr;margin:0;padding:0;font-family:inherit;background:rgba(0,0,0,.92);-webkit-tap-highlight-color:transparent}
@supports (height:100dvh){.kd-viewer{--kd-h:min(92dvh,920px)}}
.kd-viewer[hidden]{display:none!important}
.kd-backdrop{position:absolute;inset:0;cursor:pointer}

/* Desktop: Instagram-like portrait frame (9:16) */
.kd-frame{position:relative;z-index:1;height:var(--kd-h);width:calc(var(--kd-h) * 9 / 16)}
.kd-stage{position:absolute;inset:0;background:#000;border-radius:18px;overflow:hidden;color:#fff;box-shadow:0 20px 70px rgba(0,0,0,.6);isolation:isolate}
.kd-media{position:absolute;inset:0;width:100%;height:100%;background:#000;overflow:hidden;margin:0;padding:0}
.kd-media img,.kd-media video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block;margin:0;border:0}
.kd-media iframe{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;max-width:none;border:0;margin:0;display:block;background:#000}

.kd-progress{display:flex;gap:4px;position:absolute;z-index:4;top:calc(10px + env(safe-area-inset-top,0px));left:10px;right:10px;height:3px;pointer-events:none}
.kd-progress span{flex:1;background:rgba(255,255,255,.35);border-radius:4px;overflow:hidden}
.kd-progress span i{display:block;width:0;height:100%;background:#fff}
.kd-head{position:absolute;z-index:4;top:calc(22px + env(safe-area-inset-top,0px));left:14px;right:56px;display:flex;justify-content:space-between;gap:10px;text-shadow:0 1px 4px #000;font-size:13px;pointer-events:none}
.kd-count{opacity:.85;white-space:nowrap}

.kd-viewer button{font-family:inherit;text-transform:none;letter-spacing:0;margin:0;-webkit-appearance:none;appearance:none}
.kd-viewer .kd-close{position:absolute;z-index:6;right:10px;top:calc(18px + env(safe-area-inset-top,0px));display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.4);color:#fff;font-size:28px;line-height:1;cursor:pointer;box-shadow:none}
.kd-viewer .kd-close:hover,.kd-viewer .kd-close:focus{background:rgba(0,0,0,.6);color:#fff}

/* Prev / Next: sit just outside the frame on desktop */
.kd-viewer .kd-nav{position:absolute;z-index:7;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:46px;height:46px;padding:0 0 4px;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(30,30,34,.78);color:#fff;font-size:32px;line-height:1;cursor:pointer;box-shadow:0 5px 18px rgba(0,0,0,.35);transition:background .2s,transform .2s,border-color .2s}
.kd-viewer .kd-nav:hover,.kd-viewer .kd-nav:focus-visible{background:var(--kd-accent);border-color:rgba(255,255,255,.7);color:#fff;transform:translateY(-50%) scale(1.07)}
.kd-prev{left:-68px}
.kd-next{right:-68px}

.kd-caption{position:absolute;z-index:4;bottom:calc(22px + env(safe-area-inset-bottom,0px));left:18px;right:18px;text-align:center;font-size:14px;line-height:1.7;text-shadow:0 1px 5px #000;pointer-events:none}
.kd-link{position:absolute;z-index:6;bottom:calc(60px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--kd-accent);color:#fff!important;text-decoration:none!important;border-radius:24px;padding:9px 18px;font-size:13px;white-space:nowrap}
.kd-viewer .kd-pause{position:absolute;z-index:8;bottom:calc(14px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(20,20,24,.72);color:#fff;cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.35)}
.kd-viewer .kd-pause:hover,.kd-viewer .kd-pause:focus-visible{background:var(--kd-accent);color:#fff}
.kd-viewer .kd-pause[hidden]{display:none}
.kd-pause svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.kd-has-pause .kd-caption{bottom:calc(70px + env(safe-area-inset-bottom,0px))}
.kd-has-pause .kd-link{bottom:calc(108px + env(safe-area-inset-bottom,0px))}

/* Aparat player draws its own control bar at the bottom: keep caption/link above it */
.kd-has-embed .kd-caption{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
.kd-has-embed .kd-link{bottom:calc(112px + env(safe-area-inset-bottom,0px))}

.kd-highlight:focus-visible,.kd-viewer .kd-close:focus-visible,.kd-viewer .kd-nav:focus-visible,.kd-viewer .kd-pause:focus-visible{outline:2px solid var(--kd-accent);outline-offset:3px}

/* Mobile (and phones in landscape): the story fills the whole screen, no gaps */
@media (max-width:700px),(pointer:coarse) and (max-height:520px){
  .kd-viewer{background:#000}
  .kd-backdrop{display:none}
  .kd-frame{width:100%;height:100%}
  .kd-stage{border-radius:0;box-shadow:none}
  .kd-viewer .kd-nav{width:42px;height:42px;font-size:28px;background:rgba(0,0,0,.45);border-color:rgba(255,255,255,.35)}
  .kd-prev{left:8px}
  .kd-next{right:8px}
  .kd-highlights{gap:14px}
  .kd-widget .kd-highlight{flex-basis:92px}
  .kd-ring{width:86px;height:86px}
  .kd-widget .kd-name{font-size:13px;max-width:92px}
}