/* css/stories.css — story ring + viewer */

#abf-story-ring {
  position: fixed;
  top: 90px;
  left: 20px;
  z-index: 9000;
}
#abf-story-ring[hidden] { display: none; }

.abf-story-ring__btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  /* Brand-matched: gradient from your sidebar blue to sky blue */
  background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
  padding: 2.5px;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}
.abf-story-ring__btn:hover { transform: scale(1.05); }
.abf-story-ring__btn:active { transform: scale(0.95); }

.abf-story-ring--seen .abf-story-ring__btn {
  background: #cbd5e1;
  box-shadow: none;
}

.abf-story-ring__badge {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #f3f4f6 center / cover no-repeat;
  display: block;
  /* Thin white inner ring so the gradient reads as a story ring, not a solid disk */
  border: 2px solid #fff;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  #abf-story-ring { top: 72px; left: 12px; }
  .abf-story-ring__btn { width: 48px; height: 48px; }
  .abf-story-ring__badge { width: 38px; height: 38px; }
}

/* Viewer */
.abf-story-viewer {
  position: fixed; inset: 0;
  background: #000;
  z-index: 9999;
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column;
}
.abf-story-viewer--open { display: flex; }

.abf-story-viewer__media {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.abf-story-viewer__media img,
.abf-story-viewer__media video {
  max-width: 100%; max-height: 100%; object-fit: contain;
  animation: abf-story-fade-in 320ms ease-out;
}

.abf-story-viewer__caption,
.abf-story-viewer__cta {
  animation: abf-story-fade-in 320ms ease-out;
}

@keyframes abf-story-fade-in {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: scale(1); }
}

.abf-story-viewer__progress {
  position: absolute; top: 12px; left: 12px; right: 12px;
  display: flex; gap: 4px;
  z-index: 2;
}
.abf-story-viewer__progress-seg {
  flex: 1; height: 3px; background: rgba(255,255,255,0.3); border-radius: 2px; overflow: hidden;
}
.abf-story-viewer__progress-seg--done { background: rgba(255,255,255,0.9); }
.abf-story-viewer__progress-fill {
  width: 0; height: 100%; background: rgba(255,255,255,0.9);
  animation: abf-story-progress linear forwards;
}
@keyframes abf-story-progress { from { width: 0; } to { width: 100%; } }

.abf-story-viewer__close {
  position: absolute; top: 16px; right: 16px;
  background: transparent; border: 0; color: #fff;
  font-size: 28px; cursor: pointer; z-index: 3;
}

.abf-story-viewer__caption {
  position: absolute; bottom: 90px; left: 16px; right: 16px;
  color: #fff; font-size: 16px;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
  padding: 12px;
  z-index: 2;
}

.abf-story-viewer__cta {
  position: absolute; bottom: 24px; left: 16px; right: 16px;
  text-align: center;
  z-index: 2;
}
.abf-story-viewer__cta-btn {
  padding: 12px 32px; font-size: 16px; font-weight: 600;
  background: #fff; color: #111; border: 0; border-radius: 999px; cursor: pointer;
}

.abf-story-viewer__tap {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background: transparent; border: 0; cursor: pointer; z-index: 1;
}
.abf-story-viewer__tap--left { left: 0; }
.abf-story-viewer__tap--right { right: 0; }

.abf-story-viewer__toast {
  position: absolute; top: 60px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.85); color: #fff;
  padding: 10px 16px; border-radius: 6px;
  opacity: 0; transition: opacity 0.2s; pointer-events: none;
  z-index: 3;
}
.abf-story-viewer__toast--show { opacity: 1; }

/* Confirm dialog (inside viewer for buy_with_coupon cart-conflict) */
.abf-story-confirm {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
}
.abf-story-confirm__box {
  background: #fff; color: #111;
  border-radius: 12px;
  padding: 20px; max-width: 320px; width: 90%;
}
.abf-story-confirm__title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.abf-story-confirm__body  { font-size: 14px; color: #374151; margin-bottom: 16px; }
.abf-story-confirm__btns  { display: flex; gap: 8px; justify-content: flex-end; }
.abf-story-confirm__btns button {
  padding: 8px 14px; border-radius: 6px; border: 0; cursor: pointer;
  font-size: 14px;
}
.abf-story-confirm__cancel { background: #e5e7eb; color: #111; }
.abf-story-confirm__ok     { background: #4f46e5; color: #fff; }