/* Benidorm Bulletin Card — front-end styles (reader card, sign-up, dashboard).
 * Palette and card look ported from the prototype.
 */
/* Defined on :root so the redemption popup (which renders outside .bbc-app)
 * inherits the palette too. All names are --bbc-* so they cannot clash with
 * the theme's own variables. */
:root {
	--bbc-sea: #0a7ea4; --bbc-sea-dark: #086780;
	--bbc-sun: #ff9e2c; --bbc-sun-deep: #f57e1c;
	--bbc-ink: #14252c; --bbc-muted: #6b8089;
	--bbc-paper: #f6f4ef; --bbc-line: #e6e2d8;
	--bbc-go: #1ba65a; --bbc-stop: #d23b3b;
	--bbc-shadow: 0 6px 22px rgba(20,37,44,.10);
}

.bbc-app, .bbc-form-wrap {
	max-width: 480px; margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--bbc-ink);
}
.bbc-app *, .bbc-form-wrap * { box-sizing: border-box; }

/* ---------- Header ---------- */
.bbc-header {
	background: linear-gradient(135deg, var(--bbc-sea) 0%, var(--bbc-sea-dark) 100%);
	color: #fff; padding: 22px 20px 26px; border-radius: 18px; position: relative;
	box-shadow: var(--bbc-shadow); margin-bottom: 6px;
}
.bbc-sun {
	position: absolute; top: 16px; right: 18px; width: 40px; height: 40px; border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #ffd27a, var(--bbc-sun));
	box-shadow: 0 0 22px rgba(255,158,44,.6);
}
.bbc-header h1 { margin: 0; font-size: 19px; }
.bbc-header .bbc-sub { margin: 3px 0 0; font-size: 12.5px; opacity: .85; }

/* ---------- Gate ---------- */
.bbc-gate { padding: 18px 4px; text-align: center; }
.bbc-gate-lead { font-size: 14.5px; margin: 6px 0 14px; }
.bbc-gate-note { font-size: 11.5px; color: var(--bbc-muted); margin-top: 12px; }
.bbc-field { margin-bottom: 12px; }
.bbc-field input, .bbc-form input, .bbc-form select, .bbc-form textarea {
	width: 100%; padding: 12px 13px; font-size: 15px; border: 1px solid var(--bbc-line);
	border-radius: 11px; background: #fff;
}
.bbc-msg { font-size: 12.5px; color: var(--bbc-stop); min-height: 16px; margin-top: 8px; }

