/* Benidorm Bulletin Countdown.
 *
 * Built for a phone held in one hand, and for a theme that knows nothing about
 * it: everything is scoped under .bbcd-app and sets its own type and colour
 * rather than inheriting whatever the page happens to be using.
 */

.bbcd-app {
	--bbcd-navy: #1a3a5c;
	--bbcd-navy-soft: #24507c;
	--bbcd-sun: #f5a623;
	/* The site's own cream, not an approximation of it. The app sits in the
	   middle of the page and any difference between the two shows up as a
	   visible column down the screen. */
	--bbcd-cream: #fff9f0;
	--bbcd-ink: #22303c;
	--bbcd-muted: #6b7a88;
	--bbcd-line: #e3ded4;

	max-width: 520px;
	margin: 0 auto;
	background: var(--bbcd-cream);
	color: var(--bbcd-ink);
	font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 2px 24px rgba(26, 58, 92, 0.12);
}

.bbcd-app *,
.bbcd-app *::before,
.bbcd-app *::after {
	box-sizing: border-box;
}

.bbcd-boot {
	padding: 48px 24px;
	text-align: center;
	color: var(--bbcd-muted);
}

.bbcd-body {
	padding: 18px 18px 24px;
}

.bbcd-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------------------------------------------------------------- Setup */

.bbcd-setup {
	padding: 26px 22px 34px;
	background: var(--bbcd-navy);
	color: #fff;
	min-height: 420px;
}

.bbcd-progress {
	height: 4px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 2px;
	overflow: hidden;
	margin-bottom: 26px;
}

.bbcd-progress > span {
	display: block;
	height: 100%;
	background: var(--bbcd-sun);
	transition: width 0.3s ease;
}

.bbcd-progress-wide {
	background: var(--bbcd-line);
	margin: 4px 0 8px;
}

.bbcd-h {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 28px;
	line-height: 1.2;
	margin: 0 0 8px;
	color: #fff;
}

.bbcd-sub {
	margin: 0 0 22px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 15px;
}

.bbcd-date {
	width: 100%;
	padding: 14px;
	font-size: 17px;
	font-family: inherit;
	border: 1px solid var(--bbcd-line);
	border-radius: 8px;
	background: #fff;
	color: var(--bbcd-ink);
	margin-bottom: 14px;
}

.bbcd-nights {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.bbcd-chip {
	flex: 0 0 auto;
	min-width: 56px;
	padding: 13px 6px;
	font: inherit;
	font-size: 17px;
	font-weight: 600;
	text-align: center;
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 10px;
	cursor: pointer;
}

.bbcd-chip-on {
	background: var(--bbcd-sun);
	border-color: var(--bbcd-sun);
	color: var(--bbcd-navy);
}

.bbcd-nights-other {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 120px;
	padding: 0 12px 0 0;
	background: #fff;
	border: 1px solid var(--bbcd-line);
	border-radius: 10px;
}

.bbcd-nights-other input {
	width: 100%;
	min-width: 0;
	padding: 13px 12px;
	font: inherit;
	font-size: 17px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--bbcd-ink);
}

.bbcd-nights-unit {
	flex: 0 0 auto;
	font-size: 14px;
	color: var(--bbcd-muted);
}

/* On the settings screen the picker sits on white, not navy. */
.bbcd-card .bbcd-chip {
	color: var(--bbcd-ink);
	background: #fff;
	border-color: var(--bbcd-line);
}

.bbcd-card .bbcd-chip-on {
	background: var(--bbcd-navy);
	border-color: var(--bbcd-navy);
	color: #fff;
}

.bbcd-card .bbcd-nights-other {
	background: var(--bbcd-cream);
}

