/* Beach flag warnings ------------------------------------------------------
 *
 * Loaded by the [usrb_beach_flags] shortcode and by the booking page. Kept
 * apart from booking.css so a page that only shows the flags does not pull in
 * the whole booking stylesheet.
 */

.usrb-flags {
	--usrb-flag-red: #e8123c;
	--usrb-flag-yellow: #f5d312;
	--usrb-flag-green: #17c26a;
	--usrb-flag-purple: #8a2fc4;
	--usrb-flag-ink: #0b3f52;
	--usrb-flag-body: #5d7581;
	--usrb-flag-line: #e2e9ed;

	font-family: inherit;
	color: var(--usrb-flag-ink);
}

.usrb-flags__title {
	margin: 0 0 8px;
	font-size: clamp(20px, 1.5vw, 26px);
	font-weight: 700;
	line-height: 1.2;
}

.usrb-flags__intro {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--usrb-flag-body);
}

.usrb-flags__list {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.usrb-flag {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

/* Swatch ------------------------------------------------------------------ */

.usrb-flag__swatch {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 0 0 auto;
	width: 42px;
	margin-top: 3px;
}

.usrb-flag__bar {
	display: block;
	height: 15px;
	border-radius: 2px 6px 2px 6px;
	background-color: var(--usrb-flag-red);
}

/* Two bars for a double red, so it reads as the closed-water signal. */
.usrb-flag__swatch--double-red .usrb-flag__bar { height: 11px; }
.usrb-flag__swatch--red .usrb-flag__bar { background-color: var(--usrb-flag-red); }
.usrb-flag__swatch--yellow .usrb-flag__bar { background-color: var(--usrb-flag-yellow); }
.usrb-flag__swatch--green .usrb-flag__bar { background-color: var(--usrb-flag-green); }
.usrb-flag__swatch--purple .usrb-flag__bar { background-color: var(--usrb-flag-purple); }

.usrb-flag__body {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.usrb-flag__name {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.usrb-flag__note {
	font-size: 15px;
	line-height: 1.5;
	color: var(--usrb-flag-body);
}

/* The two red flags carry the warning in the note colour as well. */
.usrb-flag--double-red .usrb-flag__note,
.usrb-flag--red .usrb-flag__note {
	color: var(--usrb-flag-red);
}

/* Policy prose ------------------------------------------------------------ */

.usrb-flags__policy {
	margin-top: 34px;
	padding-top: 28px;
	border-top: 1px solid var(--usrb-flag-line);
}

.usrb-flags__policy-title {
	margin: 0 0 12px;
	font-size: clamp(18px, 1.2vw, 22px);
	font-weight: 700;
}

.usrb-flags__policy p {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--usrb-flag-body);
}

.usrb-flags__policy p:last-child { margin-bottom: 0; }

/* Compact variant, inside the booking steps ------------------------------- */

.usrb-flags--compact {
	margin-top: 28px;
	padding: 22px 24px;
	background-color: #f4f7f9;
	border-radius: 14px;
}

.usrb-flags--compact .usrb-flags__title { font-size: 17px; }
.usrb-flags--compact .usrb-flags__intro { margin-bottom: 16px; font-size: 14px; }
.usrb-flags--compact .usrb-flags__list { gap: 10px; }
.usrb-flags--compact .usrb-flag { gap: 12px; }
.usrb-flags--compact .usrb-flag__swatch { width: 32px; }
.usrb-flags--compact .usrb-flag__bar { height: 11px; }
.usrb-flags--compact .usrb-flag__swatch--double-red .usrb-flag__bar { height: 8px; }
.usrb-flags--compact .usrb-flag__name { font-size: 14px; }
.usrb-flags--compact .usrb-flag__note { font-size: 13.5px; }

@media (max-width: 560px) {
	.usrb-flag__swatch { width: 34px; }
	.usrb-flag__name { font-size: 15px; }
	.usrb-flag__note { font-size: 14px; }
}