/*
Theme Name: WP Agent Flatsome Child
Description: Child theme of Flatsome for DOL Phu Quoc Resort, built by WP Agent from the approved design.
Author: WP Agent
Template: flatsome
Version: 1.2.0
Requires PHP: 7.4
Text Domain: wpagent-child
*/

/*
 * Shared styles: design tokens, Flatsome resets, buttons, header, off-canvas menu,
 * booking bar, forms, footer, mobile bar. A page's own sections live in assets/pages/<slug>.css.
 * Breakpoints of the design: 1200 / 1024 / 767 (Flatsome's mobile header starts at 849).
 */

:root {
	--teal: #2E8585;
	--teal-d: #157171;
	--gold: #B46C24;
	--gold-d: #A0601B;
	--mist: #E1F0F0;
	--night: #073234;
	--ink: #1c2a2a;
	--muted: #566767;
	--line: #d3e2e2;
	--serif: "Playfair Display", Georgia, serif;
	--sans: "Be Vietnam Pro", Arial, sans-serif;
	--wrap: 1240px;
	--breeze: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='40'%3E%3Crect x='5' y='5' width='46' height='30' fill='none' stroke='%232E8585' stroke-opacity='.13' stroke-width='2'/%3E%3Crect x='14' y='12' width='28' height='16' fill='none' stroke='%232E8585' stroke-opacity='.10' stroke-width='2'/%3E%3C/svg%3E");
	--breeze-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='40'%3E%3Crect x='5' y='5' width='46' height='30' fill='none' stroke='%23E1F0F0' stroke-opacity='.16' stroke-width='2'/%3E%3Crect x='14' y='12' width='28' height='16' fill='none' stroke='%23E1F0F0' stroke-opacity='.12' stroke-width='2'/%3E%3C/svg%3E");
}

/* ---------- base (over Flatsome) ---------- */
html { scroll-behavior: smooth; }
body {
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.75;
	font-weight: 300;
	color: var(--ink);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}
#wrapper, #main { background-color: #fff; }
a { color: var(--teal-d); }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--serif);
	font-weight: 400;
	line-height: 1.2;
	margin: 0 0 .5em;
	color: var(--ink);
	letter-spacing: 0;
}
h1 { font-size: clamp(34px, 4.4vw, 58px); }
h2 { font-size: clamp(30px, 3.4vw, 46px); }
h3 { font-size: clamp(22px, 2vw, 28px); }
p { margin: 0 0 1.1em; }
p:empty { display: none; }
strong, b { font-weight: 600; }
.dark, .dark p, .dark td { color: rgba(255, 255, 255, .78); }
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { color: #fff; }

/* ---------- shared pieces of the design ---------- */
.eyebrow:not(.text),
.text.eyebrow p {
	display: inline-block;
	font-family: var(--sans);
	font-size: 12px;
	line-height: 1.75;
	letter-spacing: .24em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--teal-d);
	margin-bottom: 18px;
}
.text.eyebrow p { margin-bottom: 0; }
.eyebrow:not(.text)::before,
.text.eyebrow p::before {
	content: "";
	display: inline-block;
	width: 32px;
	height: 1px;
	background: var(--gold);
	vertical-align: middle;
	margin-right: 14px;
}
.breeze { background-color: var(--mist); background-image: var(--breeze); }
.breeze > .section-bg { background-image: var(--breeze); }
.breeze-dark { background-image: var(--breeze-dark); }
.muted, .muted p { color: var(--muted); }