.bbcd-choices {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bbcd-choice {
	display: block;
	width: 100%;
	padding: 15px 16px;
	text-align: left;
	font: inherit;
	font-size: 16px;
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 10px;
	cursor: pointer;
}

.bbcd-choice:hover,
.bbcd-choice:focus-visible {
	background: rgba(255, 255, 255, 0.16);
}

.bbcd-choice-on {
	background: var(--bbcd-sun);
	border-color: var(--bbcd-sun);
	color: var(--bbcd-navy);
	font-weight: 600;
}

.bbcd-back {
	margin-top: 20px;
	color: rgba(255, 255, 255, 0.7);
}

/* Inside a settings card the choices sit on cream, not navy. */
.bbcd-card .bbcd-choice {
	color: var(--bbcd-ink);
	background: #fff;
	border-color: var(--bbcd-line);
}

.bbcd-card .bbcd-choice-on {
	background: var(--bbcd-navy);
	border-color: var(--bbcd-navy);
	color: #fff;
}

.bbcd-choices-tight .bbcd-choice {
	padding: 11px 14px;
	font-size: 15px;
}

/* ----------------------------------------------------------------- Hero */

.bbcd-hero {
	position: relative;
	background-size: cover;
	background-position: center;
	background-color: var(--bbcd-navy);
	color: #fff;
	padding: 54px 22px 30px;
	text-align: center;
}

.bbcd-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(26, 58, 92, 0.25), rgba(26, 58, 92, 0.9));
}

.bbcd-hero-plain::after {
	background: linear-gradient(to bottom, var(--bbcd-navy-soft), var(--bbcd-navy));
}

.bbcd-hero-inner {
	position: relative;
	z-index: 1;
}

.bbcd-big {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 88px;
	font-weight: 700;
	line-height: 0.95;
	color: var(--bbcd-sun);
	letter-spacing: -0.02em;
}

.bbcd-label {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 12px;
	font-weight: 600;
	margin-top: 8px;
	color: rgba(255, 255, 255, 0.85);
}

.bbcd-phrase {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 21px;
	font-style: italic;
	margin: 18px 0 6px;
	color: #fff;
}

.bbcd-when {
	margin: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.65);
}

/* -------------------------------------------------------------- Weather */

.bbcd-weather {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid var(--bbcd-line);
	border-radius: 10px;
	margin-bottom: 14px;
}

.bbcd-weather-temp {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 26px;
	font-weight: 700;
	color: var(--bbcd-navy);
}

.bbcd-weather-words {
	font-size: 14px;
	color: var(--bbcd-muted);
}

/* ---------------------------------------------------------------- Cards */

.bbcd-card {
	background: #fff;
	border: 1px solid var(--bbcd-line);
	border-radius: 12px;
	padding: 18px;
	margin-bottom: 14px;
}

.bbcd-card h3 {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 20px;
	line-height: 1.25;
	margin: 0 0 8px;
	color: var(--bbcd-navy);
}

.bbcd-card p {
	margin: 0 0 14px;
	font-size: 15px;
	color: var(--bbcd-ink);
}

.bbcd-job {
	border-left: 4px solid var(--bbcd-sun);
}

.bbcd-card-quiet {
	background: transparent;
	border-style: dashed;
}

.bbcd-card-ask {
	background: var(--bbcd-navy);
	border-color: var(--bbcd-navy);
}

.bbcd-card-ask h3 {
	color: #fff;
}

.bbcd-card-ask p {
	color: rgba(255, 255, 255, 0.8);
}

.bbcd-eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 11px;
	font-weight: 700;
	color: var(--bbcd-sun);
	margin-bottom: 6px;
}

/* -------------------------------------------------------------- Buttons */

.bbcd-btn {
	display: inline-block;
	padding: 13px 20px;
	font: inherit;
	font-weight: 600;
	font-size: 16px;
	color: var(--bbcd-navy);
	background: var(--bbcd-sun);
	border: 1px solid var(--bbcd-sun);
	border-radius: 8px;
	cursor: pointer;
}

.bbcd-btn:hover,
.bbcd-btn:focus-visible {
	filter: brightness(1.05);
}

.bbcd-btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

.bbcd-btn-block {
	display: block;
	width: 100%;
}

.bbcd-btn-small {
	padding: 9px 14px;
	font-size: 14px;
}

