/* Marabu Brand Styles */
/** biome-ignore-all lint/style/noDescendingSpecificity: youre wrong */

/* CSS Variables - Marabu Brand Colors and Styling */
:root {
	/* Brand Colors */
	--color-primary: #000; /* Primary brand color (black) */
	--color-primary-hover: #414a47; /* Dark gray hover */
	--color-primary-light: #b14f19; /* Accent tone for subtle highlights */
	--color-text-primary: #000;
	--color-text-secondary: #414a47;
	--color-text-muted: #414a47;
	--color-text-faded: #666;

	/* Background Colors */
	--color-background: #f4f1eb; /* Main page background */
	--color-background-white: #ffffff;

	/* Border Colors */
	--color-border: #d9d6d0; /* Soft neutral border */
	--color-border-light: #e6e3dd;
	--color-border-section: #d9d6d0;

	/* Functional / Accent Colors */
	--color-info: #f4f1eb;
	--color-info-text: #414a47;
	--color-info-border: #b14f19; /* Use accent for info emphasis */
	--color-success: #2e7d32; /* Keeping generic success green */
	--color-success-bg: #edf7ee;
	--color-success-text: #1b5e20;
	--color-error: #b00020;
	--color-error-bg: #fce8ea;
	--color-error-text: #780014;
	--color-error-border: rgba(176, 0, 32, 0.18);
	--color-error-bg-light: rgba(176, 0, 32, 0.06);
	--color-warning: #d35c1a; /* Warm warning tone from accent family */
	--color-warning-text: #7a330d;

	/* Accent Palette */
	--color03: #b14f19; /* Primary accent (provided) */
	--color03hover: #d35c1a; /* Hover accent (provided) */
	--color01: #f4f1eb; /* Neutral background */
	--color02: #414a47; /* Dark supportive */
	--color-white: #ffffff;
	--color-black: #000000;

	/* Radii (match Jetstar) */
	--radius-sm: 8px;
	--radius-md: 8px;
	--radius-lg: 16px;
	--radius-button: 9999px; /* Pill buttons */
}

/* Body and Typography */
body {
	font-weight: 400;
	font-optical-sizing: auto;
	color: var(--color-text-primary);
	background-color: var(--color-background);
}

/* Header */
header {
	background-color: var(--color-background-white);
	box-shadow: rgba(0, 0, 0, 0.03) 0px 5px 20px 0px;
	border-bottom: none;
	border-radius: 80px;
	margin: 40px 30px;
	height: 80px;
}

.logo a {
	color: var(--color-text-primary);
	padding: 24px 0;
}

.logo img {
	max-width: 120px;
}

/* Navigation */
nav a {
	color: var(--color-text-secondary);
	text-transform: uppercase;
	font-weight: 700;
	font-size: 13px;
	display: flex;
	gap: 8px;
	align-items: center;
}

nav a:hover {
	opacity: 0.7;
	text-decoration: none;
}

/* Links */
a {
	color: var(--color-primary);
}

a:hover {
	text-decoration: underline;
	color: var(--color-primary-hover);
}

header .container {
	padding: 0 50px;
	max-width: none;
}

/* Breadcrumbs */

.breadcrumbs {
    display: none;
}

.breadcrumbs a {
	color: var(--color-text-secondary);
    text-transform: none;
    font-weight: 400;
    display: block;
}
.breadcrumbs a:hover {
	color: var(--color-text-primary);
}
.breadcrumbs li[aria-current="page"] {
	color: var(--color-text-primary);
}

/* Section cards */
section {
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	background: var(--color-background-white);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
}

/* Progress bar */
.progress-bar::before {
	background-color: var(--color03);
}
.step-icon {
	border-color: var(--color03);
	background-color: var(--color-background-white);
}
.step.active .step-icon {
	background-color: var(--color03);
}
.step.active .step-icon::after {
	background-color: var(--color-background-white);
}
.step.completed .step-icon {
	background-color: var(--color03);
	border-color: var(--color03);
}
.step.completed .step-icon::before {
	color: var(--color-white);
}
.step.active .step-title {
	color: var(--color03);
}
.step-title {
	color: var(--color-text-primary);
}
.step-description {
	color: var(--color-text-secondary);
}

/* Form fields */
.form-field label {
	color: var(--color-text-primary);
}
.form-note {
	background: var(--color-info);
	color: var(--color-info-text);
}
.form-note.success {
	border-left-color: var(--color-success);
	background: var(--color-success-bg);
	color: var(--color-success-text);
}

/* Input fields */
.booking-input {
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	background: #f7f6f3;
}
.booking-input:hover,
.booking-input:focus {
	border-color: var(--color03);
	background-color: var(--color-background-white);
}
.booking-input.error {
	border-color: var(--color-error);
	background: var(--color-error-bg);
}

