/*
 * Branwell Redeem — styles. Scoped to #bw-redeem-panel.
 * Uses the theme tokens shared with branwell-booking; fallbacks apply if a token is missing.
 */

#bw-redeem-panel {
	--rd-border:  var(--color-border, #d9d4e3);
	--rd-bg:      var(--color-bg, #ffffff);
	--rd-soft:    var(--color-bg-soft, #f6f4fa);
	--rd-text:    var(--color-text, #2b2633);
	--rd-muted:   var(--color-text-muted, #6b6475);
	--rd-accent:  var(--color-primary, #5b3fa0);
	--rd-error:   var(--color-error, #b3261e);
	--rd-success: var(--color-success, #1e7a46);
	--rd-radius:  var(--radius-md, 8px);
	--rd-small:   var(--fs-small, 0.875rem);

	/* 1200px centred on desktop; 10px left/right gutter on mobile (below). */
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
	color: var(--rd-text);
}

@media (max-width: 640px) {
	#bw-redeem-panel { padding: 0 10px; }
}

#bw-redeem-panel *,
#bw-redeem-panel *::before,
#bw-redeem-panel *::after { box-sizing: border-box; }

/* Fallback header — only used if the theme's section-header part is missing */
#bw-redeem-panel .bw-redeem__header { margin-bottom: 2rem; }
#bw-redeem-panel .bw-redeem__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.2;
}
#bw-redeem-panel .bw-redeem__intro {
	margin: 0;
	max-width: 70ch;
	color: var(--rd-muted);
	line-height: 1.6;
}

#bw-redeem-panel .bw-redeem__form { margin-top: 2rem; }

/* ── Layout ───────────────────────────────────────────────── */
#bw-redeem-panel .bw-redeem__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0 1.5rem;
}
@media (max-width: 640px) {
	#bw-redeem-panel .bw-redeem__row { grid-template-columns: 1fr; }
}

#bw-redeem-panel .bw-redeem__field { margin-bottom: 1.125rem; }

#bw-redeem-panel .bw-redeem__label {
	display: block;
	margin-bottom: 0.375rem;
	font-weight: 600;
	font-size: var(--rd-small);
}

/* ── Text inputs ──────────────────────────────────────────── */
#bw-redeem-panel .bw-redeem__text {
	display: block;
	width: 100%;
	height: 2.875rem;
	padding: 0 0.875rem;
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius);
	background: var(--rd-bg);
	color: var(--rd-text);
	font: inherit;
	font-size: 1rem;
}
#bw-redeem-panel .bw-redeem__text:focus {
	outline: none;
	border-color: var(--rd-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rd-accent) 20%, transparent);
}

/* Certificate number: the one thing on the page they copy from paper */
#bw-redeem-panel .bw-redeem__cert {
	font-size: 1.375rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.35em;
	text-align: center;
	padding: 0 0.5rem 0 0.85rem;
}
#bw-redeem-panel .bw-redeem__cert::placeholder { color: var(--rd-border); letter-spacing: 0.35em; }

/* ── Phone field (matches branwell-booking) ───────────────── */
#bw-redeem-panel .bw-tel { position: relative; }

#bw-redeem-panel .bw-tel__box {
	display: flex;
	align-items: stretch;
	height: 2.875rem;
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius);
	background: var(--rd-bg);
	overflow: hidden;
}
#bw-redeem-panel .bw-tel__box:focus-within {
	border-color: var(--rd-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rd-accent) 20%, transparent);
}

#bw-redeem-panel .bw-tel__chip {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0 0.75rem;
	border: 0;
	border-right: 1px solid var(--rd-border);
	background: var(--rd-soft);
	color: var(--rd-text);
	font: inherit;
	font-size: 0.9375rem;
	cursor: pointer;
}
#bw-redeem-panel .bw-tel__chip:focus-visible { outline: 2px solid var(--rd-accent); outline-offset: -2px; }
#bw-redeem-panel .bw-tel__flag { font-size: 1.125rem; line-height: 1; }
#bw-redeem-panel .bw-tel__chev {
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: 0.6;
}

#bw-redeem-panel .bw-tel__input {
	flex: 1;
	min-width: 0;
	padding: 0 0.75rem;
	border: 0;
	background: transparent;
	color: var(--rd-text);
	font: inherit;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
}
#bw-redeem-panel .bw-tel__input:focus { outline: none; }

#bw-redeem-panel .bw-tel__state {
	display: flex;
	align-items: center;
	padding-right: 0.75rem;
	color: var(--rd-success);
}
#bw-redeem-panel .bw-tel__state svg { width: 1.125rem; height: 1.125rem; }

#bw-redeem-panel .bw-tel__menu {
	position: absolute;
	z-index: 20;
	top: calc(100% + 0.25rem);
	left: 0;
	min-width: 16rem;
	margin: 0;
	padding: 0.25rem;
	list-style: none;
	background: var(--rd-bg);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius);
	box-shadow: 0 8px 24px rgba(30, 20, 50, 0.12);
}
#bw-redeem-panel .bw-tel__option {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5rem 0.625rem;
	border-radius: calc(var(--rd-radius) - 2px);
	cursor: pointer;
}
#bw-redeem-panel .bw-tel__option:hover,
#bw-redeem-panel .bw-tel__option.is-active { background: var(--rd-soft); }
#bw-redeem-panel .bw-tel__option-name { flex: 1; }
#bw-redeem-panel .bw-tel__option-code { color: var(--rd-muted); font-variant-numeric: tabular-nums; }

/* ── Inline hints / invalid state ─────────────────────────── */
#bw-redeem-panel .bw-redeem__hint {
	margin: 0.375rem 0 0;
	font-size: var(--rd-small);
	color: var(--rd-error);
	line-height: 1.45;
}
#bw-redeem-panel .is-invalid .bw-redeem__text,
#bw-redeem-panel .is-invalid .bw-tel__box { border-color: var(--rd-error); }

/* ── Result ───────────────────────────────────────────────── */
#bw-redeem-panel .bw-redeem__status {
	margin: 0 0 1rem;
	padding: 0.75rem 0.875rem;
	border-radius: var(--rd-radius);
	border: 1px solid;
	font-size: 0.9375rem;
	line-height: 1.5;
}
#bw-redeem-panel .bw-redeem__status.is-success {
	color: var(--rd-success);
	border-color: currentColor;
	background: color-mix(in srgb, var(--rd-success) 8%, var(--rd-bg));
	font-weight: 600;
}
#bw-redeem-panel .bw-redeem__status.is-error {
	color: var(--rd-error);
	border-color: currentColor;
	background: color-mix(in srgb, var(--rd-error) 6%, var(--rd-bg));
}

/* ── Submit ───────────────────────────────────────────────── */
#bw-redeem-panel .bw-redeem__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 3rem;
	min-height: 0;
	margin: 0;
	padding: 0 1rem;
	border: 0;
	line-height: 1;
	text-align: center;
	border-radius: var(--rd-radius);
	background: var(--rd-accent);
	color: #fff;
	font: inherit;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
}
#bw-redeem-panel .bw-redeem__submit:focus-visible { outline: 3px solid color-mix(in srgb, var(--rd-accent) 40%, transparent); outline-offset: 2px; }
#bw-redeem-panel .bw-redeem__submit:disabled { opacity: 0.5; cursor: not-allowed; }

#bw-redeem-panel .is-done .bw-redeem__text,
#bw-redeem-panel .is-done .bw-tel__box { background: var(--rd-soft); }