:root {
	--primary: #173b67;
	--primary-dark: #102d50;
	--primary-light: #eaf2fb;

	--accent: #2f7fd3;

	--background: #f6f8fb;
	--surface: #ffffff;

	--text: #18212f;
	--muted: #687386;

	--border: #e1e7ef;

	--success: #127a52;
	--danger: #b42318;

	--shadow:
		0 18px 50px rgba(23, 59, 103, 0.10);

	--radius-large: 24px;
	--radius-medium: 16px;
	--radius-small: 10px;

	--container: 1180px;
}


* {
	box-sizing: border-box;
}


html {
	scroll-behavior: smooth;
}


body {
	margin: 0;

	font-family:
		Inter,
		"Segoe UI",
		Arial,
		sans-serif;

	color: var(--text);

	background: var(--background);

	line-height: 1.6;
}


a {
	color: inherit;
	text-decoration: none;
}


button,
input,
select,
textarea {
	font: inherit;
}


.container {
	width: min(
		calc(100% - 40px),
		var(--container)
	);

	margin-inline: auto;
}


.hidden {
	display: none !important;
}



/* =====================================================
   HEADER
   ===================================================== */


.site-header {
	position: sticky;
	top: 0;
	z-index: 100;

	background:
		rgba(255, 255, 255, 0.94);

	backdrop-filter:
		blur(14px);

	border-bottom:
		1px solid rgba(225, 231, 239, 0.9);
}


.header-inner {
	min-height: 78px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 30px;
}


.brand {
	display: flex;
	align-items: center;

	gap: 13px;
}


.brand-mark {
	width: 46px;
	height: 46px;

	display: grid;
	place-items: center;

	border-radius: 13px;

	color: white;

	font-weight: 800;
	letter-spacing: 0.03em;

	background:
		linear-gradient(
			135deg,
			var(--primary),
			var(--accent)
		);

	box-shadow:
		0 10px 25px
		rgba(23, 59, 103, 0.20);
}


.brand-name {
	font-weight: 800;

	font-size: 1.05rem;

	line-height: 1.2;
}


.brand-subtitle {
	color: var(--muted);

	font-size: 0.82rem;

	margin-top: 2px;
}


.header-nav {
	display: flex;
	align-items: center;

	gap: 28px;

	font-size: 0.94rem;

	font-weight: 600;
}


.header-nav > a:not(.nav-book-button) {
	color: #455164;
}


.header-nav > a:not(.nav-book-button):hover {
	color: var(--primary);
}


.nav-book-button {
	padding: 11px 18px;

	border-radius: 10px;

	color: white;

	background: var(--primary);
}


.nav-book-button:hover {
	background: var(--primary-dark);
}



/* =====================================================
   HERO
   ===================================================== */


.hero {
	padding:
		85px 0 75px;

	background:
		radial-gradient(
			circle at 88% 15%,
			rgba(47, 127, 211, 0.14),
			transparent 34%
		),
		linear-gradient(
			180deg,
			#ffffff,
			#f5f8fc
		);
}


.hero-grid {
	display: grid;

	grid-template-columns:
		minmax(0, 1.35fr)
		minmax(330px, 0.65fr);

	gap: 70px;

	align-items: center;
}


.eyebrow {
	color: var(--accent);

	font-size: 0.78rem;

	font-weight: 800;

	letter-spacing: 0.14em;

	text-transform: uppercase;

	margin-bottom: 12px;
}


.hero h1 {
	margin:
		0 0 22px;

	font-size:
		clamp(
			2.65rem,
			6vw,
			4.7rem
		);

	line-height: 1.02;

	letter-spacing: -0.045em;

	max-width: 760px;
}


.hero-description {
	max-width: 680px;

	color: var(--muted);

	font-size: 1.15rem;

	margin-bottom: 30px;
}


.hero-actions {
	display: flex;

	flex-wrap: wrap;

	gap: 12px;

	margin-bottom: 32px;
}


.primary-button,
.secondary-button {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-height: 48px;

	padding:
		0 22px;

	border-radius: 11px;

	font-weight: 700;

	transition:
		transform 0.15s ease,
		box-shadow 0.15s ease,
		background 0.15s ease;
}


.primary-button {
	color: white;

	background:
		linear-gradient(
			135deg,
			var(--primary),
			var(--accent)
		);

	box-shadow:
		0 10px 24px
		rgba(23, 59, 103, 0.16);
}