/* Buttons: primary is-outline = .btn (teal), secondary = .btn-gold, white is-outline = .btn-light, is-link = .link-arrow */
.button,
input[type="submit"].button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 30px;
	border: 1px solid var(--teal-d);
	border-radius: 0;
	font: 500 13px/1 var(--sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--teal-d);
	background-color: transparent;
	box-shadow: none;
	transition: background-color .25s, color .25s, border-color .25s;
}
.button span { line-height: 1; }
.button:hover { box-shadow: none; outline: 0; }
.button.primary.is-outline,
.button.is-outline:not(.white):not(.secondary) {
	border: 1px solid var(--teal-d);
	color: var(--teal-d);
	background-color: transparent;
}
.button.primary.is-outline:hover,
.button.is-outline:not(.white):not(.secondary):hover { background-color: var(--teal-d); border-color: var(--teal-d); color: #fff; }
.button.primary:not(.is-outline) { background-color: var(--teal-d); border-color: var(--teal-d); color: #fff; }
.button.primary:not(.is-outline):hover { background-color: var(--night); border-color: var(--night); }
.button.secondary:not(.is-outline),
input[type="submit"].button.secondary {
	background-color: var(--gold-d);
	border-color: var(--gold-d);
	color: #fff;
}
.button.secondary:not(.is-outline):hover,
input[type="submit"].button.secondary:hover { background-color: #87500f; border-color: #87500f; color: #fff; }
.button.white.is-outline { border: 1px solid #fff; color: #fff; background-color: transparent; }
.button.white.is-outline:hover { background-color: #fff; color: var(--night); }
.button.is-link,
.link-arrow {
	display: inline-block;
	min-height: 0;
	padding: 0 0 4px !important;
	border: 0 !important;
	border-bottom: 1px solid currentColor !important;
	background: transparent !important;
	font: 500 13px/1.4 var(--sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--teal-d);
}
.button.is-link:hover, .link-arrow:hover { color: var(--gold-d); }

/* ---------- header ---------- */
#header .header-main { height: 108px; background: #fff; }
#header .header-inner {
	max-width: 1400px;
	padding: 0 32px;
}
#header #logo { width: auto; max-width: none; margin: 0 30px; }
#header #logo img { height: 76px; width: auto; max-height: none; }
#header .header-nav-main > li { margin: 0; }
#header .header-nav-main.nav-right { gap: 22px; }

/* menu button (burger + MENU) */
#header .nav-icon > a {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 10px 0;
	font: 500 12px/1 var(--sans);
	letter-spacing: .22em;
	color: var(--ink);
}
#header .nav-icon .icon-menu {
	position: relative;
	display: inline-block;
	width: 26px;
	height: 14px;
	border-top: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	font-size: 0;
	margin: 0;
}
#header .nav-icon .icon-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 6px;
	top: 6px;
	height: 1px;
	background: currentColor;
}
#header .nav-icon .menu-title { margin: 0; font-size: 12px; letter-spacing: .22em; font-weight: 500; color: var(--ink); }

/* language switcher */
.dol-lang { position: relative; font: 500 12px/1 var(--sans); letter-spacing: .18em; }
.dol-lang > button {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 0;
	margin: 0;
	padding: 10px 4px;
	border: 0;
	background: none;
	font: inherit;
	letter-spacing: inherit;
	line-height: 1;
	color: var(--ink);
	text-transform: none;
}
.dol-lang > button::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 1px solid;
	border-bottom: 1px solid;
	transform: rotate(45deg) translateY(-2px);
}
.dol-lang ul {
	display: none;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 50;
	list-style: none;
	margin: 0;
	padding: 8px 0;
	background: #fff;
	border: 1px solid var(--line);
	min-width: 150px;
	box-shadow: 0 10px 30px rgba(7, 50, 52, .12);
	text-align: left;
}
.dol-lang:hover ul, .dol-lang.open ul { display: block; }
.dol-lang li { margin: 0; padding: 9px 16px; font-size: 12px; line-height: 1.4; letter-spacing: .12em; color: var(--muted); white-space: nowrap; }
.dol-lang li b { color: var(--ink); font-weight: 500; }
.dol-lang li small { display: block; font-size: 10px; letter-spacing: .06em; text-transform: none; color: #9aa; font-weight: 300; }

/* Book now */
#header .header-button-1 .header-button { margin: 0; }
#header .header-button-1 .button { min-height: 46px; padding: 0 26px; margin: 0; }

/* main menu row */
#wide-nav.header-bottom {
	min-height: 0;
	background: #fff;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
#wide-nav > .flex-row { max-width: 1400px; padding: 0 32px; }
#wide-nav .header-bottom-nav { gap: 46px; justify-content: center; }
#wide-nav .header-bottom-nav > li { margin: 0; padding: 0; }
#wide-nav .header-bottom-nav > li > a {
	position: relative;
	display: block;
	padding: 17px 0 16px;
	font: 500 12.5px/21.875px var(--sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ink);
}
#wide-nav .header-bottom-nav > li > a::before { display: none; }
#wide-nav .header-bottom-nav > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--gold);
	transform: scaleX(0);
	transition: transform .3s;
}
#wide-nav .header-bottom-nav > li > a:hover::after,
#wide-nav .header-bottom-nav > li.active > a::after,
#wide-nav .header-bottom-nav > li.current-menu-item > a::after { transform: scaleX(1); }

