/* ============================================================
   FlyFreaks. Hand written CSS for behaviour theme.json cannot
   express: keyframes, bidi helpers, focus, scrollbars, motion.
   No hardcoded brand colors here beyond the CSS variables below,
   which mirror theme.json 1 for 1. No other colors anywhere.
   ============================================================ */

:root {
	--color-navy: #17375e;
	--color-navy-deep: #0f2a47;
	--color-teal: #2a7f9e;
	--color-teal-sky: #5fb3cc;
	--color-coral: #ff6b4a;
	--color-coral-button: #e9502b;
	--color-orange: #ff8a3d;
	--color-magenta: #c2185b;
	--color-blush: #f7a6aa;
	--color-sand: #e2c49a;
	--color-cream: #f8f1e4;
	--color-white: #ffffff;
	--color-success: #22a06b;
	--color-warning: #f5a623;
	--color-error: #e5484d;

	--gradient-sunset: linear-gradient(135deg, #ff6b4a 0%, #c2185b 100%);
	--gradient-ocean: linear-gradient(135deg, #2a7f9e 0%, #17375e 100%);

	--radius-input: 8px;
	--radius-sticker: 8px;
	--radius-card: 12px;
	--radius-modal: 16px;
	--radius-pill: 999px;

	--stroke-navy: 2px solid var(--color-navy);
	--divider: 1px solid rgba(23, 55, 94, 0.12);

	--shadow-card: 0 8px 24px rgba(23, 55, 94, 0.12);
	--shadow-card-hover: 0 14px 32px rgba(23, 55, 94, 0.18);
	--shadow-modal: 0 16px 48px rgba(23, 55, 94, 0.2);

	--content-width: 1200px;
	--gutter: 24px;
	--header-desktop: 64px;
	--header-mobile: 56px;
	--header-scrolled: 48px;
	--touch-target-min: 44px;

	--font-display: 'Secular One', system-ui, sans-serif;
	--font-body: 'Rubik', system-ui, sans-serif;
	--font-hand: 'Amatic SC', cursive;

	--motion-state: 150ms;
	--motion-card: 200ms;
	--motion-modal: 300ms;
	--motion-easing: ease-out;
}

/* ============================================================
   Base
   ============================================================ */
/* No box-sizing reset existed anywhere in the theme, so every width:100% element with its own
   padding (buttons, inputs, cards) added that padding on top of 100% and overflowed its
   container. This is what caused the ff-btn--block telegram/whatsapp buttons in the channel
   band to overflow the viewport at 390px. border-box everywhere is the correct general fix,
   not a patch on that one component. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

.font-display {
	font-family: var(--font-display);
	line-height: 1.2;
	font-weight: 400;
}
.font-hand {
	font-family: var(--font-hand);
	font-weight: 700;
}

/* Tabular figures for every number column, prices, countdowns, tables */
.tnum {
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

/* Latin, airport codes and numbers stay LTR inside Hebrew text */
.ltr {
	direction: ltr;
	unicode-bidi: isolate;
	display: inline-block;
}

/* ============================================================
   Selection and focus
   ============================================================ */
::selection {
	background: var(--color-blush);
	color: var(--color-navy-deep);
}

:focus-visible {
	outline: 3px solid var(--color-teal);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ============================================================
   Scrollbars
   ============================================================ */
* {
	scrollbar-width: thin;
	scrollbar-color: rgba(23, 55, 94, 0.25) transparent;
}
*::-webkit-scrollbar {
	height: 8px;
	width: 8px;
}
*::-webkit-scrollbar-track {
	background: transparent;
}
*::-webkit-scrollbar-thumb {
	background-color: rgba(23, 55, 94, 0.25);
	border-radius: 999px;
}

.no-scrollbar::-webkit-scrollbar {
	display: none;
}
.no-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

/* ============================================================
   Skip link
   ============================================================ */
.skip-link {
	position: fixed;
	inset-inline-start: 8px;
	top: -60px;
	z-index: 100;
	background: var(--color-navy);
	color: var(--color-cream);
	padding: 12px 20px;
	border-radius: var(--radius-input);
	font-weight: 500;
	transition: top var(--motion-state) var(--motion-easing);
}
.skip-link:focus {
	top: 8px;
}

/* ============================================================
   Keyframes
   ============================================================ */
@keyframes contrail-draw {
	from {
		stroke-dashoffset: 320;
	}
	to {
		stroke-dashoffset: 0;
	}
}
@keyframes pulse-dot {
	0%,
	100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.35);
		opacity: 0.55;
	}
}
@keyframes shimmer {
	from {
		background-position: 200% 0;
	}
	to {
		background-position: -200% 0;
	}
}
@keyframes fade-slide-rtl {
	from {
		opacity: 0;
		transform: translateX(12px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.contrail-path {
	stroke-dasharray: 320;
	animation: contrail-draw 1.1s var(--motion-easing) both;
}
.animate-pulse-dot {
	animation: pulse-dot 1.4s ease-in-out infinite;
}
.animate-page {
	animation: fade-slide-rtl 0.3s var(--motion-easing) both;
}

.skeleton {
	background: linear-gradient(90deg, var(--color-cream) 25%, rgba(226, 196, 154, 0.35) 50%, var(--color-cream) 75%);
	background-size: 200% 100%;
	animation: shimmer 1.6s ease-in-out infinite;
	border-radius: var(--radius-card);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.animate-page {
		animation: none;
	}
	.contrail-path {
		stroke-dasharray: none;
	}
}

/* ============================================================
   Layout helpers
   ============================================================ */
.ff-container {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: 16px;
}
@media (min-width: 768px) {
	.ff-container {
		padding-inline: 32px;
	}
}

.ff-touch {
	min-height: var(--touch-target-min);
	min-width: var(--touch-target-min);
}

/* ============================================================
   Site header
   ============================================================ */
.ff-contrail-progress {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 60;
	height: 3px;
	background: transparent;
}
.ff-contrail-progress__bar {
	display: block;
	height: 100%;
	width: 0%;
	background: var(--gradient-sunset);
	transition: width var(--motion-state) var(--motion-easing);
}

.ff-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
	background: rgba(248, 241, 228, 0.92);
	backdrop-filter: blur(8px);
	border-block-end: var(--divider);
	transition: height var(--motion-state) var(--motion-easing);
	height: var(--header-mobile);
}
@media (min-width: 768px) {
	.ff-header {
		height: var(--header-desktop);
	}
}
.ff-header__inner {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: 16px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
@media (min-width: 768px) {
	.ff-header__inner {
		padding-inline: 32px;
	}
}
.ff-header.is-scrolled {
	height: var(--header-scrolled);
}

.ff-nav {
	display: none;
	align-items: center;
	gap: 4px;
}
@media (min-width: 1024px) {
	.ff-nav {
		display: flex;
	}
}
.ff-nav a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 12px;
	border-radius: var(--radius-pill);
	font-weight: 500;
	font-size: 17px;
	color: var(--color-navy);
	text-decoration: none;
	transition: background var(--motion-state) var(--motion-easing);
}
.ff-nav a:hover,
.ff-nav a:focus-visible {
	background: rgba(23, 55, 94, 0.06);
}
.ff-nav a.is-hot::after {
	content: '';
	position: absolute;
	inset-inline-end: -2px;
	top: -2px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-magenta);
	animation: pulse-dot 1.4s ease-in-out infinite;
}

.ff-header__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}
.ff-icon-btn {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--color-navy);
	transition: background var(--motion-state) var(--motion-easing);
}
.ff-icon-btn:hover {
	background: rgba(23, 55, 94, 0.06);
}

/* Mega menu */
.ff-mega-wrap {
	position: relative;
}
.ff-mega {
	position: absolute;
	inset-inline-start: 50%;
	transform: translateX(50%) translateY(4px);
	top: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--motion-state) var(--motion-easing), transform var(--motion-state) var(--motion-easing), visibility var(--motion-state);
	z-index: 40;
	padding-top: 8px;
}
.ff-mega-wrap:hover .ff-mega,
.ff-mega-wrap:focus-within .ff-mega {
	opacity: 1;
	visibility: visible;
	transform: translateX(50%) translateY(0);
}
[dir='rtl'] .ff-mega {
	transform: translateX(50%) translateY(4px);
}