.bbcd-btn-ghost {
	background: transparent;
	border-color: var(--bbcd-navy);
	color: var(--bbcd-navy);
}

.bbcd-link-btn {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 15px;
	color: var(--bbcd-navy);
	text-decoration: underline;
	cursor: pointer;
}

.bbcd-actions {
	display: flex;
	gap: 10px;
	margin-top: 6px;
}

.bbcd-actions .bbcd-btn {
	flex: 1;
	font-size: 15px;
	padding: 12px 10px;
}

.bbcd-inline-link {
	display: inline-block;
	margin-bottom: 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--bbcd-navy);
}

/* ------------------------------------------------------------- List row */

.bbcd-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 12px;
	padding: 16px 18px;
	margin-bottom: 14px;
	font: inherit;
	text-align: left;
	background: #fff;
	border: 1px solid var(--bbcd-line);
	border-radius: 12px;
	color: var(--bbcd-ink);
	cursor: pointer;
}

.bbcd-chev {
	font-size: 26px;
	color: var(--bbcd-muted);
	line-height: 1;
}

.bbcd-muted {
	color: var(--bbcd-muted);
	font-size: 14px;
}

.bbcd-centre {
	text-align: center;
}

/* ------------------------------------------------------------- The list */

.bbcd-topbar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	background: var(--bbcd-navy);
	color: #fff;
}

.bbcd-topbar .bbcd-link-btn {
	color: #fff;
	text-decoration: none;
}

.bbcd-topbar-title {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 18px;
}

.bbcd-cat {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 17px;
	color: var(--bbcd-navy);
	margin: 22px 0 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--bbcd-line);
}

.bbcd-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bbcd-item {
	border-bottom: 1px solid var(--bbcd-line);
}

.bbcd-item:last-child {
	border-bottom: 0;
}

.bbcd-tick {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	padding: 14px 2px;
	font: inherit;
	text-align: left;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}

.bbcd-box {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin-top: 1px;
	border: 2px solid var(--bbcd-navy);
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	line-height: 1;
	color: #fff;
}

.bbcd-item-done .bbcd-box {
	background: var(--bbcd-navy);
}

.bbcd-item-text strong {
	display: block;
	font-size: 16px;
	font-weight: 600;
}

.bbcd-note {
	display: block;
	margin-top: 3px;
	font-size: 14px;
	color: var(--bbcd-muted);
}

.bbcd-wait {
	display: inline-block;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--bbcd-muted);
}

.bbcd-item-done .bbcd-item-text strong {
	text-decoration: line-through;
	color: var(--bbcd-muted);
}

.bbcd-item-locked .bbcd-box {
	border-color: var(--bbcd-line);
}

.bbcd-item-locked .bbcd-item-text strong {
	color: var(--bbcd-muted);
	font-weight: 500;
}

.bbcd-item-locked .bbcd-note {
	display: none;
}

/* ---------------------------------------------------------------- Email */

.bbcd-email {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bbcd-email input {
	flex: 1 1 180px;
	min-width: 0;
	padding: 13px 14px;
	font: inherit;
	font-size: 16px;
	border: 1px solid var(--bbcd-line);
	border-radius: 8px;
	background: #fff;
	color: var(--bbcd-ink);
}

.bbcd-error {
	flex: 1 0 100%;
	margin: 4px 0 0;
	font-size: 14px;
	color: #ffd7d7;
}

.bbcd-card:not(.bbcd-card-ask) .bbcd-error {
	color: #a3261f;
}

.bbcd-saved {
	margin: 10px 0 0;
	font-size: 14px;
	color: #1f7a4d;
}

/* ---------------------------------------------------------------- Toast */

.bbcd-toast {
	margin: 12px 0 0;
	padding: 12px 14px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--bbcd-navy);
	background: #fff;
	border: 1px solid var(--bbcd-sun);
	border-left-width: 4px;
	border-radius: 8px;
}

/* --------------------------------------------------------------- Footer */