.bbc-btn {
	width: 100%; border: none; border-radius: 12px; padding: 13px; font-size: 15px; font-weight: 700;
	color: #fff; background: linear-gradient(135deg, var(--bbc-sun), var(--bbc-sun-deep));
	cursor: pointer; box-shadow: 0 4px 12px rgba(245,126,28,.35);
}
.bbc-btn:disabled { background: #cfd6d8; box-shadow: none; cursor: default; }

/* ---------- Offer list ---------- */
.bbc-list { padding: 8px 4px 32px; }
.bbc-offer {
	background: #fff; border: 1px solid var(--bbc-line); border-radius: 16px;
	padding: 14px 15px; margin-bottom: 12px; box-shadow: var(--bbc-shadow);
	display: flex; flex-direction: column; gap: 10px;
}
.bbc-offer-top { display: flex; align-items: flex-start; gap: 12px; }
.bbc-badge {
	width: 46px; height: 46px; border-radius: 12px; flex: none; display: grid; place-items: center;
	font-size: 22px; background: linear-gradient(135deg, #fff0d6, #ffe0ad);
}
.bbc-offer h3 { margin: 0; font-size: 15.5px; }
.bbc-area { margin: 2px 0 0; font-size: 12px; color: var(--bbc-muted); }
.bbc-deal { font-size: 14px; line-height: 1.35; }
.bbc-deal b { color: var(--bbc-sun-deep); }
.bbc-terms { font-size: 11px; color: var(--bbc-muted); }
.bbc-use {
	border: none; border-radius: 11px; padding: 12px; font-size: 14.5px; font-weight: 700; color: #fff;
	background: linear-gradient(135deg, var(--bbc-sun), var(--bbc-sun-deep));
	cursor: pointer; box-shadow: 0 4px 12px rgba(245,126,28,.35);
}
.bbc-use:disabled { background: #cfd6d8; box-shadow: none; cursor: default; }
.bbc-empty-offers, .bbc-empty { text-align: center; color: var(--bbc-muted); font-size: 13px; padding: 40px 20px; }

/* ---------- Validation overlay ---------- */
.bbc-veil {
	position: fixed; inset: 0; background: rgba(8,20,25,.55); backdrop-filter: blur(3px);
	display: none; align-items: center; justify-content: center; z-index: 99999; padding: 16px;
}
.bbc-veil.bbc-show { display: flex; }
.bbc-ticket {
	position: relative; width: 100%; max-width: 430px; background: #fff; border-radius: 22px;
	padding: 0 0 22px; overflow-y: auto; max-height: 92vh; max-height: 92dvh;
	box-shadow: 0 20px 60px rgba(8,20,25,.4); animation: bbc-rise .28s ease;
}
@keyframes bbc-rise { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.bbc-banner { background: var(--bbc-go, #1ba65a); color: #fff; text-align: center; padding: 16px; border-radius: 22px 22px 0 0; transition: background .3s; }
.bbc-ticket-x {
	position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; border-radius: 50%;
	border: none; background: rgba(255,255,255,.25); color: #fff; font-size: 18px; line-height: 1;
	cursor: pointer; z-index: 2; display: grid; place-items: center;
}
.bbc-ticket.bbc-expired .bbc-banner { background: var(--bbc-stop, #d23b3b); }
.bbc-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; opacity: .9; }
.bbc-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: bbc-blink 1s infinite; }
@keyframes bbc-blink { 50% { opacity: .2; } }
.bbc-state { font-size: 26px; font-weight: 800; margin-top: 4px; letter-spacing: .5px; }
.bbc-ticket-body { padding: 20px; text-align: center; }
.bbc-venue { font-size: 20px; font-weight: 700; }
.bbc-deal2 { font-size: 15px; margin-top: 8px; }
.bbc-deal2 b { color: var(--bbc-sun-deep); }
.bbc-countdown { font-size: 52px; font-weight: 800; font-variant-numeric: tabular-nums; margin: 16px 0 4px; letter-spacing: 1px; }
.bbc-ticket.bbc-expired .bbc-countdown { color: var(--bbc-stop); }
.bbc-clock { font-size: 13px; color: var(--bbc-muted); font-variant-numeric: tabular-nums; }
.bbc-show-staff { font-size: 12px; color: var(--bbc-muted); margin-top: 14px; }
.bbc-ref { font-size: 10.5px; color: var(--bbc-muted); margin-top: 12px; letter-spacing: .5px; }
.bbc-close {
	margin: 18px 20px 0; width: calc(100% - 40px); border: none; border-radius: 12px; padding: 14px;
	font-size: 15px; font-weight: 700; cursor: pointer; background: var(--bbc-ink, #14252c); color: #fff;
}

/* ---------- Forms (sign-up + dashboard) ---------- */
.bbc-form-wrap { padding: 8px 4px 40px; }
.bbc-form-wrap h2 { margin: 8px 0 4px; }
.bbc-form-lead { color: var(--bbc-muted); font-size: 13.5px; margin: 0 0 16px; }
.bbc-form { display: flex; flex-direction: column; gap: 14px; }
.bbc-form label { display: block; font-size: 13.5px; font-weight: 600; }
.bbc-form label small { display: block; font-weight: 400; color: var(--bbc-muted); margin-top: 3px; }
.bbc-form input, .bbc-form select, .bbc-form textarea { margin-top: 6px; font-weight: 400; }
.bbc-row { display: flex; gap: 12px; }
.bbc-row label { flex: 1; }
.bbc-req { color: var(--bbc-stop); margin-left: 2px; }
.bbc-fieldset { border: 1px solid var(--bbc-line); border-radius: 12px; padding: 12px 14px; }
.bbc-fieldset legend { font-size: 13px; font-weight: 700; padding: 0 6px; }
.bbc-radio { display: block; font-weight: 400; margin: 6px 0; }
.bbc-radio input { width: auto; margin-right: 6px; }
.bbc-check { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; }
.bbc-check input { width: auto; margin-top: 3px; }
.bbc-terms-box {
	max-height: 150px; overflow-y: auto; border: 1px solid var(--bbc-line); border-radius: 10px;
	padding: 12px; font-size: 12px; color: var(--bbc-muted); background: #fbfaf7;
}

/* ---------- Notices ---------- */
.bbc-notice { border-radius: 10px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 16px; }
.bbc-notice-ok { background: #e6f6ec; color: #10643a; border: 1px solid #bfe6cd; }
.bbc-notice-err { background: #fdeaea; color: #8a2020; border: 1px solid #f2c4c4; }
.bbc-pending-banner { background: #fff4e0; border: 1px solid #ffd694; border-radius: 10px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 16px; }

/* ---------- Thank-you panel ---------- */
.bbc-thankyou {
	text-align: center; background: #fff; border: 1px solid var(--bbc-line); border-radius: 16px;
	padding: 30px 22px 26px; box-shadow: var(--bbc-shadow); margin-bottom: 16px;
}
.bbc-thankyou-tick {
	width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center;
	font-size: 28px; font-weight: 800; color: #fff; background: var(--bbc-go);
}
.bbc-thankyou h2 { margin: 0 0 8px; }
.bbc-thankyou p { color: var(--bbc-muted); font-size: 14px; line-height: 1.5; margin: 0 auto 18px; max-width: 30em; }
.bbc-btn-inline { display: inline-block; width: auto; padding: 12px 22px; text-decoration: none; }

/* ---------- Dashboard offer rows ---------- */
.bbc-dash-head { display: flex; align-items: center; justify-content: space-between; }
.bbc-logout { font-size: 12.5px; color: var(--bbc-muted); }
.bbc-sec { margin: 22px 0 8px; font-size: 16px; }
.bbc-offer-rows { display: flex; flex-direction: column; gap: 10px; }
.bbc-offer-row {
	display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
	background: #fff; border: 1px solid var(--bbc-line); border-radius: 12px; padding: 12px 14px;
}
.bbc-offer-main { display: flex; flex-direction: column; gap: 2px; }
.bbc-offer-deal { font-size: 13px; }
.bbc-offer-meta { font-size: 11.5px; color: var(--bbc-muted); }
.bbc-offer-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.bbc-badge-st { font-size: 11px; font-weight: 700; }
.bbc-st-live .bbc-badge-st { color: var(--bbc-go); }
.bbc-st-pending .bbc-badge-st { color: #d98a00; }
.bbc-st-ended .bbc-badge-st, .bbc-st-rejected .bbc-badge-st { color: var(--bbc-muted); }
.bbc-btn-end {
	border: 1px solid var(--bbc-line); background: #fff; color: var(--bbc-stop);
	border-radius: 9px; padding: 6px 11px; font-size: 12px; font-weight: 600; cursor: pointer;
}