/* Mobile menu */
.ff-mobile-menu {
	display: none;
	border-top: var(--divider);
	background: var(--color-cream);
	padding: 8px 16px 16px;
}
.ff-mobile-menu.is-open {
	display: block;
}
.ff-mobile-menu a {
	display: block;
	padding: 12px 0;
	font-size: 18px;
	font-weight: 500;
	color: var(--color-navy);
	text-decoration: none;
	border-bottom: var(--divider);
}
@media (min-width: 1024px) {
	.ff-mobile-toggle {
		display: none;
	}
}

/* ============================================================
   Buttons
   ============================================================ */
.ff-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: var(--radius-pill);
	font-weight: 500;
	font-size: 17px;
	font-family: var(--font-body);
	text-decoration: none;
	cursor: pointer;
	border: none;
	transition: filter var(--motion-state) var(--motion-easing), transform var(--motion-state) var(--motion-easing);
	user-select: none;
}
.ff-btn:active {
	transform: scale(0.98);
}
.ff-btn--primary {
	background: var(--gradient-sunset);
	color: var(--color-white);
	height: 52px;
	padding-inline: 24px;
	box-shadow: 0 6px 16px rgba(233, 80, 43, 0.28);
}
.ff-btn--primary:hover {
	filter: brightness(1.05);
}
.ff-btn--secondary {
	background: transparent;
	border: 2px solid var(--color-navy);
	color: var(--color-navy);
	height: 48px;
	padding-inline: 24px;
}
.ff-btn--secondary:hover {
	background: var(--color-navy);
	color: var(--color-white);
}
.ff-btn--ghost {
	background: transparent;
	color: var(--color-navy);
	height: 44px;
	padding-inline: 16px;
}
.ff-btn--ghost:hover {
	background: rgba(23, 55, 94, 0.06);
}
.ff-btn--telegram {
	background: var(--color-teal);
	color: var(--color-white);
	height: 48px;
	padding-inline: 20px;
	font-size: 15px;
}
.ff-btn--whatsapp {
	/* --color-success at full strength is only 3.3:1 against white text, below the 4.5:1 AA
	   floor. Darkened 20% toward black, derived from the same token rather than a new hardcoded
	   color, it clears 4.5:1 while staying recognizably the same green. */
	background: color-mix(in srgb, var(--color-success) 80%, black);
	color: var(--color-white);
	height: 48px;
	padding-inline: 20px;
	font-size: 15px;
}
.ff-btn--telegram:hover,
.ff-btn--whatsapp:hover {
	filter: brightness(1.05);
}
.ff-btn--block {
	width: 100%;
}

