/*!
 * Hafdz Dhikr — digital tasbih front-end styles.
 *
 *   .hafdz-dhikr            Outer wrapper. CSS vars overridable per theme.
 *   .hafdz-dhikr__chips     Phrase chip strip. Horizontal-scrolls on
 *                           narrow screens instead of wrapping into a
 *                           ragged stack.
 *   .hafdz-dhikr__ring      SVG progress ring around the tap button. The
 *                           --hd-progress custom property (0..1) drives
 *                           the stroke-dashoffset.
 *   .hafdz-dhikr__tap       Big circular tap target *inside* the ring,
 *                           carrying the live count.
 */

.hafdz-dhikr {
	--hd-accent:       #2d6b3f;
	--hd-accent-deep:  #1f4d2c;
	--hd-accent-soft:  #e3f5e8;
	--hd-accent-line:  #b6e1c2;
	--hd-bg:           #ffffff;
	--hd-bg-soft:      #faf9f5;
	--hd-line:         #e5e1d6;
	--hd-line-2:       #efece4;
	--hd-ink:          #1a1a1a;
	--hd-ink-2:        #5a5a5a;
	--hd-ink-3:        #888;
	/* Card chrome (background, border, radius, padding) is supplied by
	 * `.hafdz-profile__panel` from the host shortcode. The previous
	 * standalone-card chrome stacked on top of it caused the panel to
	 * sit further right than its sibling sections. */
	color: var(--hd-ink);
	font-family: inherit;
	box-sizing: border-box;
	/* Lets the panel honour its grid column instead of expanding to its
	 * children's intrinsic min-width (the chip strip + Arabic phrase
	 * pushed it past the column edge before this). */
	min-width: 0;
}
.hafdz-dhikr *, .hafdz-dhikr *::before, .hafdz-dhikr *::after { box-sizing: border-box; }

/* Compact "today total" line. The dashboard already shows the section
 * title + description above; the running total is the only contextual
 * info worth restating inside the panel itself. */
.hafdz-dhikr__today {
	display: inline-flex; align-items: baseline; gap: 8px;
	margin: 0 0 16px;
	padding: 4px 10px;
	background: var(--hd-accent-soft);
	border: 1px solid var(--hd-accent-line);
	border-radius: 999px;
	color: var(--hd-accent-deep);
}
.hafdz-dhikr__today-lbl {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 500;
}
.hafdz-dhikr__today-num {
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ─── Phrase chips ────────────────────────────────────────────── */

/* `min-width: 0` is what makes overflow-x: auto actually clip — a flex/
 * grid child defaults to min-width: auto (= min-content), and min-content
 * for a strip of nowrap chips is the sum of every chip's width. Without
 * this rule the strip insists on its full natural width and pushes the
 * whole panel past its column. */
.hafdz-dhikr__chips { display: flex; gap: 8px; margin-bottom: 24px; padding-bottom: 4px; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--hd-line) transparent; }
.hafdz-dhikr__chips::-webkit-scrollbar { height: 6px; }
.hafdz-dhikr__chips::-webkit-scrollbar-thumb { background: var(--hd-line); border-radius: 3px; }
.hafdz-dhikr__chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--hd-line); background: var(--hd-bg-soft); color: var(--hd-ink-2); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease; white-space: nowrap; }
.hafdz-dhikr__chip:hover { border-color: var(--hd-accent); color: var(--hd-ink); }
.hafdz-dhikr__chip.is-active { background: var(--hd-accent); border-color: var(--hd-accent); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(45, 107, 63, 0.7); }
.hafdz-dhikr__chip-saved { font-size: 11px; padding: 1px 7px; background: rgba(0, 0, 0, 0.06); border-radius: 8px; font-variant-numeric: tabular-nums; }
.hafdz-dhikr__chip.is-active .hafdz-dhikr__chip-saved { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* ─── Stage ───────────────────────────────────────────────────── */

.hafdz-dhikr__stage { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }

.hafdz-dhikr__arabic {
	margin: 0;
	font-size: 38px;
	line-height: 1.6;
	font-family: 'Amiri', 'Scheherazade New', 'Traditional Arabic', serif;
	color: var(--hd-ink);
	min-height: 1.6em;
}
.hafdz-dhikr__translit { margin: 0; font-size: 14px; color: var(--hd-ink-3); font-style: italic; }

/* ─── Progress ring + tap ─────────────────────────────────────── */

.hafdz-dhikr__ring { position: relative; width: 240px; height: 240px; margin: 8px 0; }
.hafdz-dhikr__ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hafdz-dhikr__ring-track { fill: none; stroke: var(--hd-line-2); stroke-width: 10; }
/* Circumference of r=92 ≈ 578.05; we set dasharray to that, then
   dashoffset shifts based on the --hd-progress (0..1) from JS. */
.hafdz-dhikr__ring-fill {
	fill: none;
	stroke: var(--hd-accent);
	stroke-width: 10;
	stroke-linecap: round;
	stroke-dasharray: 578.05;
	stroke-dashoffset: calc( 578.05 * (1 - var(--hd-progress, 0)) );
	transition: stroke-dashoffset 220ms cubic-bezier(0.2, 0.6, 0.3, 1);
}
.hafdz-dhikr__ring.is-complete .hafdz-dhikr__ring-fill { stroke: var(--hd-accent-deep); animation: hafdz-dhikr-ring-flash 600ms ease; }

@keyframes hafdz-dhikr-ring-flash {
	0%   { stroke: var(--hd-accent); }
	40%  { stroke: var(--hd-accent-deep); filter: drop-shadow(0 0 6px var(--hd-accent)); }
	100% { stroke: var(--hd-accent); }
}

.hafdz-dhikr__tap {
	position: absolute;
	inset: 18px;
	border: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 35%, #ffffff, var(--hd-accent-soft));
	color: var(--hd-accent-deep);
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	transition: transform 80ms ease, background 220ms ease, opacity 200ms ease;
}
.hafdz-dhikr__tap:active { transform: scale(0.97); }
.hafdz-dhikr__tap.is-pulse { animation: hafdz-dhikr-pulse 320ms ease; }
.hafdz-dhikr__tap:disabled { cursor: default; opacity: 0.92; }
.hafdz-dhikr__tap.is-saving { background: radial-gradient(circle at 50% 35%, #d2e6d3, var(--hd-accent-soft)); }
.hafdz-dhikr__tap.is-saving::after {
	content: '✓';
	position: absolute;
	top: 18%;
	font-size: 20px;
	color: var(--hd-accent-deep);
	font-weight: 700;
	animation: hafdz-dhikr-check 600ms ease forwards;
}

@keyframes hafdz-dhikr-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(45, 107, 63, 0.45); }
	60%  { box-shadow: 0 0 0 28px rgba(45, 107, 63, 0); }
	100% { box-shadow: 0 0 0 0 rgba(45, 107, 63, 0); }
}
@keyframes hafdz-dhikr-check {
	0%   { transform: translateY(-4px) scale(0.6); opacity: 0; }
	30%  { transform: translateY(0) scale(1.15);   opacity: 1; }
	100% { transform: translateY(-2px) scale(1);   opacity: 0; }
}

.hafdz-dhikr__count {
	font-size: 64px;
	font-weight: 700;
	line-height: 1;
	color: var(--hd-accent-deep);
	font-variant-numeric: tabular-nums;
	transition: transform 120ms ease;
}
.hafdz-dhikr__count.is-bumped { transform: scale(1.1); }
.hafdz-dhikr__counter-divider { font-size: 18px; color: var(--hd-ink-3); margin-top: 2px; line-height: 1; }
.hafdz-dhikr__target { font-size: 18px; color: var(--hd-ink-2); font-weight: 600; line-height: 1; margin-top: 2px; font-variant-numeric: tabular-nums; }
.hafdz-dhikr__tap-hint { display: block; margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hd-ink-3); }

