/* BookFlow style — PLAYFUL.
 * A bold, kid-party design: the header becomes a full-bleed COLORED BAND with a
 * white logo + heading, big rounded corners, circular dot progress, chunky pill
 * buttons, and tinted calendar tiles. Structurally distinct from Classic.
 * Colors come from the niche preset. Scoped to body.wdz-style-playful. */

body.wdz-style-playful .wdz-gate__overlay,
body.wdz-style-playful .wdz-form__overlay { background: rgba(38, 18, 71, .5); backdrop-filter: blur(3px); }

body.wdz-style-playful .wdz-gate__dialog,
body.wdz-style-playful .wdz-form__dialog {
	border-radius: 28px; box-shadow: 0 30px 72px rgba(20, 8, 50, .32); overflow: hidden;
}

/* Header → full-bleed colored band (bleeds past the 32px dialog padding). */
body.wdz-style-playful .wdz-gate__header {
	margin: -32px -32px 20px; padding: 30px 32px 26px; text-align: center;
	background: linear-gradient(135deg, var(--wdz-gate-primary, #0F3460), color-mix(in srgb, var(--wdz-gate-primary, #0F3460) 45%, var(--wdz-gate-accent, #C9A227)));
}
body.wdz-style-playful .wdz-gate__logo { filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); max-height: 56px; }
body.wdz-style-playful .wdz-gate__brand { color: #fff; }
body.wdz-style-playful .wdz-gate__headline {
	color: #fff; font-family: 'Poppins', 'Quicksand', 'Trebuchet MS', sans-serif;
	font-weight: 800; font-size: 27px; letter-spacing: -.01em;
}
body.wdz-style-playful .wdz-gate__close { color: #fff; }
body.wdz-style-playful .wdz-gate__close:hover { background: rgba(255,255,255,.18); color: #fff; }

/* Circular dot progress. */
body.wdz-style-playful .wdz-gate__progress { gap: 10px; }
body.wdz-style-playful .wdz-gate__progress li { width: 11px; height: 11px; border-radius: 50%; }
body.wdz-style-playful .wdz-gate__steptitle { font-weight: 800; font-size: 19px; }

/* Chunky pill buttons. */
body.wdz-style-playful .wdz-gate__btn,
body.wdz-style-playful .wdz-form__btn {
	border-radius: 999px; font-weight: 700; padding-top: 14px; padding-bottom: 14px;
}
body.wdz-style-playful .wdz-gate__btn--primary,
body.wdz-style-playful .wdz-form__btn--primary,
body.wdz-style-playful .wdz-form__btn--submit {
	background: linear-gradient(135deg, var(--wdz-gate-primary, #0F3460), color-mix(in srgb, var(--wdz-gate-primary, #0F3460) 55%, var(--wdz-gate-accent, #C9A227)));
	box-shadow: 0 8px 18px rgba(15, 52, 96, .28);
}
body.wdz-style-playful .wdz-gate__btn:active,
body.wdz-style-playful .wdz-form__btn:active { transform: translateY(2px) scale(.99); }

body.wdz-style-playful .wdz-gate__choice,
body.wdz-style-playful .wdz-form__choice { border-radius: 16px; border-width: 2px; }
body.wdz-style-playful .wdz-gate__choice:hover { transform: translateY(-1px); }

/* Big tinted calendar tiles, round nav. */
body.wdz-style-playful .wdz-cal__cell {
	border-radius: 14px; background: color-mix(in srgb, var(--wdz-gate-accent, #C9A227) 14%, #fff);
}
body.wdz-style-playful .wdz-cal__cell.is-disabled { background: transparent; }
body.wdz-style-playful .wdz-cal__nav { border-radius: 50%; }
body.wdz-style-playful .wdz-cal__cell.is-selected { box-shadow: 0 6px 14px rgba(15, 52, 96, .3); }

body.wdz-style-playful .wdz-browse__card { border-radius: 20px; box-shadow: 0 10px 26px rgba(20, 8, 50, .12); }
body.wdz-style-playful .wdz-browse__add { border-radius: 999px; font-weight: 700; }
body.wdz-style-playful .wdz-browse__tab { border-radius: 999px; }