.primary-button:hover {
	transform: translateY(-1px);

	box-shadow:
		0 13px 30px
		rgba(23, 59, 103, 0.22);
}


.secondary-button {
	background: white;

	color: var(--primary);

	border:
		1px solid var(--border);
}


.secondary-button:hover {
	background: var(--primary-light);
}


.button-reset {
	border: 0;

	cursor: pointer;

	margin-top: 18px;
}

.payment-secure-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 54px;

    margin-top: 22px;
    padding: 0 24px;

    border: 0;
    border-radius: 11px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--accent)
        );

    box-shadow:
        0 10px 24px
        rgba(23, 59, 103, 0.18);

    font: inherit;
    font-size: 1rem;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        opacity 0.15s ease;
}

.payment-secure-button:hover:not(:disabled) {
    transform: translateY(-1px);

    box-shadow:
        0 13px 30px
        rgba(23, 59, 103, 0.24);
}

.payment-secure-button:active:not(:disabled) {
    transform: translateY(0);
}

.payment-secure-button:disabled {
    opacity: 0.6;
    cursor: wait;
}


.hero-features {
	display: flex;

	flex-wrap: wrap;

	gap:
		10px 22px;

	color: #4c596c;

	font-size: 0.9rem;
}


.hero-feature {
	display: flex;

	align-items: center;

	gap: 7px;
}


.feature-icon {
	color: var(--success);

	font-weight: 900;
}


.hero-card {
	background:
		linear-gradient(
			155deg,
			var(--primary-dark),
			var(--primary)
		);

	color: white;

	padding:
		35px;

	border-radius:
		var(--radius-large);

	box-shadow:
		0 30px 70px
		rgba(16, 45, 80, 0.25);
}


.hero-card-label {
	color:
		rgba(255, 255, 255, 0.66);

	font-size: 0.78rem;

	text-transform: uppercase;

	letter-spacing: 0.12em;

	font-weight: 700;
}


.hero-card-title {
	font-size: 1.75rem;

	font-weight: 800;

	margin:
		4px 0 27px;
}


.hero-card-step {
	display: grid;

	grid-template-columns:
		42px 1fr;

	gap: 14px;

	padding:
		17px 0;

	border-top:
		1px solid
		rgba(255, 255, 255, 0.12);
}


.hero-card-step > span {
	width: 34px;
	height: 34px;

	display: grid;
	place-items: center;

	border-radius: 50%;

	background:
		rgba(255, 255, 255, 0.12);

	font-weight: 800;
}


.hero-card-step strong {
	display: block;

	margin-bottom: 3px;
}


.hero-card-step p {
	margin: 0;

	color:
		rgba(255, 255, 255, 0.66);

	font-size: 0.9rem;
}



/* =====================================================
   SECTIONS
   ===================================================== */


.rooms-section,
.hours-section {
	padding:
		85px 0;
}


.rooms-section {
	background: white;
}


.hours-section {
	background:
		#f3f6fa;
}


.section-heading {
	display: flex;

	justify-content: space-between;

	align-items: end;

	gap: 30px;

	margin-bottom: 36px;
}


.section-heading h2 {
	font-size:
		clamp(
			2rem,
			4vw,
			3rem
		);

	margin:
		0 0 7px;

	letter-spacing: -0.035em;
}


.section-heading p {
	margin: 0;

	color: var(--muted);

	font-size: 1.02rem;
}



/* =====================================================
   ROOM CARDS
   ===================================================== */


.rooms-grid {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 24px;
}


.room-card {
	display: flex;

	flex-direction: column;

	background: var(--surface);

	border:
		1px solid var(--border);

	border-radius:
		var(--radius-medium);

	overflow: hidden;

	box-shadow:
		0 7px 25px
		rgba(18, 40, 70, 0.055);

	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		border 0.18s ease;
}


.room-card:hover {
	transform:
		translateY(-4px);

	box-shadow:
		var(--shadow);

	border-color:
		rgba(47, 127, 211, 0.35);
}


.room-image {
	height: 185px;

	display: flex;
	align-items: end;

	padding: 20px;

	background:
		linear-gradient(
			135deg,
			var(--primary-dark),
			var(--accent)
		);

	color: white;

	position: relative;

	overflow: hidden;
}