/* ============================================================
   Chips and stickers
   ============================================================ */
.ff-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding-inline: 16px;
	border-radius: var(--radius-pill);
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
	border: 2px solid var(--color-navy);
	background: transparent;
	color: var(--color-navy);
	text-decoration: none;
	transition: transform var(--motion-state) var(--motion-easing);
}
.ff-chip:hover {
	transform: translateY(-2px);
}
.ff-chip.is-active {
	background: var(--color-navy);
	color: var(--color-cream);
}
.ff-chip--on-dark {
	border-color: rgba(248, 241, 228, 0.55);
	color: var(--color-cream);
	background: rgba(248, 241, 228, 0.1);
}

.ff-sticker {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border: 2px solid var(--color-navy);
	border-radius: var(--radius-sticker);
	font-weight: 700;
	font-size: 13px;
	line-height: 1.4;
	white-space: nowrap;
}
.ff-sticker--info { background: var(--color-sand); color: var(--color-navy); }
.ff-sticker--savings { background: var(--color-coral); color: var(--color-white); }
.ff-sticker--hot { background: var(--color-magenta); color: var(--color-white); }
.ff-sticker--verified { background: var(--color-teal); color: var(--color-white); }
.ff-sticker--seasonal { background: var(--color-cream); color: var(--color-navy); }
.ff-sticker--hand {
	background: var(--color-cream);
	color: var(--color-navy);
	font-family: var(--font-hand);
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
}
.ff-sticker--tilt-1 { transform: rotate(-5deg); }
.ff-sticker--tilt-2 { transform: rotate(3deg); }
.ff-sticker--tilt-3 { transform: rotate(-3deg); }
.ff-sticker--tilt-4 { transform: rotate(4deg); }

/* ============================================================
   Deal card
   ============================================================ */
