@font-face {
	font-family: 'roasterregular';
	src: url('static/assets/fonts/roaster/Roaster.otf') format('opentype'), url('assets/fonts/roaster/Roaster.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* === Root Variables === */
:root {
    --primary-color: #c49c74;
    --secondary-color: #f1dfa6;
    --text-dark: #0a2240;
	--dark-blue: #324350;
	--text-light: #767268;
	--cream-light: #f9f7f4;
	--extra-light: #f0efef;
	--white: #ffffff;
	--max-width: 1200px;
	--swiper-navigation-color: var(--text-dark);
	--swiper-pagination-color: var(--primary-color);
}

/*  || Global Box and Padding Styles */
* { box-sizing: border-box; margin: 0; padding: 0; }

a { text-decoration: none; transition: 0.3s; font-family: 'roasterregular', sans-serif; color: var(--text-dark); }

ul { list-style: none; }

html, body { scroll-behavior: smooth; }

body { font-family: 'roasterregular', sans-serif; background: var(--white); }

img { display: flex; width: 100%; }

/* === Section Headers and Containers === */
.section_container {
	max-width: var(--max-width);
	margin: auto;
	padding: 9rem 1rem 0rem 1rem;
}

.section_header {
	text-align: center;
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--text-dark);
}

.heading_underline {
	display: block;
	width: clamp(90px, 9vw, 140px);
	height: 2px;
	background: rgba(0,0,0,.35);
	margin: 0.35rem auto 1.75rem;
	transition: background .3s;
}

.script_heading:hover + .heading_underline, .overview_title:hover + .heading_underline { background: var(--primary-color); }

.section_description {
	text-align: center;
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--text-light);
	line-height: 1.75rem;
}

/* === Buttons === */
.btn {
	font-family: 'roasterregular', sans-serif;
	font-size: 1rem;
	color: var(--white);
	background-color: var(--primary-color);
	padding: 0.75rem 1.5rem;
	outline: none;
	border: none;
	border-radius: 5px;
	transition: 0.3s;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.btn-outline { 
    background-color: transparent; 
    border: 2px solid var(--text-dark); 
    color: var(--text-dark); 
}

.btn-outline:hover { 
    background-color: var(--primary-color); 
    color: var(--white); 
}

.btn:hover { 
    background-color: var(--extra-light); 
    color: var(--text-dark); 
}

/* === Checkout Page === */
.checkout-page .booking-layout { margin-bottom: 2rem; }

.checkout-page .checkout-header { margin-top: 3rem; }

.checkout-page .checkout-box { padding: 1rem; text-align: center; }

.checkout-page .checkout-title { margin-bottom: 1.5rem; margin-left: 1.5rem; }

.checkout-page .checkout-grid { display: grid; gap: 1rem; }

.checkout-page .checkout-confirm-btn { margin: 1rem 0; }

.checkout-page .checkout-confirm-btn:hover {
	filter: brightness(0.95);
	box-shadow: 0 4px 14px rgba(0,0,0,0.08);
	transform: translateY(-1px);
	transition: filter .2s ease, box-shadow .2s ease, transform .2s ease;
}

.disclaimer-tag {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .5rem;
	color: var(--text-light);
	font-weight: 200;
	font-size: .8rem; 
	margin-top: .5rem;
}

.checkout-page .checkout-grid input, .checkout-page .checkout-grid select, .checkout-page .checkout-grid textarea {
	width: min(540px, 92%);
	margin: 0 auto;
	min-height: 2.8rem;
	padding: .9rem 1rem;
	border: 1px solid rgba(0,0,0,.15);
	border-radius: .35rem;
	background: var(--white);
	color: var(--text-dark);
	font-weight: 600;
	font-size: 1rem;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.checkout-page .checkout-grid textarea { min-height: 120px; resize: vertical; }

.checkout-page .checkout-grid label {
	width: min(540px, 92%);
	margin: 0 auto .25rem;
	text-align: left;
	font-weight: 700;
	color: var(--text-dark);
}

.checkout-page .checkout-grid input:focus, .checkout-page .checkout-grid select:focus, .checkout-page .checkout-grid textarea:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(196, 156, 116, 0.25);
}

.checkout-page .checkout-grid ::placeholder { color: var(--text-light); }

@media (max-width: 420px) { .checkout-page .checkout-grid input, .checkout-page .checkout-grid select, .checkout-page .checkout-grid textarea, .checkout-page .checkout-grid label { width: 100%; } }