.room-image::after {
	content: "";

	position: absolute;

	width: 170px;
	height: 170px;

	border-radius: 50%;

	right: -40px;
	top: -55px;

	background:
		rgba(255, 255, 255, 0.08);
}


.room-number {
	position: relative;
	z-index: 2;

	font-size: 1.8rem;
	font-weight: 800;
}


.room-body {
	padding: 24px;

	flex: 1;

	display: flex;

	flex-direction: column;
}


.room-meta {
	display: flex;

	gap: 8px;

	flex-wrap: wrap;

	margin-bottom: 15px;
}


.meta-pill {
	background:
		var(--primary-light);

	color: var(--primary);

	padding:
		6px 10px;

	border-radius:
		100px;

	font-size: 0.79rem;

	font-weight: 700;
}


.room-body h3 {
	font-size: 1.45rem;

	margin:
		0 0 8px;
}


.room-description {
	color: var(--muted);

	margin:
		0 0 22px;

	font-size: 0.94rem;

	min-height: 68px;
}


.room-pricing {
	display: flex;

	align-items: end;

	justify-content: space-between;

	gap: 16px;

	margin-top: auto;

	padding-top: 19px;

	border-top:
		1px solid var(--border);
}


.room-price-main {
	font-size: 1.6rem;

	font-weight: 800;

	color: var(--primary);
}


.room-price-main small {
	font-size: 0.8rem;

	font-weight: 600;

	color: var(--muted);
}


.room-price-gst {
	color: var(--muted);

	font-size: 0.78rem;

	margin-top: 2px;
}


.book-room-button {
	margin-top: 20px;

	width: 100%;

	min-height: 48px;

	border: none;

	border-radius: 10px;

	cursor: pointer;

	background: var(--primary);

	color: white;

	font-weight: 750;
}


.book-room-button:hover {
	background:
		var(--primary-dark);
}



/* =====================================================
   SELECTED ROOM
   ===================================================== */


.selected-room-section {
	padding:
		65px 0;

	background:
		var(--primary-dark);
}


.selected-room-card {
	display: grid;

	grid-template-columns:
		1fr auto;

	gap: 60px;

	align-items: center;

	color: white;
}


.selected-room-card h2 {
	margin:
		0 0 6px;

	font-size: 2.25rem;
}


.selected-room-card p {
	color:
		rgba(255,255,255,0.72);
}


.selection-next {
	min-width: 300px;
}


.selection-next > p {
	margin:
		0 0 3px;

	font-size: 0.8rem;

	text-transform: uppercase;

	letter-spacing: 0.1em;
}



/* =====================================================
   BUSINESS HOURS
   ===================================================== */


.hours-grid {
	display: grid;

	grid-template-columns:
		repeat(7, 1fr);

	gap: 11px;
}


.hours-card {
	background: white;

	border:
		1px solid var(--border);

	border-radius:
		12px;

	padding:
		19px 14px;

	text-align: center;
}


.hours-day {
	font-weight: 800;

	font-size: 0.89rem;

	margin-bottom: 7px;
}


.hours-time {
	color: var(--muted);

	font-size: 0.82rem;
}


.hours-card.closed {
	background:
		#f8f9fb;

	color:
		#7e8795;
}



/* =====================================================
   UTILITY
   ===================================================== */


.loading-box,
.error-box {
	padding: 30px;

	border-radius:
		var(--radius-medium);

	text-align: center;
}


.loading-box {
	background:
		#f5f8fc;

	color:
		var(--muted);
}


.error-box {
	background:
		#fff2f0;

	color:
		var(--danger);

	border:
		1px solid
		#ffd5d0;
}



/* =====================================================
   FOOTER
   ===================================================== */


.site-footer {
	background:
		#0e223b;

	color: white;

	padding:
		34px 0;
}


.footer-inner {
	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 30px;
}


.site-footer p {
	margin:
		3px 0 0;

	color:
		rgba(255,255,255,0.58);

	font-size: 0.85rem;
}


.footer-powered {
	color:
		rgba(255,255,255,0.58);

	font-size: 0.84rem;
}



/* =====================================================
   TOAST
   ===================================================== */


.toast {
	position: fixed;

	right: 24px;
	bottom: 24px;

	z-index: 200;

	width: min(
		calc(100% - 48px),
		390px
	);

	padding:
		18px 20px;

	border-radius: 13px;

	background:
		#102d50;

	color: white;

	box-shadow:
		0 22px 60px
		rgba(0,0,0,0.22);
}


