/* Areca HostAway Bridge - shared UI.
   Colour tokens are injected separately as CSS custom properties, so this
   file is identical for every visitor and the browser can cache it. */
/* ---------- hero search ---------- */
	/* Wide enough that "Paradisiac Beach Club, St Ann" and a full date range
	   both fit without ellipsis. */
	.ahb-hero{width:100%;max-width:1280px;margin:0 auto;position:relative;
		font-family:var(--ahb-font-body);box-sizing:border-box}
	.ahb-hero *,.ahb-hero *::before,.ahb-hero *::after{box-sizing:border-box}
	/* No solid fill: the bar sits over a hero image, so a frosted panel keeps
	   the photo visible while the cells stay legible. */
	.ahb-hero__bar{display:flex;align-items:stretch;position:relative;
		background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
		-webkit-backdrop-filter:blur(10px);
		border:1px solid rgba(255,255,255,.55);
		border-radius:999px;box-shadow:0 8px 30px rgba(15,23,42,.18)}
	.ahb-hero__cell{flex:1 1 0;min-width:0;padding:13px 20px;position:relative;cursor:pointer;
		border-right:1px solid var(--ahb-line);transition:background .15s ease;
		display:flex;flex-direction:column;justify-content:center;text-align:left;
		background:transparent;border-top:0;border-bottom:0;border-left:0;font:inherit}
	.ahb-hero__cell:first-child{border-radius:999px 0 0 999px;padding-left:26px}
	/* The theme styles buttons green, and these cells are <button> elements, so
	   its rules win on hover and focus unless they are overridden explicitly.
	   That green fill hid the dark label, which is what made an open cell look
	   like a solid green block. */
	.ahb-hero__cell,
	.ahb-hero__cell:hover,
	.ahb-hero__cell:focus,
	.ahb-hero__cell:active,
	.ahb-hero__cell:focus-visible,
	.ahb-hero__cell--open{
		background-color:transparent!important;background-image:none!important;
		color:var(--ahb-ink)!important;box-shadow:none!important;outline:none!important}
	.ahb-hero__cell:hover,
	.ahb-hero__cell--open{background-color:var(--ahb-wash)!important}
	.ahb-hero__cell--open{box-shadow:inset 0 -3px 0 var(--ahb-primary)!important}
	.ahb-hero__cell:hover .ahb-hero__label,
	.ahb-hero__cell--open .ahb-hero__label{color:var(--ahb-primary-dark)}
	.ahb-hero__cell:hover .ahb-hero__value,
	.ahb-hero__cell--open .ahb-hero__value{color:var(--ahb-muted)}
	.ahb-hero__cell:hover .ahb-hero__value--empty,
	.ahb-hero__cell--open .ahb-hero__value--empty{color:#94a3b8}
	.ahb-hero__label{display:block;font-size:10.5px;font-weight:700;
		letter-spacing:.08em;text-transform:uppercase;color:var(--ahb-ink);margin-bottom:2px;line-height:1.2}
	.ahb-hero__value{display:block;font-size:14.5px;color:var(--ahb-muted);line-height:1.35;
		white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
	.ahb-hero__value--empty{color:#94a3b8}
	.ahb-hero__go{flex:0 0 auto;display:flex;align-items:center;gap:8px;margin:6px;padding:0 26px;
		border:0;border-radius:999px;background:var(--ahb-primary);color:#fff;cursor:pointer;
		font-family:var(--ahb-font-body);font-size:15px;font-weight:600;transition:background .15s ease;
		white-space:nowrap}
	.ahb-hero__go:hover{background:var(--ahb-primary-dark)}
	.ahb-hero__go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;flex:0 0 auto}

	/* Widths follow the choice order: guests, where, style, dates. Minimums are
	   set from the longest real value each cell has to show, so a selection
	   never collapses to an ellipsis. */
	.ahb-hero__cell[data-cell="guests"]{flex:0 1 150px;min-width:130px}
	.ahb-hero__cell[data-cell="where"]{flex:1.4 1 240px;min-width:200px}
	.ahb-hero__cell[data-cell="style"]{flex:1 1 190px;min-width:160px}
	.ahb-hero__cell[data-cell="dates"]{flex:1.1 1 210px;min-width:185px}

	/* ---------- popovers ---------- */
	/* Fixed, not absolute: the hero sits inside a section with its own
	   background, and an absolutely positioned panel taller than that section
	   visually spills into the next one. Fixed takes it out of that flow and
	   the script positions it against the cell. */
	.ahb-pop{position:fixed;z-index:99999;background:var(--ahb-white);
		border-radius:18px;box-shadow:0 18px 50px rgba(15,23,42,.22);padding:16px;display:none;
		max-width:calc(100vw - 32px)}
	.ahb-pop--open{display:block}
	.ahb-pop--list{padding:8px;min-width:260px;max-height:340px;overflow-y:auto}
	.ahb-opt{display:block;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
		padding:10px 14px;border-radius:9px;font-size:14.5px;color:var(--ahb-ink);font-family:inherit;
		line-height:1.35;transition:background .12s ease}
	/* Hover must not wash out the label, so tint the row and keep dark text. */
	.ahb-opt:hover:not([disabled]):not(.ahb-opt--on){background:var(--ahb-wash);color:var(--ahb-ink)}
	.ahb-opt--on{background:var(--ahb-primary);color:#fff;font-weight:600}
	.ahb-opt--on:hover{background:var(--ahb-primary-dark);color:#fff}
	/* The count under a selected option was grey on green and vanished, so
	   force it light and keep enough contrast to stay readable. */
	.ahb-opt--on small,
	.ahb-opt--on:hover small{color:#fff!important;opacity:.9}
	.ahb-opt small{display:block;font-size:11.5px;color:#64748b;margin-top:1px}
	/* Greyed out but still legible: a disabled row still has to be readable. */
	.ahb-opt[disabled]{cursor:not-allowed;color:#9aa5b1;background:transparent}
	.ahb-opt[disabled] small{color:#b3bcc6}
	.ahb-opt[disabled]:hover{background:transparent;color:#9aa5b1}
	.ahb-cal{font-family:var(--ahb-font-body);user-select:none;display:block}
	.ahb-cal *{box-sizing:border-box}
	.ahb-cal__months{display:flex;gap:24px;align-items:flex-start}
	/* Fixed width per month stops the two grids bleeding into each other,
	   which is what a flexible width caused inside a themed container. */
	.ahb-cal__m{width:280px;flex:0 0 280px}
	/* Shown above the grid when there is nothing to pick. Deliberately quiet:
	   it explains, it does not alarm. */
	.ahb-cal__note{margin:0 0 10px;padding:10px 12px;border-radius:8px;
		background:#fff8e6;border:1px solid #f0dfae;color:#6b5a2b;
		font-size:13px;line-height:1.45}
	.ahb-cal__head{display:flex;align-items:center;justify-content:space-between;
		margin-bottom:10px;height:32px}
	.ahb-cal__title{font-family:var(--ahb-font-head);font-size:15.5px;font-weight:600;
		color:var(--ahb-ink);line-height:1;white-space:nowrap}
	.ahb-cal__nav{border:0;background:transparent;cursor:pointer;width:30px;height:30px;
		border-radius:50%;color:var(--ahb-ink);line-height:0;display:flex;
		align-items:center;justify-content:center;padding:0;flex:0 0 30px}
	.ahb-cal__nav,.ahb-cal__nav:hover,.ahb-cal__nav:focus{
		background-color:transparent!important;color:var(--ahb-ink)!important;box-shadow:none!important}
	.ahb-cal__nav:hover{background-color:var(--ahb-wash)!important}
	.ahb-cal__nav[disabled]{opacity:.28;cursor:default}
	.ahb-cal__nav svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2}
	.ahb-cal__dow,.ahb-cal__grid{display:grid;grid-template-columns:repeat(7,40px);
		justify-content:center;gap:0}
	.ahb-cal__dow span{text-align:center;font-size:11px;font-weight:600;color:#94a3b8;
		padding:4px 0;line-height:1.2}
	.ahb-cal__d{width:40px;height:40px;display:flex;align-items:center;justify-content:center;
		font-size:13.5px;color:var(--ahb-ink);border-radius:50%;cursor:pointer;position:relative;
		border:0;background:transparent;padding:0;font-family:inherit;line-height:1}
	/* Day cells are <button>s too, so the theme's green button hover applied
	   here as well and turned the number white-on-green, i.e. invisible. */
	.ahb-cal__d,
	.ahb-cal__d:hover,
	.ahb-cal__d:focus,
	.ahb-cal__d:active{background-color:transparent!important;background-image:none!important;
		color:var(--ahb-ink)!important;box-shadow:none!important}
	.ahb-cal__d:hover:not([disabled]){background-color:var(--ahb-wash)!important}
	.ahb-cal__d[disabled],.ahb-cal__d[disabled]:hover{color:#cbd5e1!important}
	.ahb-cal__d--in,.ahb-cal__d--out,
	.ahb-cal__d--in:hover,.ahb-cal__d--out:hover{
		background-color:var(--ahb-primary)!important;color:#fff!important}
	.ahb-cal__d--range,.ahb-cal__d--range:hover{
		background-color:rgba(72,153,58,.14)!important;color:var(--ahb-ink)!important}
	/* A strike-through on every unavailable day made the grid look damaged.
	   A muted number with a thin diagonal reads as "taken" far more calmly. */
	.ahb-cal__d[disabled]{color:#cbd5e1;cursor:not-allowed;text-decoration:none}
	.ahb-cal__d[disabled]:not(.ahb-cal__d--empty)::after{content:'';position:absolute;
		left:22%;right:22%;top:50%;height:1px;background:#e2e8f0;transform:rotate(-20deg)}
	.ahb-cal__d--empty{cursor:default;visibility:hidden}
	.ahb-cal__d--in,.ahb-cal__d--out{background:var(--ahb-primary);color:#fff;font-weight:600}
	.ahb-cal__d--range{background:rgba(72,153,58,.14);border-radius:0}
	.ahb-cal__price{position:absolute;bottom:3px;left:0;right:0;text-align:center;
		font-size:8.5px;color:#94a3b8;line-height:1;pointer-events:none}
	.ahb-cal__d--in .ahb-cal__price,.ahb-cal__d--out .ahb-cal__price{color:rgba(255,255,255,.9)}
	/* Prices need room under the number, so nudge the digit up when shown. */
	.ahb-cal__d--priced{padding-bottom:7px}
	.ahb-cal__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
		margin-top:14px;padding-top:13px;border-top:1px solid var(--ahb-line)}
	.ahb-cal__hint{font-size:12.5px;color:var(--ahb-muted)}
	.ahb-cal__clear{border:0;background:transparent;text-decoration:underline;cursor:pointer;
		font-size:13px;color:var(--ahb-ink)}
	.ahb-cal__legend{display:flex;gap:14px;font-size:11.5px;color:var(--ahb-muted);margin-top:9px}
	.ahb-cal__legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}

	/* Set by the hero before the grid is parsed, so the theme's unfiltered
	   list never appears when arriving with filters in the URL. The script
	   removes the class again when filters are cleared. */
	html.ahb-filtered .elementor-widget-loop-grid,
	html.ahb-filtered .elementor-widget-archive-posts,
	html.ahb-filtered .elementor-widget-posts,
	html.ahb-filtered [class*="elementor-widget-jet-smart-filters"]{display:none!important}

	/* ---------- results ---------- */
	.ahb-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:22px;margin-top:26px}
	/* Once relocated out of the hero band, the results sit in the normal page
	   flow and must not inherit the hero's centring or light-on-dark text. */
	.ahb-results--moved{margin:0 0 40px;width:100%}
	.ahb-status--moved{margin:6px 2px 16px;text-align:left}
	.ahb-results-anchor{display:none}

	/* Sits above the theme's own grid when guests or dates have narrowed it,
	   so the guest knows why some cards disappeared. */
	.ahb-jsf-note{font-family:var(--ahb-font-body);font-size:14.5px;color:var(--ahb-muted);
		margin:0 0 16px}
	.ahb-jsf-note:empty{display:none}

	/* Skeleton cards keep the grid's shape while results load, which reads as
	   progress rather than a stalled "Searching..." line. */
	.ahb-skel{display:block;height:262px;border-radius:16px;
		background:linear-gradient(100deg,#eef1f5 8%,#f7f9fb 20%,#eef1f5 32%);
		background-size:800px 100%;animation:ahb-shimmer 1.15s linear infinite}
	@keyframes ahb-shimmer{0%{background-position:-420px 0}100%{background-position:420px 0}}
	@media(prefers-reduced-motion:reduce){.ahb-skel{animation:none}}
	.ahb-status{font-family:var(--ahb-font-body);font-size:14.5px;color:var(--ahb-muted);margin:18px 2px}
	.ahb-status strong{color:var(--ahb-ink)}
	.ahb-status a{color:var(--ahb-primary);font-weight:600;text-decoration:underline;cursor:pointer}
	.ahb-status a:hover{color:var(--ahb-primary-dark)}
	.ahb-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--ahb-white);
		border:1px solid #ececec;border-radius:16px;overflow:hidden;transition:transform .16s ease,box-shadow .16s ease}
	.ahb-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(15,23,42,.12)}
	.ahb-card__img{width:100%;height:178px;object-fit:cover;display:block;background:var(--ahb-wash)}
	.ahb-card__body{padding:14px 16px 17px;display:flex;flex-direction:column;gap:6px}
	.ahb-card__title{font-family:var(--ahb-font-head);font-size:16px;font-weight:600;line-height:1.32;color:var(--ahb-ink)}
	.ahb-card__meta{font-family:var(--ahb-font-body);font-size:13px;color:#64748b}
	.ahb-card__price{font-family:var(--ahb-font-body);font-size:14.5px;color:var(--ahb-ink);margin-top:2px}
	.ahb-card__price strong{font-size:17px}
	.ahb-card__note{font-size:12px;color:#8a6d3b}

	/* ---------- villa sidebar calendar ---------- */
	.ahb-side{font-family:var(--ahb-font-body);background:var(--ahb-white);border:1px solid var(--ahb-line);
		border-radius:16px;padding:20px;margin-bottom:18px}
	.ahb-side__title{font-family:var(--ahb-font-head);font-size:19px;font-weight:600;
		color:var(--ahb-ink);margin:0 0 4px}
	.ahb-side__sub{font-size:13px;color:#64748b;margin:0 0 14px}
	.ahb-side .ahb-cal__months{flex-direction:column;gap:20px}
	.ahb-side .ahb-cal__m{width:100%}
	.ahb-side__summary{margin-top:15px;padding-top:14px;border-top:1px solid var(--ahb-line)}
	.ahb-side__row{display:flex;justify-content:space-between;font-size:14px;color:var(--ahb-muted);padding:5px 0}
	.ahb-side__total{display:flex;justify-content:space-between;font-size:16.5px;font-weight:700;
		color:var(--ahb-ink);padding-top:11px;margin-top:7px;border-top:1px solid var(--ahb-line)}
	.ahb-side__msg{font-size:13px;color:#8a6d3b;margin-top:9px}
	.ahb-side__cta{display:block;width:100%;margin-top:14px;padding:13px;border:0;border-radius:10px;
		background:var(--ahb-primary);color:#fff;font-size:15px;font-weight:600;cursor:pointer;text-align:center}
	.ahb-side__cta:hover{background:var(--ahb-primary-dark)}
	.ahb-side__cta[disabled]{background:#cbd5e1;cursor:not-allowed}

	/* Two months need ~600px. Below that, show one month rather than
	   letting the second overlap. */
	@media(max-width:1024px){
		.ahb-cal__m:nth-child(2){display:none}
	}

	@media(max-width:900px){
		/* Break out of whatever narrow column the page builder puts this in.
		   Measured on an iPhone 13: the bar was 210px wide inside a 390px
		   screen. Widening .ahb-hero alone does nothing, because the width is
		   set on the Elementor widget three levels up and a child cannot be
		   wider than its parent. Each wrapper between the two has to be opened
		   out, so climb from the hero and clear them all. */
		.ahb-hero{max-width:none;width:100%;margin-left:0;margin-right:0}
		/* Set by script on each wrapper between the hero and the first
		   full-width ancestor. A stylesheet cannot do it: the width lives in
		   Elementor's own per-widget CSS, which is more specific than anything
		   that can be written here without knowing the widget's id. */
		.ahb-hero-wide{width:100%!important;max-width:100%!important;
			margin-left:0!important;margin-right:0!important;
			padding-left:0!important;padding-right:0!important}
		.ahb-hero__bar{flex-direction:column;border-radius:18px;padding:5px;
			width:100%;box-sizing:border-box}
		.ahb-hero__cell{border-right:0;border-bottom:1px solid var(--ahb-line);
			border-radius:0!important;padding:15px 18px;flex:1 1 auto!important;
			width:100%;box-sizing:border-box;min-height:60px}
		.ahb-hero__cell:last-of-type{border-bottom:0}
		.ahb-hero__go{margin:10px;justify-content:center;padding:16px;
			width:calc(100% - 20px);box-sizing:border-box}
		/* A dropdown under the field that was tapped, not a bottom sheet.
		   The sheet worked, but it moved the bar to the top of the screen the
		   moment a field was tapped, which reads as the page jumping about. A
		   field should behave the same way on a phone as on a desktop: open
		   directly beneath itself and leave everything else where it is.
		   Position comes from script, since the panel is on <body> and has to
		   be told where its cell is. */
		.ahb-pop,.ahb-pop--dates{position:fixed;top:auto;left:12px;right:12px;
			transform:none;border-radius:14px;
			max-width:calc(100vw - 24px);z-index:100001;
			padding:14px 14px calc(14px + env(safe-area-inset-bottom));
			box-shadow:0 14px 40px rgba(15,23,42,.24);
			/* The panel scrolls, the page behind it does not. Height is set by
			   script from the room actually available, so no max-height here:
			   one would override the measurement and either overflow the
			   screen or hide options that are meant to be reachable. */
			overflow-y:auto;overflow-x:hidden;
			-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
		/* A visible scrollbar, because an invisible one on a phone leaves no
		   sign that there is more below. */
		.ahb-pop::-webkit-scrollbar{width:5px}
		.ahb-pop::-webkit-scrollbar-thumb{background:rgba(15,23,42,.28);border-radius:4px}
		.ahb-pop::-webkit-scrollbar-track{background:transparent}
		/* Faint backdrop only, so it is obvious a tap outside will close it,
		   without the page appearing to change mode. */
		.ahb-hero--sheet::before{content:'';position:fixed;inset:0;
			background:rgba(15,23,42,.18);z-index:100000}
		/* The bar stays exactly where it is. Only the open cell is lifted, so
		   the dropdown appears to belong to it rather than floating over the
		   form. */
		.ahb-hero--sheet .ahb-hero__cell--open{background:var(--ahb-wash,#F0F5FA);
			position:relative;z-index:100002}
		/* Descenders were being cut off once rows got short: "Any" rendered as
		   "Anv". A line-height under about 1.35 on a 15px face leaves no room
		   for the tail of a y or a g. */
		.ahb-hero__value,.ahb-hero__label{line-height:1.45;overflow:visible}
		/* Height comes from script, which measures the room below the field.
		   The desktop rule caps this at 340px; on a phone that is both too
		   short for a long list and unrelated to where the field actually sits,
		   so it is released here and the measured value applies instead. */
		.ahb-pop--list{min-width:0;max-height:none}
		.ahb-cal__months{flex-direction:column;gap:20px;align-items:center}
		.ahb-cal__m,.ahb-cal__m:nth-child(2){width:100%;flex:1 1 auto;display:block;max-width:330px}
		.ahb-cal__dow,.ahb-cal__grid{grid-template-columns:repeat(7,1fr)}
		.ahb-cal__d{width:100%;aspect-ratio:1;height:auto}
		.ahb-results{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
	}