/* ─── Actions ─────────────────────────────────────────────────── */

.hafdz-dhikr__actions { display: flex; gap: 10px; margin-top: 8px; }
.hafdz-dhikr__btn { padding: 10px 20px; border-radius: 10px; border: 1px solid var(--hd-accent); background: var(--hd-accent); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 120ms ease, opacity 120ms ease; }
.hafdz-dhikr__btn:hover:not(:disabled) { background: var(--hd-accent-deep); }
.hafdz-dhikr__btn--ghost { background: transparent; color: var(--hd-ink-2); border-color: var(--hd-line); }
.hafdz-dhikr__btn--ghost:hover:not(:disabled) { background: var(--hd-bg-soft); color: var(--hd-ink); }
.hafdz-dhikr__btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── Live status line ─────────────────────────────────────────
 * Sits between the action buttons and the hint. Stays out of the
 * layout when idle (`hidden`); when visible, communicates one of:
 *   .is-saving   — "Saving…" with a spinning glyph (round in flight).
 *   .is-success  — "Saved" with a ✓; auto-fades after a few seconds.
 *   .is-error    — "Could not save" in red; stays until the next save.
 */
.hafdz-dhikr__status { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; transition: opacity 220ms ease; }
.hafdz-dhikr__status[hidden] { display: none; }
.hafdz-dhikr__status.is-fading { opacity: 0; }

.hafdz-dhikr__status.is-saving  { background: var(--hd-bg-soft); color: var(--hd-ink-2); border: 1px solid var(--hd-line); }
.hafdz-dhikr__status.is-success { background: var(--hd-accent-soft); color: var(--hd-accent-deep); border: 1px solid var(--hd-accent-line); }
.hafdz-dhikr__status.is-error   { background: #fce4e4; color: #a02525; border: 1px solid #f3c4c4; }

.hafdz-dhikr__status-glyph { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; }
.hafdz-dhikr__status.is-saving .hafdz-dhikr__status-glyph::before {
	content: '';
	width: 12px; height: 12px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: hafdz-dhikr-spin 0.8s linear infinite;
}
.hafdz-dhikr__status.is-success .hafdz-dhikr__status-glyph::before { content: '\2713'; font-size: 14px; line-height: 1; font-weight: 700; }
.hafdz-dhikr__status.is-error   .hafdz-dhikr__status-glyph::before { content: '\26A0'; font-size: 14px; line-height: 1; }

@keyframes hafdz-dhikr-spin { to { transform: rotate(360deg); } }

.hafdz-dhikr__hint { margin: 12px 0 0; font-size: 12px; color: var(--hd-ink-3); max-width: 36em; }

/* ─── Guest ───────────────────────────────────────────────────── */

.hafdz-dhikr--guest { padding: 32px; text-align: center; border: 1px dashed var(--hd-line); border-radius: 12px; color: var(--hd-ink-2); }

/* ─── Mobile ──────────────────────────────────────────────────── */

@media (max-width: 540px) {
	.hafdz-dhikr__arabic { font-size: 28px; }
	.hafdz-dhikr__ring   { width: 200px; height: 200px; }
	.hafdz-dhikr__count  { font-size: 52px; }
}