.toast-title {
	font-weight: 800;

	margin-bottom: 4px;
}


.toast-message {
	color:
		rgba(255,255,255,0.73);

	font-size: 0.88rem;
}


/* =====================================================
   BOOKING PANEL
   ===================================================== */

.booking-section {
	padding: 70px 0;
	background: var(--primary-dark);
}

.booking-panel {
	display: grid;
	grid-template-columns: 0.7fr 1.3fr;
	gap: 55px;
	align-items: start;
}

.booking-room-summary {
	color: white;
	position: sticky;
	top: 110px;
}

.booking-room-summary h2 {
	font-size: 2.4rem;
	margin: 0 0 8px;
}

.booking-room-summary p {
	color: rgba(255, 255, 255, 0.7);
}

.booking-form {
	background: white;
	border-radius: var(--radius-large);
	padding: 34px;
	box-shadow: var(--shadow);
}

.booking-field {
	margin-bottom: 28px;
}

.booking-field label {
	display: block;
	font-weight: 800;
	margin-bottom: 10px;
}

.booking-field input[type="date"] {
	width: 100%;
	min-height: 50px;
	padding: 0 14px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: white;
	color: var(--text);
}

.time-slots,
.duration-options {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.time-slot,
.duration-button {
	min-height: 46px;
	border: 1px solid var(--border);
	border-radius: 9px;
	background: white;
	cursor: pointer;
	font-weight: 700;
	color: var(--primary);
}

.time-slot:hover,
.duration-button:hover {
	border-color: var(--accent);
	background: var(--primary-light);
}

.time-slot.selected,
.duration-button.selected {
	background: var(--primary);
	border-color: var(--primary);
	color: white;
}

.time-slot:disabled {
	cursor: not-allowed;
	background: #f0f2f5;
	color: #9ba3af;
	border-color: #e3e7ec;
}

.booking-message {
	padding: 15px 17px;
	border-radius: 10px;
	margin-bottom: 20px;
	background: #f3f7fb;
	color: var(--muted);
}

.booking-message.warning {
	background: #fff7e7;
	color: #825400;
}

.booking-price-summary {
	border-top: 1px solid var(--border);
	padding-top: 22px;
}

.summary-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 7px 0;
}

.summary-row.total {
	font-size: 1.2rem;
	padding-top: 13px;
	margin-top: 7px;
	border-top: 1px solid var(--border);
}

.summary-time {
	margin: 17px 0 2px;
	padding: 14px;
	border-radius: 10px;
	background: var(--primary-light);
	color: var(--primary);
	font-weight: 700;
}

#continueBookingButton:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

@media (max-width: 850px) {
	.booking-panel {
		grid-template-columns: 1fr;
	}

	.booking-room-summary {
		position: static;
	}
}

@media (max-width: 600px) {
	.time-slots,
	.duration-options {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* =====================================================
   CUSTOMER DETAILS / BOOKING HOLD
   ===================================================== */

.customer-details-panel {
	margin-top: 28px;
	padding-top: 28px;
	border-top: 1px solid var(--border);
}

.customer-details-heading h3 {
	margin: 0 0 7px;
	font-size: 1.5rem;
}

.customer-details-heading p {
	margin: 0 0 25px;
	color: var(--muted);
}

.customer-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 18px;
}

.customer-fields .booking-field:last-child {
	grid-column: 1 / -1;
}

.customer-fields input {
	width: 100%;
	min-height: 50px;
	padding: 0 14px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: white;
	color: var(--text);
}

.customer-fields input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(47, 127, 211, 0.12);
}

.terms-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 5px 0 20px;
	color: #4d5969;
	font-size: 0.92rem;
	cursor: pointer;
}

.terms-checkbox input {
	width: 18px;
	height: 18px;
	margin-top: 2px;
}

.booking-submit-error {
	margin: 0 0 17px;
	padding: 13px 15px;
	border-radius: 9px;
	color: #9f241b;
	background: #fff1ef;
	border: 1px solid #ffd4cf;
}

.booking-hold-success {
	margin-top: 28px;
	padding: 30px;
	border-radius: 16px;
	background: #f5f9fd;
	border: 1px solid #d8e6f5;
	text-align: center;
}

.hold-success-icon {
	width: 54px;
	height: 54px;
	display: grid;
	place-items: center;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: #127a52;
	color: white;
	font-size: 1.65rem;
	font-weight: 900;
}