.ff-deal-card {
	display: flex;
	flex-direction: column;
	background: var(--color-white);
	border-radius: var(--radius-card);
	border: 2px solid var(--color-navy);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform var(--motion-card) var(--motion-easing), box-shadow var(--motion-card) var(--motion-easing);
}
.ff-deal-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card-hover);
}
.ff-deal-card__media {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--color-sand);
}
.ff-deal-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ff-deal-card__score {
	position: absolute;
	top: 12px;
	inset-inline-start: 12px;
}
.ff-deal-card__save {
	position: absolute;
	top: 12px;
	inset-inline-end: 12px;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	border: 2px solid var(--color-navy);
}
.ff-deal-card__stickers {
	position: absolute;
	bottom: 12px;
	inset-inline-start: 12px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
.ff-deal-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
}
.ff-deal-card__title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.ff-deal-card__route {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: rgba(23, 55, 94, 0.7);
}
.ff-deal-card__price-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-top: 4px;
}
.ff-deal-card__verified {
	display: flex;
	align-items: center;
	gap: 6px;
	padding-top: 4px;
	font-size: 13px;
	/* Teal on white is a borderline 4.54:1; navy is unambiguous at 10.7:1+ and matches every
	   other small caption color in the theme. */
	color: var(--color-navy);
}
.ff-deal-card__verified-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-teal);
}

.ff-price {
	direction: ltr;
	unicode-bidi: isolate;
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	font-family: var(--font-display);
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
	color: var(--color-navy);
}
.ff-price--big { font-size: clamp(40px, 33.74px + 1.739vw, 56px); }
.ff-price--card { font-size: clamp(24px, 22.44px + 0.435vw, 28px); }
.ff-price--inline { font-size: 18px; }
.ff-price__from { font-size: 0.5em; font-family: var(--font-body); font-weight: 500; }
.ff-price__sign { font-size: 0.7em; }
.ff-price-strike {
	direction: ltr;
	unicode-bidi: isolate;
	font-variant-numeric: tabular-nums;
	font-size: 15px;
	text-decoration: line-through;
	color: rgba(23, 55, 94, 0.5);
}

/* ============================================================
   Search bar
   ============================================================ */
.ff-search {
	width: 100%;
}
.ff-search__grid {
	display: grid;
	gap: 12px;
	padding: 12px;
	background: var(--color-white);
	border-radius: 16px;
	border: 2px solid var(--color-navy);
	box-shadow: var(--shadow-card);
}
@media (min-width: 768px) {
	.ff-search__grid {
		grid-template-columns: 1fr 1fr 1fr auto;
	}
}
.ff-search__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: start;
}
.ff-search__label {
	font-size: 13px;
	font-weight: 500;
	color: rgba(23, 55, 94, 0.7);
	padding-inline: 8px;
}
.ff-search__control {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding-inline: 12px;
	border-radius: var(--radius-input);
	border: 1px solid rgba(23, 55, 94, 0.2);
}
.ff-search__control input {
	width: 100%;
	background: transparent;
	border: none;
	outline: none;
	font-size: 17px;
	color: var(--color-navy);
	font-family: var(--font-body);
}
.ff-search__control input::placeholder {
	color: rgba(23, 55, 94, 0.45);
}
.ff-search__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
	justify-content: center;
}

/* ============================================================
   Countdown
   ============================================================ */
.ff-countdown {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-navy);
}
.ff-countdown__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-magenta);
	animation: pulse-dot 1.4s ease-in-out infinite;
}
.ff-countdown__time {
	direction: ltr;
	unicode-bidi: isolate;
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	font-size: 15px;
}

/* ============================================================
   Accessibility toolbar is owned by the flyfreaks-core plugin
   (assets/css/accessibility.css there). The theme does not style
   .ff-a11y itself, to avoid two competing widgets on one page.
   ============================================================ */

/* ============================================================
   Mobile tab bar
   ============================================================ */
.ff-tabbar {
	position: fixed;
	bottom: 0;
	inset-inline: 0;
	z-index: 40;
	background: rgba(248, 241, 228, 0.96);
	backdrop-filter: blur(10px);
	border-top: 2px solid var(--color-navy);
	padding-bottom: env(safe-area-inset-bottom);
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}
@media (min-width: 1024px) {
	.ff-tabbar {
		display: none;
	}
}
.ff-tabbar a {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 8px 0;
	color: var(--color-navy);
	text-decoration: none;
	font-size: 11px;
	font-weight: 500;
}
.ff-tabbar a.is-active {
	color: var(--color-navy);
}
.ff-tabbar-spacer {
	display: block;
}
@media (min-width: 1024px) {
	.ff-tabbar-spacer {
		display: none;
	}
}