/* ---------- off-canvas menu (Flatsome #main-menu) ---------- */
.mfp-bg.main-menu-overlay.mfp-ready { background-color: var(--night); opacity: .55; }
html .off-canvas-left .mfp-content {
	--drawer-width: min(420px, 88vw);
	width: min(420px, 88vw);
	background-color: var(--night);
}
.off-canvas .mobile-sidebar { background: var(--night); }
.off-canvas .sidebar-menu { padding: 84px 40px 34px; }
.off-canvas .nav-sidebar.nav-vertical > li { border: 0; }
.off-canvas .nav-sidebar.nav-vertical > li.menu-item > a {
	display: block;
	padding: 9px 0;
	border-bottom: 1px solid rgba(225, 240, 240, .12);
	font-family: var(--serif);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
}
.off-canvas .nav-sidebar.nav-vertical > li.menu-item > a:hover { color: #e6b47f; }
.off-canvas .nav-sidebar > li.html { margin-top: 40px; padding: 0; border: 0; }
.dol-oc-meta { font-size: 14px; line-height: 1.75; color: rgba(255, 255, 255, .75); }
.dol-oc-meta p { margin: 0; color: rgba(255, 255, 255, .75); }
.dol-oc-meta .button { margin: 18px 0 0; }
.off-canvas .mfp-close {
	top: 26px;
	left: 40px;
	right: auto;
	width: auto;
	height: auto;
	opacity: 1;
	color: #fff;
	mix-blend-mode: normal;
}

/* ---------- booking bar (home) and booking form ---------- */
.bookbar {
	position: sticky;
	top: 0;
	z-index: 30;
	background: #fff;
	border-bottom: 1px solid var(--line);
	transition: box-shadow .3s;
}
.bookbar.stuck { box-shadow: 0 8px 26px rgba(7, 50, 52, .12); }
.bb-form {
	display: grid;
	grid-template-columns: 1.25fr 1.25fr .7fr .8fr .8fr .8fr 1.1fr auto;
	align-items: stretch;
	margin: 0;
}
.bookbar .bb-form { max-width: 1400px; margin: 0 auto; padding: 0 32px; }
.bb-f {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: 13px 18px 12px;
	border-left: 1px solid var(--line);
}
.bb-f:first-child { border-left: 0; padding-left: 0; }
.bb-f label {
	display: block;
	margin: 0 0 3px;
	font-size: 10.5px;
	line-height: 1.75;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 500;
}
.bb-f input,
.bb-f select {
	width: 100%;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 2px 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background-color: transparent;
	font: 400 15px/1.4 var(--sans);
	color: var(--ink);
	outline: 0;
	-webkit-appearance: none;
	appearance: none;
}
.bb-f select {
	padding-right: 16px;
	cursor: pointer;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23157171'/%3E%3C/svg%3E") right 2px center no-repeat;
}
.bb-f input::placeholder { color: #93a3a3; }
.bb-f input:focus, .bb-f select:focus { box-shadow: none; }
.bb-nights output { font: 400 15px/1.4 var(--sans); }
.bb-go { display: flex; align-items: center; padding-left: 18px; }
.bb-go .button { min-height: 54px; margin: 0; white-space: nowrap; }
.bb-err { grid-column: 1 / -1; display: none; margin: 0; padding: 0 0 10px; color: #a3341f; font-size: 13px; }
.bb-err.show { display: block; }
.bb-mobile { display: none; }
/* the form alone ([dol_booking_form]) */
.dol-booking .res-form {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	grid-template-columns: 1.25fr 1.25fr .6fr .7fr .7fr .7fr 1fr auto;
}

/* ---------- forms (CF7) ---------- */
.wpcf7 form { margin: 0; }
.wpcf7 label { font-weight: 500; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.field label,
.wpcf7 .field label {
	display: block;
	margin: 0;
	font-size: 11px;
	line-height: 1.75;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 500;
}
.field .wpcf7-form-control-wrap { display: block; }
.field input,
.field select,
.field textarea {
	width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 13px 14px;
	border: 1px solid var(--line);
	border-radius: 0;
	box-shadow: none;
	background-color: #fff;
	font: 400 15px/1.5 var(--sans);
	color: var(--ink);
	outline: 0;
}
.field select { padding-right: 34px; background-position: right 12px center; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); box-shadow: none; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 20px; }
.dol-enq-go { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.dol-enq-go .button { margin: 0; }
.wpcf7 .wpcf7-not-valid-tip { margin-top: 4px; font-size: 13px; color: #a3341f; }
.wpcf7 form .wpcf7-response-output { margin: 18px 0 0; padding: 12px 16px; border-width: 1px; font-size: 14px; }

/* ---------- footer (UX block "Footer" + absolute footer) ---------- */
.dol-ftr {
	padding: 0 !important;
	display: block;
	background-color: var(--night);
	color: rgba(255, 255, 255, .78);
	font-size: 14.5px;
	line-height: 1.75;
}
.dol-ftr::before {
	content: "";
	display: block;
	height: 64px;
	background: #0b3f41 var(--breeze-dark);
}
.dol-ftr > .section-content { width: 100%; }
.dol-ftr .dol-ftr-row {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 48px;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 72px 24px 60px;
}
.dol-ftr .dol-ftr-row > .col { max-width: none; flex-basis: auto; width: auto; padding: 0; }
.dol-ftr .dol-ftr-row > .col > .col-inner { padding: 0; }
.dol-ftr .dol-ftr-logo { width: auto !important; margin: 0 0 22px; }
.dol-ftr .dol-ftr-logo .img-inner, .dol-ftr .dol-ftr-logo img { width: auto; height: 96px; }
.dol-ftr p { color: rgba(255, 255, 255, .78); margin: 0 0 1.1em; }
.dol-ftr h4 {
	margin: 6px 0 20px;
	font-family: var(--sans);
	font-size: 11.5px;
	line-height: 1.75;
	letter-spacing: .22em;
	text-transform: uppercase;
	font-weight: 500;
	color: #fff;
}
.dol-ftr ul { list-style: none; margin: 0; padding: 0; }
.dol-ftr ul li { margin: 0 0 9px; padding: 0; color: rgba(255, 255, 255, .78); }
.dol-ftr a { color: rgba(255, 255, 255, .85); }
.dol-ftr a:hover { color: #e6b47f; }

.absolute-footer {
	background-color: var(--night);
	color: rgba(255, 255, 255, .55);
	font-size: 12.5px;
	line-height: 1.75;
	padding: 0;
}
.absolute-footer > .container {
	max-width: var(--wrap);
	padding: 0 24px;
}
.absolute-footer .footer-primary {
	float: none;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	padding: 22px 0 26px;
	border-top: 1px solid rgba(225, 240, 240, .14);
}
.absolute-footer .copyright-footer { padding: 0; color: rgba(255, 255, 255, .55); }
.absolute-footer .footer-nav { margin: 0; text-transform: none; }
.absolute-footer .footer-nav > li { margin: 0; padding: 0; border: 0; }
.absolute-footer .footer-nav > li + li::before { content: "·"; margin: 0 .35em; color: rgba(255, 255, 255, .55); }
.absolute-footer .footer-nav > li > a {
	padding: 0;
	font-size: 12.5px;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 300;
	color: rgba(255, 255, 255, .85);
}
.absolute-footer .footer-nav > li > a:hover { color: #e6b47f; }

/* mobile "Book now" bar */
.mbar { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
	#wide-nav .header-bottom-nav { gap: 28px; }
	.bb-form { grid-template-columns: 1.2fr 1.2fr .6fr .8fr .8fr .8fr 1fr auto; }
	.bookbar .bb-form { padding: 0 20px; }
	.bb-f { padding: 12px; }
}

@media (max-width: 1024px) {
	#header .header-main { height: 84px; }
	#header .header-inner { padding: 0 20px; }
	#header #logo img { height: 58px; }
	#wide-nav.header-bottom { display: none !important; }

	.bookbar { position: relative; }
	.bookbar .bb-form { display: none; }
	.bb-mobile {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		min-height: 0;
		margin: 0;
		padding: 12px 20px;
		border: 0;
		background: #fff;
		font: 400 14px/1.3 var(--sans);
		letter-spacing: 0;
		text-transform: none;
		color: var(--ink);
		text-align: left;
	}
	.bb-mobile small { display: block; margin-bottom: 2px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
	.bb-mobile i { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--gold-d); font-style: normal; }
	.bb-mobile i svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; }
	.bookbar.open .bb-form,
	.dol-booking .res-form { display: grid; grid-template-columns: 1fr 1fr; }
	.bookbar.open .bb-form { padding: 0 20px 18px; border-top: 1px solid var(--line); }
	.bookbar.open .bb-f,
	.dol-booking .bb-f { border-left: 0; padding: 12px 0 10px; border-bottom: 1px solid var(--line); }
	.bookbar.open .bb-f:nth-child(even),
	.dol-booking .bb-f:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
	.bookbar.open .bb-go,
	.dol-booking .bb-go { grid-column: 1 / -1; padding: 16px 0 0; }
	.bookbar.open .bb-go .button,
	.dol-booking .bb-go .button { width: 100%; }
	.dol-booking .res-form { border-bottom: 0; }

	.dol-ftr .dol-ftr-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
	body { font-size: 15.5px; }
	#header .header-main { height: 72px; }
	#header .header-inner { padding: 0 16px; }
	#header #logo { margin: 0 12px; }
	#header #logo img { height: 48px; }
	#header .nav-icon .menu-title { display: none; }
	#header .header-button-1 { display: none; }

	.grid2, .grid3 { grid-template-columns: 1fr; }

	.dol-ftr::before { height: 44px; }
	.dol-ftr .dol-ftr-row { grid-template-columns: 1fr; gap: 34px; padding: 56px 20px 40px; }
	.absolute-footer > .container { padding: 0 20px; }
	.absolute-footer .footer-primary { flex-direction: column-reverse; gap: 8px; }

	.mbar {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 70;
		height: 60px;
		box-shadow: 0 -6px 20px rgba(7, 50, 52, .12);
	}
	.mbar a {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		background: var(--gold-d);
		color: #fff;
		font: 500 12px/1 var(--sans);
		letter-spacing: .18em;
		text-transform: uppercase;
	}
	body:not(.pg-reservation) { padding-bottom: 60px; }
}