/* ==========================================================================
   Arrowwood International — UI refresh layer (loaded last; overrides Bootstrap 3)
   Brand: coastal teal/cyan (holidays by the sea) + warm sand accent for CTAs.
   Goal: cohesive look & feel + full responsiveness, without altering markup.
   ========================================================================== */

:root {
	--brand:        #0E93A8;   /* refined teal-cyan (between existing #14B4C2 & #018db5) */
	--brand-dark:   #0A6E7E;   /* headings, hovers */
	--brand-deep:   #08505C;   /* strong contrast */
	--brand-tint:   #E7F6F9;   /* section washes */
	--sand:         #E9A23B;   /* warm accent — the one bold spend (sun/beach) */
	--sand-dark:    #CB851F;
	--ink:          #20313A;   /* body text */
	--muted:        #5E727B;
	--line:         #DCE7EB;   /* hairline borders */
	--bg:           #FFFFFF;
	--bg-alt:       #F4F8FA;   /* alternating sections */
	--radius:       10px;
	--radius-sm:    7px;
	--shadow:       0 6px 20px rgba(16, 60, 70, .08);
	--shadow-hover: 0 12px 30px rgba(16, 60, 70, .14);
	--maxw:         1000px;
}

/* --- Base -------------------------------------------------------------- */
body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--ink);
	line-height: 1.65;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	background: var(--bg);
}
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
a { color: var(--brand); text-decoration: none; word-break: break-word; transition: color .15s ease; }
a:hover, a:focus { color: var(--brand-dark); text-decoration: underline; }
hr { border-top: 1px solid var(--line); margin: 28px 0; }

/* --- Typography ------------------------------------------------------- */
h1, h2, h3, h4, h5, .header-title, .panel-title, .modal-title {
	font-family: "Poppins", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--brand-deep);
	line-height: 1.2;
	font-weight: 600;
	margin: .4em 0 .5em;
}
h1 { font-size: clamp(1.8rem, 4.2vw, 2.6rem); font-weight: 700; letter-spacing: -.01em; }
/* the legacy theme forces `h1 { color:#fff !important }` globally, which hides content
   headings on white pages — restore a readable colour (banner uses .header-title, stays white) */
.typography h1, body .typography h1, .main-content h1 { color: var(--brand-deep) !important; }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.35rem); }
p  { margin: 0 0 1em; }

/* Signature: a short sand underline under content H1/H2 (quiet, on-brand). */
.typography h1::after,
.typography > h2::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin-top: 12px;
	background: var(--sand);
	border-radius: 3px;
}

/* --- Layout ----------------------------------------------------------- */
.main-content { max-width: var(--maxw); }
.typography { color: var(--ink); }
section.tour, .section-wrapper { padding: 10px 0; }

/* --- Buttons ---------------------------------------------------------- */
.btn, .action, .custom-btn, input[type="submit"] {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	border-radius: 999px;
	padding: 11px 26px;
	min-height: 44px;                 /* comfortable tap target */
	border: 1px solid transparent;
	transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
	letter-spacing: .01em;
}
.btn:active { transform: translateY(1px); }

/* Primary + the banner CTA use the warm sand accent to draw the eye */
.btn-primary, .custom-btn, .action, input[type="submit"] {
	background: var(--sand) !important;
	border-color: var(--sand) !important;
	color: #3a2708 !important;
}
.btn-primary:hover, .btn-primary:focus,
.custom-btn:hover, .custom-btn:focus,
.action:hover, .action:focus,
input[type="submit"]:hover {
	background: var(--sand-dark) !important;
	border-color: var(--sand-dark) !important;
	color: #fff !important;
	box-shadow: var(--shadow-hover);
	transform: translateY(-1px);
}
.btn-default {
	background: #fff !important;
	border: 1px solid var(--brand) !important;
	color: var(--brand-dark) !important;
}
.btn-default:hover, .btn-default:focus {
	background: var(--brand-tint) !important;
	color: var(--brand-deep) !important;
}
.btn-block { display: block; width: 100%; }