/* ============================================================
   Footer
   ============================================================ */
.ff-footer {
	background: var(--gradient-ocean);
	color: var(--color-cream);
}
/* The global h1 to h6 rule from theme.json sets navy on every heading, which beats plain
   inheritance regardless of specificity. Any heading inside the dark footer needs the cream
   foreground stated explicitly, or it renders unreadable on the ocean gradient. */
.ff-footer h1,
.ff-footer h2,
.ff-footer h3,
.ff-footer h4 {
	color: var(--color-cream);
}
.ff-footer a {
	color: rgba(248, 241, 228, 0.78);
	text-decoration: none;
	transition: color var(--motion-state) var(--motion-easing);
}
/* .ff-footer a (0,1,1) otherwise beats .ff-btn--telegram/whatsapp's color:white (0,1,0) by
   specificity, translating to translucent cream text on a teal or green button background,
   which fails WCAG AA contrast. Buttons always keep the solid white text their variant sets. */
.ff-footer .ff-btn {
	color: var(--color-white);
}
.ff-footer a:hover {
	color: var(--color-white);
}
.ff-footer__band {
	padding: 40px 16px;
	border-bottom: 1px solid rgba(248, 241, 228, 0.14);
}
.ff-footer__band-inner {
	max-width: var(--content-width);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	text-align: center;
}
@media (min-width: 768px) {
	.ff-footer__band-inner {
		flex-direction: row;
		text-align: start;
	}
}
.ff-footer__main {
	padding: 48px 16px;
}
.ff-footer__grid {
	max-width: var(--content-width);
	margin-inline: auto;
	display: grid;
	gap: 40px;
}
@media (min-width: 768px) {
	.ff-footer__grid {
		grid-template-columns: 1.4fr 2fr;
	}
}
.ff-footer__cols {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}
@media (min-width: 640px) {
	.ff-footer__cols {
		grid-template-columns: repeat(4, 1fr);
	}
}
.ff-footer__newsletter form {
	display: flex;
	gap: 8px;
	max-width: 360px;
}
.ff-footer__newsletter input {
	flex: 1;
	height: 44px;
	padding-inline: 12px;
	border-radius: var(--radius-input);
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(248, 241, 228, 0.25);
	color: var(--color-cream);
	outline: none;
	font-size: 15px;
}
.ff-footer__legal {
	padding: 24px 16px;
	border-top: 1px solid rgba(248, 241, 228, 0.14);
	font-size: 13px;
	color: rgba(248, 241, 228, 0.7);
}
.ff-footer__legal-inner {
	max-width: var(--content-width);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ff-footer__legal-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: space-between;
}
@media (min-width: 640px) {
	.ff-footer__legal-row {
		flex-direction: row;
	}
}

/* ============================================================
   Empty / error / loading states
   ============================================================ */
.ff-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	text-align: center;
	padding: 96px 16px;
	max-width: 480px;
	margin-inline: auto;
}
.ff-state__title {
	font-family: var(--font-display);
	font-size: clamp(28px, 23.30px + 1.304vw, 40px);
	color: var(--color-navy);
}
.ff-state__body {
	font-size: 17px;
	color: rgba(23, 55, 94, 0.75);
}

/* Card skeleton grid, used for loading states */
.ff-skeleton-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.ff-skeleton-card {
	border-radius: var(--radius-card);
	border: 2px solid rgba(23, 55, 94, 0.12);
	overflow: hidden;
}
.ff-skeleton-card__media {
	aspect-ratio: 4 / 5;
}
.ff-skeleton-card__line {
	height: 16px;
	margin: 12px 16px;
	border-radius: 4px;
}

/* ============================================================
   Deal card size modifiers
   ============================================================ */
.ff-deal-card--small { max-width: 240px; }
.ff-deal-card--small .ff-deal-card__body { padding: 12px; gap: 4px; }
.ff-deal-card--large { max-width: 420px; }
.ff-deal-card--large .ff-deal-card__body { padding: 24px; gap: 12px; }
.ff-sticker-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* ============================================================
   Freak score badge
   ============================================================ */
.ff-freak-score {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	background: var(--color-white);
	border: 2px solid var(--color-navy);
	font-family: var(--font-display);
	color: var(--color-navy);
}
.ff-freak-score svg { width: 16px; height: 16px; }
.ff-freak-score--sm { font-size: 13px; padding: 2px 8px; }
.ff-freak-score--lg { font-size: 20px; padding: 6px 14px; }