.bbcd-footer {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin: 22px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--bbcd-line);
	font-size: 13px;
	color: var(--bbcd-muted);
}

.bbcd-footer a {
	color: var(--bbcd-navy);
	font-weight: 600;
	text-decoration: none;
}

.bbcd-footer-url {
	color: var(--bbcd-muted);
}

/* -------------------------------------------------------- Install panel */

.bbcd-install {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 18px 18px;
	padding: 14px;
	background: #fff;
	border: 1px solid var(--bbcd-line);
	border-radius: 12px;
}

.bbcd-install-icon {
	flex: 0 0 auto;
	border-radius: 12px;
}

.bbcd-install-body {
	flex: 1 1 auto;
	min-width: 0;
}

.bbcd-install-title {
	display: block;
	font-size: 15px;
	color: var(--bbcd-navy);
}

.bbcd-install-text {
	margin: 3px 0 8px;
	font-size: 14px;
	color: var(--bbcd-muted);
}

.bbcd-install-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}

.bbcd-install-x {
	background: none;
	border: 0;
	font-size: 20px;
	line-height: 1;
	color: var(--bbcd-muted);
	cursor: pointer;
	padding: 0 2px;
}

.bbcd-steps {
	margin: 8px 0 0;
	padding-left: 20px;
	font-size: 14px;
	color: var(--bbcd-ink);
}

.bbcd-steps li {
	margin-bottom: 4px;
}

/* ------------------------------------------------- The page around the app
 *
 * These rules reach outside the app and touch the theme, which is normally bad
 * manners. They are safe here because this stylesheet is only ever loaded on a
 * page carrying the shortcode.
 *
 * The sidebar goes on every device. It carries a newsletter sign-up, and on a
 * phone that lands directly beneath the app's own email ask: two different
 * forms wanting the same address, which converts worse than either alone.
 */

.bbcd-page #secondary,
.bbcd-page .bb-sidebar-signup {
	display: none;
}

/* The palette has to exist above the app as well, since the wrappers being
   recoloured below are its ancestors and cannot inherit from it. */
.bbcd-page {
	--bbcd-cream: #fff9f0;
	--bbcd-navy: #1a3a5c;
}

/* One background, all the way across.
 *
 * The site's own custom CSS paints .content-area white while the body and
 * .site-content around it are cream, which puts a white column behind the app
 * and a visible seam down either side of it. Everything here is brought to the
 * same cream. !important is not decoration: the rule being overridden carries
 * !important itself, and nothing else will beat it.
 *
 * The header is left alone deliberately: it is meant to be navy. */
.bbcd-page,
.bbcd-page #page,
.bbcd-page .site,
.bbcd-page #content,
.bbcd-page .site-content,
.bbcd-page #primary,
.bbcd-page .content-area,
.bbcd-page .site-main,
.bbcd-page .entry-content {
	background-color: var(--bbcd-cream) !important;
}

/* With the sidebar gone the content has to take the room back. Written to suit
   a float, a flex row or a grid, since themes differ and this one is not ours
   to depend on. */
.bbcd-page #primary,
.bbcd-page .content-area {
	width: 100%;
	max-width: 100%;
	flex: 1 1 100%;
	grid-column: 1 / -1;
	float: none;
	margin-left: 0;
	margin-right: 0;
}

/* Installed on the home screen, the theme's furniture is worse than useless:
   there is no address bar to give it context, and a site header inside an app
   reads as a page that has failed to load properly. In a browser tab it all
   stays exactly as it was. */
@media (display-mode: standalone) {
	.bbcd-page #masthead,
	.bbcd-page #colophon,
	.bbcd-page .page-header,
	.bbcd-page .entry-footer {
		display: none;
	}

	.bbcd-page #content,
	.bbcd-page .site-main {
		margin-top: 0;
		padding-top: 0;
	}

	.bbcd-app {
		border-radius: 0;
		box-shadow: none;
	}
}

/* ------------------------------------------------------------- Wide-ish */

@media (min-width: 480px) {
	.bbcd-big {
		font-size: 104px;
	}
}