/* --- Forms ------------------------------------------------------------ */
.form-control,
input[type="text"], input[type="email"], input[type="number"],
input[type="tel"], textarea, select {
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 10px 14px;
	min-height: 44px;
	font-size: 16px;                  /* prevents iOS zoom-on-focus */
	color: var(--ink);
	background: #fff;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
	max-width: 100%;
}
textarea { min-height: 120px; }
.form-control:focus,
input:focus, textarea:focus, select:focus {
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(14, 147, 168, .18);
	outline: none;
}
.field label.left, .form-group label, label { font-weight: 600; color: var(--brand-deep); }
form fieldset div.field { margin-bottom: 14px; }
.message.good, .message.bad, .message.required {
	border-radius: var(--radius-sm); padding: 12px 16px; margin: 12px 0;
}
.message.good { background: #e7f7ee; color: #1c6b45; }
.message.bad, .message.required { background: #fdecec; color: #a12626; }

/* --- Cards / panels --------------------------------------------------- */
.panel {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	transition: box-shadow .18s ease, transform .18s ease;
	margin-bottom: 24px;
	background: #fff;
}
.panel:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.panel-heading {
	background: var(--brand) !important;
	border-bottom: none !important;
	color: #fff !important;
	padding: 14px 18px;
}
.panel-heading .panel-title, .panel-heading a { color: #fff !important; font-weight: 600; }
.panel-body { padding: 18px; }
.panel-primary { border-color: var(--sand); }
.panel-primary > .panel-heading { background: var(--brand-dark) !important; }
.label-warning { background: var(--sand); color: #3a2708; }

/* --- Navbar ----------------------------------------------------------- */
.navbar-default {
	background: #fff;
	border: none;
	border-bottom: 1px solid var(--line);
	box-shadow: none;
	border-radius: 0;
	margin-bottom: 0;
	min-height: 84px;
}
.navbar-brand { height: auto; padding: 0 15px; display: flex; align-items: center; margin-top: 16px; }
.navbar-brand #logo, .navbar-brand img { max-height: 56px; width: auto; }
.navbar-default .navbar-nav > li > a {
	color: var(--ink) !important;
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-size: 15px;
	padding: 14px 18px;
	transition: color .15s ease;
}
/* Desktop: vertically centre the logo and the nav links on one row */
@media (min-width: 768px) {
	.navbar-default .header-nav { display: flex; align-items: center; min-height: 84px; }
	.navbar-default .navbar-header { float: none; display: flex; align-items: center; }
	.navbar-default .navbar-collapse { float: none; flex: 1 1 auto; display: flex !important; justify-content: flex-end; align-items: center; }
	.navbar-default .navbar-nav.navbar-right { float: none; margin: 0; display: flex; }
	.navbar-default .navbar-nav > li { display: flex; align-items: center; }
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li.active > a:hover,
.navbar-default .navbar-nav > li.active > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .dropdown.open > .dropdown-toggle {
	color: var(--brand) !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
}
.navbar-default .navbar-nav > li > a::after {
	content: ""; display: block; height: 2px; width: 0; background: var(--brand);
	transition: width .2s ease; margin-top: 4px;
}
.navbar-default .navbar-nav > li > a:hover::after,
.navbar-default .navbar-nav > li.active > a::after { width: 100%; }
.dropdown-menu { border: none; box-shadow: var(--shadow); border-radius: var(--radius-sm); }
.dropdown-menu > li > a { padding: 9px 18px; }
.dropdown-menu > li > a:hover { background: var(--brand-tint); color: var(--brand-deep); }
.navbar-toggle { border-color: var(--brand); }
.navbar-toggle .icon-bar { background: var(--brand); }
.social-icon { list-style: none; padding-left: 0; margin: 8px 0; }
.social-icon li { display: inline-block; margin: 0 6px; }
.social-icon a { color: var(--brand); font-size: 20px; }

/* --- Banner / hero slider -------------------------------------------- */
/* Banner slider — one consistent, reserved height so content centres and never clips */
#header { height: 300px; overflow: hidden; background-color: var(--brand-deep); }
#header .flexslider, #header .flex-viewport, #header .slides, #header .flexslider .slides > li {
	height: 300px; min-height: 300px; background-color: var(--brand-deep);
}
@media (max-width: 767px) {
	#header, #header .flexslider, #header .flex-viewport, #header .slides, #header .flexslider .slides > li { height: 220px; min-height: 220px; }
}
#header .slider-item {
	background-size: cover !important;
	background-position: center !important;
	background-color: var(--brand-deep);
	position: relative;
}
/* Anchor the caption absolutely-centred so it doesn't shift when the slider
   initialises or the web font loads (prevents the "jump down" on load).
   Also override the legacy table layout that stretched it to full height. */
#header .slider-item .intro {
	position: absolute !important;
	display: block !important;
	top: 50%;
	left: 0; right: 0;
	transform: translateY(-50%);
	margin: 0 auto;
	height: auto !important;
	width: 100%;
}
#header .slider-item .inner-intro {
	display: block !important;
	height: auto !important;
	vertical-align: initial !important;
}
#header .header-title { font-size: clamp(1.5rem, 3.4vw, 2.1rem) !important; }
#header .header-sub-title { font-size: clamp(.95rem, 1.8vw, 1.1rem); }
#header .slider-item::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(8,40,48,.25) 0%, rgba(8,40,48,.62) 100%);
}
#header .intro, #header .inner-intro { position: relative; z-index: 2; }
#header .intro { text-align: center; width: 100%; }
#header .inner-intro { max-width: 720px; padding: 10px 20px; margin: 0 auto; text-align: center; }
.header-title { margin: 0 0 6px; }
.header-sub-title { margin: 10px 0 16px; }
.header-title { color: #fff !important; font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 700; text-shadow: 0 2px 12px rgba(0,0,0,.35); text-align: center !important; }
.header-title span { color: #fff !important; }
.header-title::after { content: ""; display: block; width: 64px; height: 4px; background: var(--sand); border-radius: 4px; margin: 14px auto 0; }
.header-sub-title { color: #f2fbfd; font-size: clamp(1rem, 2.2vw, 1.2rem); text-shadow: 0 1px 8px rgba(0,0,0,.35); margin: 16px 0 24px; }

/* --- Breadcrumbs ------------------------------------------------------ */
.breadcrumb { font-size: 14px; margin: 14px 0; }
.breadcrumb a { color: var(--muted); }
.breadcrumb .active { color: var(--brand-dark); font-weight: 600; }

/* --- Footer ----------------------------------------------------------- */
footer { color: #eafafd; padding: 42px 0 24px; }
.footer-row { color: #fff; }
.footer-col { margin-bottom: 20px; }
.footer-h { color: #fff; font-size: 16px; margin: 0 0 12px; }
.footer-address { font-style: normal; line-height: 1.9; color: #eafafd; }
footer a, .footer-cta { color: #fff; }
footer a:hover, .footer-cta:hover { color: var(--sand); }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 7px; }
.footer-links a { text-decoration: none; }
.footer-about { color: #ffffff !important; opacity: 1; margin: 0 0 10px; line-height: 1.65; font-size: 15px; }
footer .footer-col p, footer .footer-col { color: #ffffff; }
.footer-cta { font-weight: 600; }
.footer-social { list-style: none; padding: 0; margin: 12px 0 0; }
.footer-social li { display: inline-block; margin-right: 10px; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 18px; transition: background-color .15s ease, transform .15s ease; }
.footer-social a:hover { background: var(--sand); color: #3a2708; transform: translateY(-2px); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.25); margin-top: 16px; padding-top: 16px; text-align: center; color: #eafafd; font-size: 14px; }
/* breathing room between page content and the footer (e.g. About page newsletter) */
.main-content { padding-bottom: 34px; }

/* --- Data tables (hot deals) ----------------------------------------- */
.hotdeals-block { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#hotdeals-table { min-width: 640px; border-collapse: collapse; }
#hotdeals-table thead th { background: var(--brand); color: #fff; border-color: var(--brand-dark) !important; }
#hotdeals-table td, #hotdeals-table th { padding: 8px 10px; }

/* --- Newsletter / subscribe ------------------------------------------ */
.subscribe, .section-wrapper { background: var(--bg-alt); border-radius: var(--radius); padding: 22px; }
.subscribe.section-wrapper { margin-bottom: 25px; }

/* --- Listing helpers -------------------------------------------------- */
.tfs-filter .form-group { margin-bottom: 12px; }
.tfs-listings .panel-body ul { font-size: 14px; }
.area-cta, .resort-cta, .tfs-cta { background: var(--brand-tint); border-radius: var(--radius); padding: 24px; margin: 20px 0; }
.area-empty { text-align: center; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 42px 24px; margin: 16px 0; }
.area-empty-emoji { font-size: 46px; line-height: 1; margin-bottom: 12px; }
.area-empty h2 { margin-top: 0; }
.area-empty p { max-width: 580px; margin: 0 auto 18px; color: var(--muted); }
.area-empty-links { margin-bottom: 16px; }
.area-empty-links .btn { margin: 4px; }
.area-empty-cta { margin: 0; }
.area-explore { margin: 8px 0 4px; }
.area-explore h2 { margin-top: 0; }
.area-explore-links .btn { margin: 4px 4px 4px 0; }
.area-cta .btn, .resort-cta .btn, .tfs-cta .btn { margin: 4px; }

/* --- Guides / Blog ---------------------------------------------------- */
.guides-intro { max-width: 760px; margin-bottom: 24px; }
.guides-grid { display: flex; flex-wrap: wrap; gap: 24px; margin: 8px 0 8px; }
.guide-card {
	flex: 1 1 300px; max-width: 360px;
	border: 1px solid var(--line, #e4e4e4); border-radius: 10px; overflow: hidden;
	background: #fff; display: flex; flex-direction: column;
	transition: box-shadow .2s ease, transform .2s ease;
}
.guide-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.10); transform: translateY(-2px); }
.guide-card-media { display: block; background: #f2f6f7; }
.guide-card-media img { width: 100%; height: 200px; object-fit: cover; display: block; }
.guide-card-noimg { display: flex; align-items: center; justify-content: center; height: 200px; font-size: 48px; }
.guide-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.guide-card-date { font-size: 13px; color: var(--muted, #888); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.guide-card-title { font-size: 18px; margin: 0 0 8px; line-height: 1.3; }
.guide-card-title a { color: inherit; }
.guide-card-teaser { font-size: 15px; color: #555; margin: 0 0 14px; flex: 1; }
.guide-card-more { font-weight: 600; align-self: flex-start; }
.guide-article .guide-meta { color: var(--muted, #888); font-size: 14px; margin-top: -6px; }
.guide-hero { width: 100%; border-radius: 10px; margin: 8px 0 20px; }
.guide-body { max-width: 760px; }
.guide-body h2 { margin-top: 28px; }
.hww-cta { margin-top: 24px; }
.footer-legal { display: block; margin-top: 8px; font-size: 13px; opacity: .9; }
.footer-legal a { color: #fff; }

/* Home "new to timeshare" helper band */
.home-help { padding: 28px 0; }
.home-help-inner {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
	background: #f2f6f7; border: 1px solid var(--line, #e4e4e4); border-radius: 12px; padding: 22px 26px;
}
.home-help-text h2 { margin: 0 0 4px; font-size: 22px; }
.home-help-text p { margin: 0; color: #555; }
.home-help-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.home-help-actions .btn { margin: 0; }
.page-help-line { font-size: 15px; color: #555; margin: 6px 0 0; }

/* --- Accessibility ---------------------------------------------------- */
a:focus-visible, .btn:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 3px solid var(--sand);
	outline-offset: 2px;
}

/* --- Resort directory grid (brief §14) — aligned, content-height cards - */
.resort-grid { display: flex; flex-wrap: wrap; align-items: flex-start; }
.resort-grid > .col-md-4 { float: none; display: flex; padding: 12px; }
.resort-grid .panel { width: 100%; display: flex; flex-direction: column; margin-bottom: 0; }
.resort-grid .panel-body { flex: 0 0 auto; }
/* headers: always a single line (small enough to fit the longest province name) */
.resort-grid .panel-heading, .province-head { text-align: center; background: var(--brand) !important; padding: 12px 10px; }
.province-head a { color: #fff !important; text-transform: uppercase; display: block; font-size: 12px; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.province-head a:hover { color: #fff !important; opacity: .85; text-decoration: none; }
/* uniform card images */
.resort-grid .panel-body img { width: 100% !important; height: 180px !important; object-fit: cover; border-radius: 6px; margin-bottom: 6px; }
/* area links: a readable list BELOW the image, never overlaid on it */
.sub-province-head { position: static !important; top: auto !important; list-style: none; padding: 8px 0 0; margin: 0; width: 100%; }
.sub-province-head li { background: transparent !important; opacity: 1 !important; width: auto !important; margin: 0 !important; border-bottom: 1px solid var(--line); font-size: 14px; }
.sub-province-head li:hover { background: var(--brand-tint) !important; color: inherit !important; }
.sub-province-head a { width: auto !important; display: block; padding: 8px 6px !important; color: var(--brand-dark); }
.sub-province-head a:hover { color: var(--brand-deep) !important; text-decoration: none; font-weight: 600; }

/* --- Newsletter band (teal CTA with inline fields) -------------------- */
.newsletter-wrap { max-width: 780px; margin: 40px auto; padding: 0 12px; }
.newsletter-band {
	background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
	color: #fff; border-radius: var(--radius); padding: 30px 32px; box-shadow: var(--shadow);
}
.newsletter-band, .newsletter-band h2, .newsletter-band p, .newsletter-band label { color: #ffffff !important; }
.newsletter-band-head { text-align: center; margin-bottom: 18px; }
.newsletter-band-head h2 { margin: 0 0 6px; }
.newsletter-band-head p { color: #eafafd !important; margin: 0; font-size: 15px; }
.newsletter-band form { max-width: 720px; margin: 0 auto; }
.newsletter-band form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.newsletter-band .field { flex: 1 1 180px; margin: 0 !important; float: none !important; width: auto !important; padding: 0 !important; }
.newsletter-band .field label { display: none; }
.newsletter-band .field input { width: 100%; }
.newsletter-band .Actions, .newsletter-band .btn-toolbar { flex-basis: 100%; text-align: center; margin-top: 2px; }
.newsletter-band .action { width: auto !important; }
/* hide the stray empty literal field that added a gap above the button */
.newsletter-band #Outside, .newsletter-band .field.text:not(:has(input)):not(:has(textarea)) { display: none; margin: 0; min-height: 0; }

/* --- Area page resort cards ------------------------------------------- */
.resort-list { display: flex; flex-wrap: wrap; align-items: stretch; margin-left: -10px; margin-right: -10px; }
.resort-list > .col-md-4 { float: none; display: flex; padding: 10px; width: 33.333%; }
@media (max-width: 991px) { .resort-list > .col-md-4 { width: 50%; } }
@media (max-width: 700px) { .resort-list { margin-left: 0; margin-right: 0; } .resort-list > .col-md-4 { width: 100%; max-width: 460px; margin: 0 auto; } }
.resort-card {
	width: 100%; display: flex; flex-direction: column; background: #fff;
	border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
	box-shadow: var(--shadow); transition: box-shadow .18s ease, transform .18s ease;
}
.resort-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.resort-card-media { display: block; overflow: hidden; }
.resort-card-media img { width: 100% !important; height: 200px !important; object-fit: cover; display: block; transition: transform .3s ease; }
.resort-card:hover .resort-card-media img { transform: scale(1.05); }
.resort-card-body { padding: 16px; display: flex; flex-direction: column; flex: 1 1 auto; text-align: left; }
.resort-card-title { font-size: 17px; margin: 0 0 6px; }
.resort-card-title a { color: var(--brand-deep); }
.resort-card-area { color: var(--muted); font-size: 14px; margin: 0 0 8px; }
.resort-card-price { color: var(--brand-dark); font-weight: 600; margin: 0 0 8px; }
.resort-card-price span { font-weight: 400; color: var(--muted); font-size: 13px; }
.resort-card-amenities { color: var(--ink); font-size: 14px; margin: 0 0 14px; }
.resort-card-cta { margin-top: auto; }

/* --- Province cards (consistent look + "View areas" modal) ------------ */
.province-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.province-grid > [class*="col-"] { display: flex; float: none; padding: 12px; }
@media (max-width: 767px) { .province-grid > [class*="col-"] { width: 100%; max-width: 460px; } }
.province-card { width: 100%; display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #fff; transition: box-shadow .18s ease, transform .18s ease; }
.province-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.province-card-media { position: relative; display: block; overflow: hidden; flex: 1 1 auto; }
.province-card-media img { width: 100%; height: 210px; object-fit: cover; display: block; transition: transform .3s ease; }
.province-card:hover .province-card-media img { transform: scale(1.06); }
.province-card-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; background: linear-gradient(180deg, rgba(8,40,48,0) 40%, rgba(8,40,48,.78) 100%); }
.province-card-title { color: #fff; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 20px; line-height: 1.15; text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.province-card-count { color: #eafafd; font-size: 13px; margin-top: 2px; }
.province-card-btn { border-radius: 0 !important; border: none !important; border-top: 1px solid var(--line) !important; background: #fff !important; color: var(--brand-dark) !important; font-weight: 600; min-height: 46px; }
.province-card-btn:hover { background: var(--brand-tint) !important; color: var(--brand-deep) !important; }
.area-modal .modal-content { border: 0 !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 18px 50px rgba(8,40,48,.35); }
.area-modal .modal-header { background: var(--brand) !important; border: 0 !important; border-radius: 0 !important; padding: 16px 20px; margin: 0; }
.area-modal .modal-title { color: #fff; opacity: 1; text-shadow: none; font-size: 18px; line-height: 1.2; }
.area-modal .modal-header .close { color: #fff; opacity: .95; text-shadow: none; margin-top: 2px; font-size: 26px; }
.area-modal .modal-body { padding: 8px 20px 20px; }
.modal-content { padding-left: 0 !important; }
.area-modal-list { list-style: none; padding: 0; margin: 0; }
.area-modal-list li { border-bottom: 1px solid var(--line); }
.area-modal-list a { display: block; padding: 11px 8px; color: var(--brand-dark); }
.area-modal-list a:hover { background: var(--brand-tint); color: var(--brand-deep); text-decoration: none; font-weight: 600; }
@media (min-width: 480px) { .area-modal-list { column-count: 2; column-gap: 24px; } .area-modal-list li { break-inside: avoid; } }

/* --- Resort explorer: search + map + results ------------------------- */
.resort-explore { margin: 6px 0 30px; }
.resort-search { position: relative; max-width: 720px; margin: 0 auto 14px; }
.resort-search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 16px; opacity: .55; }
.resort-search input { width: 100%; padding: 14px 20px 14px 46px; font-size: 16px; border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); }
.resort-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(14,147,168,.18); outline: none; }
.resort-tags { text-align: center; margin: 0 0 16px; }
.resort-tag { display: inline-block; margin: 4px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--brand-dark); font-size: 13px; cursor: pointer; text-transform: capitalize; transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
.resort-tag:hover { border-color: var(--brand); background: var(--brand-tint); }
.resort-tag.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.resort-map { height: clamp(320px, 55vh, 480px); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); z-index: 1; }
.resort-map-hint { text-align: center; color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.resort-results { margin-top: 22px; }
.rr-heading { font-size: 18px; margin: 0 0 12px; }
.rr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.rr-card { display: flex; flex-direction: column; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; box-shadow: var(--shadow); transition: box-shadow .15s ease, transform .15s ease; }
.rr-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); text-decoration: none; }
.rr-title { font-weight: 600; color: var(--brand-deep); }
.rr-loc { color: var(--muted); font-size: 13px; margin-top: 2px; }
.rr-price { color: var(--brand-dark); font-weight: 600; font-size: 13px; margin-top: 6px; }
.rr-empty { text-align: center; color: var(--muted); padding: 24px; }
.browse-heading { text-align: center; margin: 26px 0 6px; }
.mp { text-align: center; }
.mp strong { color: var(--brand-deep); font-size: 16px; display: block; }
.mp-area { color: var(--muted); font-size: 13px; margin: 3px 0; }
.mp-price { color: var(--brand-dark); font-weight: 600; font-size: 14px; margin: 2px 0; }
.mp-link { display: inline-block; margin-top: 10px; padding: 9px 18px; background: var(--sand); color: #3a2708 !important; border-radius: 999px; font-weight: 600; font-size: 14px; }
.mp-link:hover { background: var(--sand-dark); color: #fff !important; text-decoration: none; }
.leaflet-popup-content { margin: 14px 16px; min-width: 170px; font-size: 16px; font-weight: 500; color: var(--brand-deep); }
.leaflet-popup-content-wrapper { border-radius: 12px; }
.resort-mini-map .leaflet-popup-content { font-size: 17px; font-weight: 600; text-align: center; }
/* resort info sections: one field spans wide, multiples share the row (no squashing) */
.info-cols { display: flex; flex-wrap: wrap; gap: 24px; text-align: left; margin: 0 0 4px; }
.info-cols > div { flex: 1 1 260px; float: none; width: auto; padding: 0; }
.info-cols h3, .accommodation-cols h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 0 0 6px; }
/* Accommodation: Unit Types wide on the left, other details stacked in a side column */
.accommodation-cols { display: flex; flex-wrap: wrap; gap: 28px; text-align: left; align-items: flex-start; justify-content: space-between; }
.accommodation-main { flex: 1 1 420px; }
.accommodation-side { flex: 0 1 260px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; align-self: flex-start; }
.accommodation-side .info-item { margin-bottom: 14px; }
.accommodation-side .info-item:last-child { margin-bottom: 0; }
/* Contact block: icon + label per detail, easy to scan */
.contact-cols { display: flex; flex-wrap: wrap; gap: 24px; text-align: left; }
.contact-item { display: flex; gap: 12px; align-items: flex-start; flex: 1 1 240px; }
.contact-icon { font-size: 20px; line-height: 1.35; flex: 0 0 auto; }
.contact-body h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 0 0 3px; }
.contact-body h4 { display: none; }
.contact-body p { margin: 0 0 2px; }
/* Contact page: details card + form */
.contact-details-card { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 20px; }
.contact-details-card h3 { margin: 0 0 14px; color: var(--brand-deep); }
.contact-detail-list { list-style: none; padding: 0; margin: 0; }
.contact-detail-list li { display: flex; align-items: flex-start; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); list-style: none; }
.contact-detail-list li:last-child { border-bottom: none; }
/* Icons via CSS ::before so the CMS content needs no empty <i> tags
   (SilverStripe self-closes empty inline elements, which breaks nesting). */
.contact-detail-list li::before { font-family: "Ionicons"; font-size: 20px; color: var(--brand); flex: 0 0 24px; width: 24px; text-align: center; line-height: 1.5; }
.contact-detail-list li.cd-loc::before  { content: "\f1ff"; }
.contact-detail-list li.cd-tel::before  { content: "\f4b9"; }
.contact-detail-list li.cd-wa::before   { content: "\f4f0"; }
.contact-detail-list li.cd-mail::before { content: "\f423"; }
/* legacy empty-<i> markup fallback: hide the stray icon element, keep its glyph */
.contact-detail-list .cd-icon { font-size: 20px; color: var(--brand); flex: 0 0 24px; width: 24px; text-align: center; line-height: 1.5; }
.contact-detail-list a { color: var(--brand-dark); word-break: break-word; }
.contact-detail-list a:hover { color: var(--brand-deep); }
.contact-form-heading { margin-top: 0; }
/* Contact form: carded, two-column field grid with visible labels */
.contact-form-col form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 24px 16px; }
.contact-form-col fieldset { display: flex; flex-wrap: wrap; gap: 0 18px; border: 0; padding: 0; margin: 0; }
.contact-form-col fieldset > .field { flex: 1 1 220px; margin-bottom: 14px; }
/* the message/textarea and country span full width */
.contact-form-col fieldset > .field.textarea,
.contact-form-col fieldset > .field.dropdown { flex-basis: 100%; }
.contact-form-col .field label.left { display: block !important; font-size: 13px; font-weight: 600; color: var(--brand-deep); margin-bottom: 5px; text-align: left; }
.contact-form-col .field input, .contact-form-col .field select, .contact-form-col .field textarea { width: 100%; }
.contact-form-col .Actions { width: 100%; text-align: center; margin-top: 6px; }
.contact-layout { display: flex; flex-wrap: wrap; }
.contact-layout > [class*="col-"] { float: none; }
/* legacy field values embed their own <h4> heading — hide it so only our clean label shows */
.accommodation-cols h4, .info-cols h4 { display: none; }
.accommodation-cols .info-item p:first-child, .accommodation-cols .accommodation-main p:first-child { margin-top: 0; }
.resort-location-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.resort-location-head .resort-address { margin: 0; }
.resort-directions .dropdown-menu-right { right: 0; left: auto; }
.resort-directions .dropdown-menu { border: none; box-shadow: var(--shadow); border-radius: var(--radius-sm); min-width: 170px; }
.resort-directions .dropdown-menu > li > a { padding: 10px 16px; color: var(--brand-dark); }
.resort-directions .dropdown-menu > li > a:hover { background: var(--brand-tint); color: var(--brand-deep); }

/* --- Resort page: tags, address, mini-map, nearby -------------------- */
.resort-tag-badges { margin: 0 0 10px; }
.resort-tag-badge { display: inline-block; margin: 3px 6px 3px 0; padding: 4px 12px; background: var(--brand-tint); color: var(--brand-deep); border-radius: 999px; font-size: 12px; text-transform: capitalize; }
.resort-address { color: var(--muted); font-size: 15px; margin: 0 0 12px; }
.resort-mini-map { height: 320px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-top: 8px; z-index: 1; }
.nearby-resorts { margin-top: 6px; }
.nearby-card { display: block; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow); transition: box-shadow .15s ease, transform .15s ease; margin-bottom: 12px; }
.nearby-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); text-decoration: none; }
.nearby-media { display: block; overflow: hidden; }
.nearby-media img { width: 100%; height: 160px; object-fit: cover; display: block; transition: transform .3s ease; }
.nearby-card:hover .nearby-media img { transform: scale(1.06); }
.nearby-title { display: block; padding: 12px 14px; font-weight: 600; color: var(--brand-deep); }

/* --- Enquiry forms (buy / sell / rent / fractional / contact) -------- */
form.timeshare, form.Newsletter.timeshare, .UserDefinedForm form, div.field + form {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: var(--shadow); padding: 26px 26px 18px; max-width: 900px; margin: 18px auto;
}
form.timeshare .field, .UserDefinedForm .field { margin-bottom: 16px; }
form.timeshare fieldset > .field label.left { display: block; font-size: 13px; font-weight: 600; color: var(--brand-deep); margin: 0 0 4px; }
form.timeshare .fieldgroup { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
form.timeshare .fieldgroup .fieldgroupField { flex: 1 1 auto; }
form.timeshare .Actions, .UserDefinedForm .Actions, form.timeshare .btn-toolbar { text-align: center; margin-top: 10px; }
form.timeshare .message, .UserDefinedForm .message { border-radius: var(--radius-sm); }
/* the "Comments" textarea should span full width on its row */
form.timeshare #Comments, form.timeshare #Notes, form.timeshare #SpecialRequests, form.timeshare .textarea { width: 100%; }

/* --- Homepage alignment: neutralise nested Bootstrap containers -------- */
html, body { overflow-x: hidden; }               /* safety net against stray horizontal scroll */
.main-content .container { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; }
.main-content .tour.container { text-align: center; }
.main-content .tour.container .row { text-align: left; }
.main-content section.tour { margin-bottom: 10px; }

/* Home service cards: two rows of three, equal height within each row */
.service-row { display: flex; flex-wrap: wrap; margin-left: -10px; margin-right: -10px; }
.service-row > .col-md-4 { float: none; width: 33.333%; display: flex; padding: 10px; }
.service-row .panel.panel-info { width: 100%; margin: 0; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.service-row .panel-info .panel-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.service-row .panel-info .panel-body .text-justify { flex: 1 1 auto; min-height: 7.5em; }
.service-row .panel-info .panel-body .btn { margin-top: auto; align-self: flex-start; }
@media (min-width: 768px) { .service-row .panel.panel-info { min-height: 344px; } }
@media (max-width: 767px) { .service-row > .col-md-4 { width: 100%; } }

/* Colour-code each service card (heading bar + matching enquire button) */
.service-row .panel-heading { color: #fff !important; border: none !important; padding: 14px 18px; }
.service-row .panel-heading .panel-title { color: #fff !important; font-size: 15px; letter-spacing: .02em; margin: 0; }
.service-row .panel-body .btn { background: #fff !important; border-width: 2px !important; border-style: solid !important; font-weight: 600; }

.service-row .buytimeshare-heading    { background: #1c7cb5 !important; }
.service-row .buyingfractional-heading { background: #f4a70b !important; }
.service-row .sellingtimeshare-heading { background: #ec5a29 !important; }
.service-row .sellinfractional-heading { background: #34a248 !important; }
.service-row .rentaloffered-heading    { background: #f6c500 !important; }
.service-row .rentalenquired-heading   { background: #f2921c !important; }

.service-row .btn-buying-timeshare    { border-color: #1c7cb5 !important; color: #1c7cb5 !important; }
.service-row .btn-buying-fractional   { border-color: #f4a70b !important; color: #b87c04 !important; }
.service-row .btn-selling-timeshare   { border-color: #ec5a29 !important; color: #ec5a29 !important; }
.service-row .btn-selling-fractional  { border-color: #34a248 !important; color: #2c8a3d !important; }
.service-row .btn-rental-offered      { border-color: #f6c500 !important; color: #a88800 !important; }
.service-row .btn-rental-enquired     { border-color: #f2921c !important; color: #c9760e !important; }

.service-row .btn-buying-timeshare:hover    { background: #1c7cb5 !important; color: #fff !important; }
.service-row .btn-buying-fractional:hover   { background: #f4a70b !important; color: #fff !important; }
.service-row .btn-selling-timeshare:hover   { background: #ec5a29 !important; color: #fff !important; }
.service-row .btn-selling-fractional:hover  { background: #34a248 !important; color: #fff !important; }
.service-row .btn-rental-offered:hover      { background: #f6c500 !important; color: #3a2708 !important; }
.service-row .btn-rental-enquired:hover     { background: #f2921c !important; color: #fff !important; }

/* --- Banner slider arrows: larger, circular, always visible ----------- */
#header .flex-direction-nav a {
	width: 46px; height: 46px; margin: -23px 0 0;
	background: rgba(255,255,255,.9); border-radius: 50%;
	box-shadow: 0 3px 12px rgba(0,0,0,.28);
	opacity: .9 !important; text-align: center; overflow: hidden;
}
#header .flex-direction-nav a:before {
	font-size: 22px; line-height: 46px; color: var(--brand-dark); text-shadow: none;
}
#header .flex-direction-nav .flex-prev { left: 22px !important; }
#header .flex-direction-nav .flex-next { right: 22px !important; }
#header .flex-direction-nav a:hover { opacity: 1 !important; background: #fff; }
@media (max-width: 767px) {
	#header .flex-direction-nav a { width: 40px; height: 40px; margin: -20px 0 0; }
	#header .flex-direction-nav a:before { line-height: 40px; font-size: 20px; }
	#header .flex-direction-nav .flex-prev { left: 10px !important; }
	#header .flex-direction-nav .flex-next { right: 10px !important; }
}

/* --- Form validation & AJAX feedback --------------------------------- */
/* clean inline field errors */
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: #d9534f !important; box-shadow: 0 0 0 3px rgba(217,83,79,.14) !important; }
.field-error { display: block; color: #c0392b; font-size: 13px; margin-top: 5px; line-height: 1.35; }
.newsletter-band .field-error { color: #fff3f3; }

/* tame the legacy server-rendered validation boxes (fallback when JS is off) */
.field .message { display: block; position: static !important; background: transparent !important; color: #c0392b !important; font-size: 13px; padding: 4px 0 0 !important; margin: 0 !important; box-shadow: none !important; border: 0 !important; float: none !important; width: auto !important; }
form .message.required { background: transparent; color: #c0392b; }

/* AJAX result banner */
.form-banner { border-radius: var(--radius-sm); padding: 16px 18px 16px 48px; margin: 0 0 18px; font-weight: 500; position: relative; line-height: 1.45; }
.form-banner::before { position: absolute; left: 16px; top: 15px; font-size: 20px; line-height: 1; }
.form-banner--good { background: #e7f7ee; color: #1c6b45; border: 1px solid #bfe6ce; }
.form-banner--good::before { content: "\2714"; color: #1c9d5e; }   /* check mark */
.form-banner--bad { background: #fdecec; color: #a12626; border: 1px solid #f4c9c9; }
.form-banner--bad::before { content: "\26A0"; color: #d9534f; }    /* warning */
.newsletter-band .form-banner--good { background: rgba(255,255,255,.95); color: #1c6b45; }
.newsletter-band .form-banner--bad { background: rgba(255,255,255,.95); color: #a12626; }

/* Commercial-page intro copy: both paragraphs the same size, left-aligned, responsive.
   (Overrides Bootstrap's larger .lead and the justified body text.) */
.typography .lead,
.typography .lead + p,
.tfs-intro, .resort-intro, .area-intro {
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 1.65 !important;
	text-align: left !important;
	color: var(--ink);
	margin-bottom: .9em;
}
@media (max-width: 767px) {
	.typography .lead, .typography .lead + p, .tfs-intro, .resort-intro, .area-intro { font-size: 16px !important; }
}

/* Area / resort page copy: always wrap cleanly, no overflow on small screens */
#Area, .area-intro, .resort-intro, .tfs-intro, .typography p, .area-province { overflow-wrap: break-word; word-wrap: break-word; }
@media (max-width: 767px) { .area-intro, .resort-intro, #Area .typography { text-align: left !important; } }
#Area h1, .typography h1 { overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; }
@media (max-width: 767px) { #Area h1, .typography h1 { font-size: clamp(1.4rem, 6.5vw, 1.9rem); } }

/* --- Responsive ------------------------------------------------------- */
@media (max-width: 991px) {
	.navbar-default .navbar-nav > li > a { padding: 12px 16px; }
	.navbar-default .navbar-nav > li > a::after { display: none; }
}
@media (max-width: 767px) {
	body { font-size: 15.5px; }
	.main-content { padding: 0 14px !important; }
	#header .slider-item { min-height: 320px; }
	#header .inner-intro { padding: 40px 16px; }
	.nav-icon-header { text-align: center !important; margin-left: 0 !important; padding-right: 0 !important; }
	.col-md-4, .col-md-3, .col-md-6 { margin-bottom: 16px; }
	.modal-dialog { margin: 10px; }
	.pull-left { float: none !important; }
	.btn, .action, .custom-btn { width: 100%; margin-bottom: 8px; }
	.tfs-cta .btn, .area-cta .btn, .resort-cta .btn, .breadcrumb .btn { width: auto; }
}

/* --- Motion preferences ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}