/* ============================================================
   Grids, strips, pagination
   ============================================================ */
.ff-deals-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	padding-block: 24px;
}
.ff-deals-strip {
	padding-block: 24px;
}
.ff-deals-strip__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 16px;
	max-width: 100%;
}
.ff-deals-strip__head h2 {
	max-width: 100%;
	overflow-wrap: break-word;
}
@media (min-width: 640px) {
	.ff-deals-strip__head {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}
}
.ff-deals-strip__count {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	/* Teal on cream measures 4.04:1, below the 4.5:1 AA floor for normal text. Navy passes at
	   10.7:1 and keeps the same live/verified association used elsewhere (verified dot, links). */
	color: var(--color-navy);
}
.ff-deals-strip__scroller,
.ff-collection-row__scroller {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-block: 4px 12px;
}
.ff-deals-strip__scroller > *,
.ff-collection-row__scroller > * {
	flex: 0 0 240px;
	scroll-snap-align: start;
}
.ff-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding-block: 16px 32px;
}
.ff-pagination a,
.ff-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 8px;
	border-radius: var(--radius-input);
	border: 2px solid var(--color-navy);
	text-decoration: none;
	color: var(--color-navy);
}
.ff-pagination .current {
	background: var(--color-navy);
	color: var(--color-cream);
}

/* ============================================================
   Breadcrumbs
   ============================================================ */
.ff-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	font-size: 13px;
	color: rgba(23, 55, 94, 0.82); /* 0.65 measured 4.3:1 on cream, under AA for small text */
}
.ff-breadcrumbs li {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.ff-breadcrumbs a {
	color: inherit;
	text-decoration: underline;
}
.ff-breadcrumbs__sep svg { width: 12px; height: 12px; transform: scaleX(-1); }
html[dir="rtl"] .ff-breadcrumbs__sep svg { transform: none; }

/* ============================================================
   Deal hero / destination hero
   ============================================================ */
.ff-deal-hero,
.ff-dest-hero {
	display: grid;
	gap: 24px;
	padding-block: 24px;
}
@media (min-width: 1024px) {
	.ff-deal-hero,
	.ff-dest-hero {
		grid-template-columns: 1.1fr 0.9fr;
		align-items: start;
	}
}
.ff-deal-hero__media,
.ff-dest-hero__media {
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-card);
	overflow: hidden;
	border: 2px solid var(--color-navy);
	background: var(--color-sand);
}
.ff-deal-hero__media img,
.ff-dest-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ff-deal-hero__price-row {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 16px 0;
	flex-wrap: wrap;
}

/* ============================================================
   Why we love it / what's included / complete your trip
   ============================================================ */
.ff-why,
.ff-included,
.ff-complete-trip {
	padding-block: 24px;
	border-top: var(--divider);
}
.ff-why p {
	font-size: 17px;
	max-width: 65ch;
}
.ff-included__list {
	display: grid;
	gap: 8px;
	margin: 16px 0 0;
}
.ff-included__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	border-radius: var(--radius-input);
	background: var(--color-white);
	border: 1px solid rgba(23, 55, 94, 0.12);
}
.ff-included__row dt {
	font-weight: 500;
	color: rgba(23, 55, 94, 0.7);
}
.ff-included__row dd {
	margin: 0;
	font-weight: 500;
}
.ff-complete-trip__row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

/* ============================================================
   Expired notice
   ============================================================ */
.ff-expired {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 24px;
	margin-block: 16px;
	border-radius: var(--radius-card);
	background: var(--color-cream);
	border: 2px solid var(--color-navy);
}
.ff-expired p {
	margin: 0;
	font-size: 17px;
}

/* ============================================================
   Share row
   ============================================================ */
.ff-share-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding-block: 16px;
}
.ff-share-row__label {
	font-size: 15px;
	color: rgba(23, 55, 94, 0.7);
}

/* ============================================================
   Destination card, magazine card, collection row, couples corner
   ============================================================ */