.hold-success-icon.payment-warning-icon {
    background: #fff3d6;
    color: #9a6700;
}

.booking-hold-success h3 {
	margin: 2px 0 7px;
	font-size: 1.65rem;
}

.booking-hold-success > p {
	margin: 0 auto 24px;
	max-width: 520px;
	color: var(--muted);
}

.confirmation-section-title {
    margin-top: 26px;
    margin-bottom: 10px;

    color: var(--primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.1em;
    text-transform: uppercase;

    text-align: left;
}

.confirmation-details {
    overflow: hidden;

    border:
        1px solid var(--border);

    border-radius: 12px;

    background: #ffffff;

    text-align: left;
}

.confirmation-row {
    display: grid;

    grid-template-columns:
        minmax(140px, 0.8fr)
        minmax(0, 1.2fr);

    align-items: center;

    gap: 20px;

    padding: 14px 18px;

    border-bottom:
        1px solid var(--border);
}

.confirmation-row:last-child {
    border-bottom: 0;
}

.confirmation-row span {
    color: var(--muted);

    font-size: 0.92rem;
}

.confirmation-row strong {
    min-width: 0;

    color: var(--text);

    font-size: 0.95rem;
    font-weight: 750;

    text-align: right;

    overflow-wrap: anywhere;
}

.confirmation-total {
    background:
        var(--primary-light);
}

.confirmation-total span,
.confirmation-total strong {
    color: var(--primary);

    font-weight: 800;
}

.payment-status-paid {
    display: inline-flex;

    justify-self: end;

    align-items: center;
    justify-content: center;

    min-width: 72px;

    padding: 6px 12px;

    border-radius: 999px;

    background: #e8f7f0;
    color: #127a52 !important;

    font-size: 0.78rem !important;
    font-weight: 900 !important;

    letter-spacing: 0.06em;
}

.booking-hold-success .confirmation-details + .confirmation-section-title {
    margin-top: 28px;
}

@media (max-width: 650px) {
    .confirmation-row {
        grid-template-columns: 1fr;

        gap: 5px;

        padding: 13px 15px;
    }

    .confirmation-row strong {
        text-align: left;
    }

    .payment-status-paid {
        justify-self: start;
    }
}

.hold-reference,
.hold-price {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 13px 0;
	border-top: 1px solid var(--border);
}

.hold-reference span,
.hold-price span {
	color: var(--muted);
}

.hold-timer-box {
	margin: 20px 0;
	padding: 20px;
	border-radius: 12px;
	background: var(--primary);
	color: white;
}

.hold-timer-box span {
	display: block;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.7;
}

.hold-timer-box strong {
	display: block;
	margin-top: 3px;
	font-size: 2.2rem;
	line-height: 1.1;
}

}


#reserveBookingButton[disabled] {
	opacity: 0.55;
	cursor: wait;
}

@media (max-width: 650px) {
	.customer-fields {
		grid-template-columns: 1fr;
	}

	.customer-fields .booking-field:last-child {
		grid-column: auto;
	}
}

/* =====================================================
   RESPONSIVE
   ===================================================== */


@media (max-width: 950px) {

	.hero-grid {
		grid-template-columns: 1fr;

		gap: 45px;
	}


	.rooms-grid {
		grid-template-columns:
			repeat(2, 1fr);
	}


	.hours-grid {
		grid-template-columns:
			repeat(4, 1fr);
	}


	.selected-room-card {
		grid-template-columns: 1fr;
		gap: 25px;
	}

}


@media (max-width: 680px) {

	.container {
		width:
			min(
				calc(100% - 28px),
				var(--container)
			);
	}


	.header-inner {
		min-height: 70px;
	}


	.header-nav > a:not(.nav-book-button) {
		display: none;
	}


	.brand-name {
		font-size: 0.95rem;
	}


	.hero {
		padding:
			55px 0;
	}


	.hero-grid {
		gap: 35px;
	}


	.hero-card {
		padding: 25px;
	}


	.rooms-section,
	.hours-section {
		padding:
			60px 0;
	}


	.rooms-grid {
		grid-template-columns:
			1fr;
	}


	.hours-grid {
		grid-template-columns:
			repeat(2, 1fr);
	}


	.footer-inner {
		align-items: flex-start;

		flex-direction: column;

		gap: 15px;
	}

}