/* ============================================================
   Story Feedback — floating bubble + full-screen story viewer.

   Two stacking decisions worth stating, because getting them wrong is what
   makes floating UI feel broken:

   1. The bubble sits at z-index 99970, BELOW the sales popup's 99990. When a
      promo campaign is running, the popup is the thing the site is asking the
      visitor to look at, so it must win.
   2. The viewer sits at 99995, ABOVE the popup. The visitor deliberately
      opened it, so nothing may cover it.

   Vertical offset is a variable because a third-party chat widget
   (Messenger/Zalo) docks in the same corner at its own height. Retune with
   `.dctd-fs { --fs-bottom: 150px; }` rather than editing this file.
   ============================================================ */

.dctd-fs {
	--fs-size: 56px;
	/* Clears a ~60px chat FAB sitting at a 24px inset, plus its label. */
	--fs-bottom: 96px;
	--fs-right: 24px;
	--fs-ink: var(--ink0, #06121F);
	--fs-cream: var(--cream, #F7F0E6);
	--fs-gold: var(--gold, #B88A3B);
	--fs-new: #29B765;
	--fs-font: var(--sans, "Montserrat", "Be Vietnam Pro", Helvetica, Arial, sans-serif);
	font-family: var(--fs-font);
}

/* ============================================================
   BUBBLE
   ============================================================ */
.dctd-fs-bubble {
	position: fixed;
	z-index: 99970;
	right: var(--fs-right);
	bottom: var(--fs-bottom);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--fs-size);
	height: var(--fs-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--fs-ink);
	cursor: pointer;
	/* The label is positioned against this box. */
	overflow: visible;
	transition: transform .25s ease;
}
.dctd-fs-bubble:hover { transform: scale(1.06); }
.dctd-fs-bubble:focus-visible {
	outline: 3px solid var(--fs-new);
	outline-offset: 3px;
}

.dctd-fs-avatar {
	position: relative;
	z-index: 1;
	width: calc(var(--fs-size) - 8px);
	height: calc(var(--fs-size) - 8px);
	border-radius: 50%;
	object-fit: cover;
	/* Gap between photo and ring, so the ring reads as a ring. */
	border: 2px solid var(--fs-ink);
}

/* The ring. Grey once seen, green while there is an unseen frame — the whole
   point of the affordance, so it is driven by a single class on the root. */
.dctd-fs-ring {
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	background: rgba(247, 240, 230, .35);
}
.dctd-fs.has-new .dctd-fs-ring {
	background: conic-gradient(from 210deg, var(--fs-new), #7BE3A6, var(--fs-new));
}
.dctd-fs.has-new .dctd-fs-bubble { animation: dctd-fs-pulse 2.4s ease-in-out 3; }

@keyframes dctd-fs-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(41, 183, 101, .55); }
	50% { box-shadow: 0 0 0 12px rgba(41, 183, 101, 0); }
}

.dctd-fs-badge {
	position: absolute;
	z-index: 2;
	top: -4px;
	right: -4px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--fs-gold);
	color: var(--fs-cream);
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

.dctd-fs-label {
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	padding: 6px 11px;
	border-radius: 3px;
	background: var(--fs-ink);
	color: var(--fs-cream);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .06em;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}
.dctd-fs-bubble:hover .dctd-fs-label,
.dctd-fs-bubble:focus-visible .dctd-fs-label { opacity: 1; }

/* ============================================================
   VIEWER
   ============================================================ */
.dctd-fs-viewer {
	position: fixed;
	z-index: 99995;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 14px 12px 20px;
	background: rgba(3, 8, 14, .94);
	opacity: 0;
	transition: opacity .25s ease;
}
.dctd-fs-viewer[hidden] { display: none; }
.dctd-fs-viewer.is-open { opacity: 1; }

/* ---- segmented progress ---- */
.dctd-fs-progress {
	display: flex;
	gap: 4px;
	width: 100%;
	max-width: 460px;
}
.dctd-fs-bar {
	flex: 1;
	height: 3px;
	border-radius: 2px;
	background: rgba(247, 240, 230, .28);
	overflow: hidden;
}
.dctd-fs-bar > i {
	display: block;
	width: 0;
	height: 100%;
	background: var(--fs-cream);
}
/* Frames already watched read as full; the current one animates via JS
   setting a duration on this element. */
.dctd-fs-bar.is-done > i { width: 100%; }
.dctd-fs-bar.is-active > i {
	width: 100%;
	transition: width linear var(--fs-dur, 5s);
}

/* ---- header ---- */
.dctd-fs-head {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: 460px;
	margin-top: 12px;
}
.dctd-fs-head-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid rgba(247, 240, 230, .4);
}
.dctd-fs-head-name {
	flex: 1;
	min-width: 0;
	color: var(--fs-cream);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dctd-fs-close {
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(247, 240, 230, .35);
	border-radius: 50%;
	background: transparent;
	color: var(--fs-cream);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background .2s, color .2s;
}
.dctd-fs-close:hover,
.dctd-fs-close:focus-visible {
	background: var(--fs-cream);
	color: var(--fs-ink);
}

/* ---- stage ---- */
.dctd-fs-stage {
	position: relative;
	flex: 1;
	width: 100%;
	max-width: 460px;
	min-height: 0;
	margin-top: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dctd-fs-frame {
	margin: 0;
	width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.dctd-fs-frame[hidden] { display: none; }

.dctd-fs-frame img {
	display: block;
	width: 100%;
	/* `contain`, not `cover`: these are screenshots of text. Cropping one to
	   fill the frame is what makes the message unreadable. */
	max-height: 78vh;
	object-fit: contain;
	border-radius: 8px;
	background: #11161c;
}

.dctd-fs-frame figcaption {
	margin-top: 12px;
	text-align: center;
}
.dctd-fs-caption {
	display: block;
	color: var(--fs-cream);
	font-size: 14px;
	line-height: 1.6;
}
.dctd-fs-cta {
	display: inline-block;
	margin-top: 12px;
	padding: 11px 22px;
	background: var(--fs-gold);
	border: 1px solid var(--fs-gold);
	color: var(--fs-cream);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s, color .2s;
}
.dctd-fs-cta:hover,
.dctd-fs-cta:focus-visible {
	background: var(--fs-cream);
	color: var(--fs-ink);
}

/* ---- tap zones ----
   Above the image so a tap anywhere advances, but BELOW the caption's CTA in
   the stacking order would be wrong — so the CTA gets a higher z-index
   instead of shrinking the zones. */
.dctd-fs-zone {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: 34%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.dctd-fs-zone.prev { left: 0; }
.dctd-fs-zone.next {
	right: 0;
	width: 66%;
}
.dctd-fs-zone:focus-visible {
	outline: 2px solid var(--fs-cream);
	outline-offset: -4px;
}
.dctd-fs-frame figcaption { position: relative; z-index: 3; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 600px) {
	.dctd-fs {
		--fs-size: 52px;
		--fs-bottom: 88px;
		--fs-right: 16px;
	}
	/* A hover-only tooltip is dead weight on touch. */
	.dctd-fs-label { display: none; }
	.dctd-fs-frame img { max-height: 70vh; }
}

/* ============================================================
   REDUCED MOTION
   Auto-advance still happens — it is navigation, not decoration — but the
   pulse and the sliding bar do not.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.dctd-fs-bubble,
	.dctd-fs-viewer,
	.dctd-fs-label { transition: none; }
	.dctd-fs.has-new .dctd-fs-bubble { animation: none; }
	.dctd-fs-bar.is-active > i { transition: none; }
}