.ff-dest-card,
.ff-mag-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border-radius: var(--radius-card);
	border: 2px solid var(--color-navy);
	background: var(--color-white);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: transform var(--motion-card) var(--motion-easing), box-shadow var(--motion-card) var(--motion-easing);
}
.ff-dest-card:hover,
.ff-mag-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card-hover);
}
.ff-dest-card__media,
.ff-mag-card__media {
	aspect-ratio: 4 / 3;
	background: var(--color-sand);
}
.ff-dest-card__media img,
.ff-mag-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ff-dest-card__body,
.ff-mag-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px;
}
.ff-dest-card__country {
	font-size: 13px;
	color: rgba(23, 55, 94, 0.82); /* 0.65 measured 4.3:1 on cream, under AA for small text */
}
.ff-mag-card__excerpt {
	font-size: 15px;
	color: rgba(23, 55, 94, 0.75);
}
.ff-mag-card__byline {
	font-size: 13px;
	color: var(--color-navy);
}
.ff-collection-row {
	padding-block: 24px;
	border-top: var(--divider);
}
.ff-collection-row__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}
.ff-couples-corner {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 24px;
	border-radius: var(--radius-card);
	background: var(--color-cream);
	border: 2px solid var(--color-navy);
	margin-block: 24px;
}
.ff-couples-corner__avatar {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid var(--color-navy);
}
.ff-couples-corner__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ff-couples-corner__kicker {
	font-family: var(--font-hand);
	font-size: 20px;
	margin: 0 0 4px;
	color: var(--color-magenta);
}
.ff-couples-corner__text {
	margin: 0;
	font-size: 17px;
}

/* ============================================================
   Filters sheet, sort control
   ============================================================ */
.ff-filters-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.ff-filters-sheet {
	position: fixed;
	inset: 0;
	z-index: 70;
	background: rgba(15, 42, 71, 0.45);
	display: flex;
	align-items: flex-end;
}
.ff-filters-sheet[hidden] { display: none; }
.ff-filters-sheet__panel {
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	background: var(--color-white);
	border-radius: var(--radius-modal) var(--radius-modal) 0 0;
	padding: 24px;
	box-shadow: var(--shadow-modal);
}
@media (min-width: 1024px) {
	.ff-filters-sheet {
		align-items: stretch;
		justify-content: flex-end;
	}
	.ff-filters-sheet__panel {
		width: 360px;
		max-height: none;
		border-radius: var(--radius-modal) 0 0 var(--radius-modal);
	}
}
.ff-filters-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}
.ff-filters-sheet__group {
	border: none;
	padding: 0;
	margin: 0 0 16px;
}
.ff-filters-sheet__group legend {
	font-weight: 500;
	margin-bottom: 8px;
	padding: 0;
}
.ff-sort__select {
	height: 44px;
	padding-inline: 12px;
	border-radius: var(--radius-input);
	border: 2px solid var(--color-navy);
	background: var(--color-white);
	color: var(--color-navy);
	font-family: var(--font-body);
	font-size: 15px;
}

/* ============================================================
   Price calendar
   ============================================================ */
.ff-price-calendar__grid {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	padding-block: 16px;
}
.ff-price-calendar__cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 12px 8px;
	border-radius: var(--radius-input);
	border: 1px solid rgba(23, 55, 94, 0.15);
	background: var(--color-white);
}
.ff-price-calendar__date {
	font-size: 13px;
	color: rgba(23, 55, 94, 0.6);
}

/* ============================================================
   Alerts form / club join
   ============================================================ */
.ff-alerts-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 480px;
	padding: 24px;
	border-radius: var(--radius-card);
	border: 2px solid var(--color-navy);
	background: var(--color-white);
	box-shadow: var(--shadow-card);
}
.ff-alerts-form__notice {
	padding: 12px 16px;
	border-radius: var(--radius-input);
	background: var(--color-cream);
	color: var(--color-navy);
	font-size: 15px;
}
.ff-club-join {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 420px;
}

/* ============================================================
   Legal pages
   ============================================================ */
.ff-legal h2 {
	margin-top: 32px;
}
.ff-legal p,
.ff-legal li {
	font-size: 17px;
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   Link colour, and why it is navy.

   Teal on the cream body measures 4.04 to 1, which is under the 4.5 AA asks for
   anything below 24px, so it failed on every post title and every breadcrumb the
   moment those pages had real content in them. Teal passes on white and at large
   sizes, so it stays for hover and for the places that already measured clear.

   Links carry an underline as well as a colour, because colour alone is not an
   accessible way to say "this is a link".
   --------------------------------------------------------------------------- */
a:where(:not(.ff-btn):not(.ff-chip):not(.ff-tabbar a)) {
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}