/* Radio buttons */
.form-field .radio-label {
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	background: #f7f6f3;
}
.radio-label::before {
	border-color: var(--color-border);
	background: var(--color-background-white);
}
.radio-label::after {
	background: var(--color03);
}
.radio-option-wrapper .radio-label:hover {
	border-color: var(--color03);
}
.radio-option-wrapper .radio-label:hover::before {
	border-color: var(--color03);
}
.radio-option-wrapper input[type="radio"]:checked + .radio-label {
	border-color: var(--color03);
	background-color: var(--color-background-white);
}
.radio-option-wrapper input[type="radio"]:checked + .radio-label::before {
	border-color: var(--color03);
}
.radio-option-wrapper input[type="radio"]:focus-visible + .radio-label {
	outline-color: var(--color03);
}
.radio-option-wrapper input[type="radio"]:disabled + .radio-label:hover {
	border-color: var(--color-border);
}
.radio-option-wrapper
	input[type="radio"]:disabled
	+ .radio-label:hover::before {
	border-color: var(--color-border);
}

/* Buttons */
.booking-btn {
	border-radius: var(--radius-button);
	background: rgba(0, 0, 0, 0.75);
	color: var(--color-white);
}
.booking-btn:hover {
	background: var(--color-primary-hover);
	color: var(--color-white);
}
.booking-btn--active {
	background: var(--color-primary);
}
.booking-btn--loading {
	background: rgba(0, 0, 0, 0.55);
}
.booking-btn .spinner {
	border-color: var(--color-white);
	border-top-color: transparent;
}

/* Autocomplete */
.autocomplete-list {
	border-color: var(--color-border);
	background: var(--color-background-white);
	border-radius: 0 0 12px 12px;
}
.autocomplete-item:hover,
.autocomplete-item.active {
	background: var(--color-background);
}
.autocomplete-item .label {
	color: var(--color-text-primary);
}
.autocomplete-item .code {
	color: var(--color03);
}

/* FAQ */
.faq-item {
	border-radius: var(--radius-sm);
	border-color: var(--color-border);
	background: var(--color-background-white);
}
.faq-toggle:hover {
	background-color: var(--color-background);
}

/* Textarea */
textarea,
textarea[name="feedback"],
#feedback {
	border-color: var(--color-border);
	background: #f7f6f3;
	border-radius: var(--radius-sm);
}
textarea:focus,
textarea[name="feedback"]:focus,
#feedback:focus {
	border-color: var(--color03);
	background-color: var(--color-background-white);
}
.char-counter {
	color: var(--color-text-secondary);
}

/* Claim summary */
.claim-summary {
	background: var(--color-background);
	border-radius: var(--radius-sm);
}

.claim-reference-box {
    background-color: var(--color-primary-light);
}

/* Flight label styling */
.flight-route-main {
	color: var(--color-text-primary);
}
.flight-details-meta {
	color: var(--color-text-secondary);
}

/* Checkbox items */
.checkbox-item {
	border-color: var(--color-border);
}
.checkbox-item:has(input:checked) {
	border-color: var(--color03);
}
.checkbox-item:hover {
	border-color: var(--color03);
}

/* File Upload */
.file-upload-area {
	border-color: var(--color-border);
	background: var(--color01);
}
.file-upload-area:hover {
	border-color: var(--color03);
	background: var(--color-background-white);
}
.file-upload-area.drag-over {
	border-color: var(--color03);
	background: var(--color01);
}
.file-upload-icon {
	color: var(--color02);
}
.file-upload-btn {
	background: var(--color-primary);
}
.file-upload-btn:hover {
	background: var(--color02);
}
.file-list li {
	border-color: var(--color-border);
	background: var(--color-background-white);
}
.file-list li:hover {
	border-color: var(--color03);
}
.file-icon {
	color: var(--color03);
}
.file-remove:hover {
	background: var(--color-error-bg);
	color: var(--color-error);
}
/* Disabled passenger item styling and status tag */
.checkbox-item.checkbox-item--disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.checkbox-item.checkbox-item--disabled:hover {
	border-color: var(--color-border);
}

.checkbox-item.checkbox-item--disabled::before {
	border-color: var(--color-border);
	background-color: var(--color01);
}

/* Right-side pill tag displayed in checkbox item */
.checkbox-item .status-tag {
	margin-left: auto;
	align-self: center;
	font-size: var(--font-size-sm);
	color: var(--color-info-text);
	background: var(--color-info);
	border: 1px solid var(--color-info-border);
	border-radius: var(--radius-button);
	padding: 2px 8px;
	white-space: nowrap;
}

/* Claimed tag variant */
.checkbox-item .status-tag.status-tag--claimed {
	color: var(--color02);
	border-color: var(--color03);
}