/* ============================================================
   CyberAce Header Footer  v4.0
   ============================================================ */

:root {
	--cahf-accent:        #6c47ff;
	--cahf-accent-rgb:    108,71,255;
	--cahf-panel-rgb:     18,18,30;
	--cahf-panel-opacity: .9;
	--cahf-text:          #1a1a2e;
	--cahf-muted:         #64647a;
	--cahf-border:        rgba(0,0,0,.08);
	--cahf-radius:        10px;
	--cahf-shadow:        0 8px 40px rgba(0,0,0,.18);
	--cahf-ease:          cubic-bezier(.4,0,.2,1);
	--cahf-speed:         .28s;
	--cahf-panel-w:       360px;
	--cahf-panel-text:    #ffffff;
	--cahf-panel-muted:   rgba(255,255,255,.5);
	--cahf-panel-border:  rgba(255,255,255,.09);
	--cahf-panel-bg:      rgba(var(--cahf-panel-rgb), var(--cahf-panel-opacity));
	--cahf-panel-shadow:  0 8px 32px rgba(0,0,0,.15), inset 0 1px 1px rgba(255,255,255,.2);
}

/* ══ Header ══════════════════════════════════════════════════ */
.cahf-header {
	width: 100%; z-index: 999; position: relative;
	box-shadow: 0 1px 0 var(--cahf-border);
}
.cahf-header.cahf-sticky { position: sticky; top: 0; }
/* fake glassmorphism: no backdrop-filter, uses box-shadow trick */
.cahf-header.cahf-glass {
	box-shadow: 0 8px 32px rgba(0,0,0,.15), inset 0 1px 1px rgba(255,255,255,.2), 0 1px 0 var(--cahf-border);
}

.cahf-header-inner {
	display: flex; align-items: center; justify-content: space-between;
	max-width: 1280px; margin: 0 auto; padding: 12px 24px; gap: 16px;
}

/* ══ Logo ════════════════════════════════════════════════════ */
.cahf-logo img { max-height: 44px; display: block; }
.cahf-logo a   { text-decoration: none; font-size: 20px; font-weight: 800; color: inherit; letter-spacing: -.4px; }
.cahf-logo--panel img { max-height: 36px; }
.cahf-logo--panel .cahf-logo-text { color: #fff; font-size: 18px; font-weight: 800; text-decoration: none; }

/* ══ Desktop nav — only > 1024px ════════════════════════════ */
.cahf-desktop-menu { display: flex; }
.cahf-menu-list {
	display: flex; list-style: none; margin: 0; padding: 0; gap: 2px; align-items: center;
}
.cahf-menu-list > li { position: relative; }
.cahf-menu-list > li > a {
	display: block; text-decoration: none; color: var(--cahf-text);
	font-size: 14.5px; font-weight: 500; padding: 7px 13px; border-radius: 7px;
	white-space: nowrap;
	transition: background var(--cahf-speed) var(--cahf-ease), color var(--cahf-speed) var(--cahf-ease);
}
.cahf-menu-list > li > a:hover,
.cahf-menu-list > li.current-menu-item > a,
.cahf-menu-list > li.current-menu-ancestor > a {
	background: rgba(var(--cahf-accent-rgb),.09); color: var(--cahf-accent);
}
/* desktop sub-menu */
.cahf-menu-list > li > .sub-menu {
	position: absolute; top: calc(100% + 8px); left: 0; min-width: 210px;
	background: #fff; border: 1px solid var(--cahf-border); border-radius: var(--cahf-radius);
	box-shadow: var(--cahf-shadow); list-style: none; margin: 0; padding: 6px; z-index: 200;
	opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none;
	transition: opacity var(--cahf-speed) var(--cahf-ease), transform var(--cahf-speed) var(--cahf-ease), visibility var(--cahf-speed) var(--cahf-ease);
}
.cahf-menu-list > li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.cahf-menu-list .sub-menu li { list-style: none; }
.cahf-menu-list .sub-menu li a {
	display: block; text-decoration: none; color: var(--cahf-text);
	font-size: 14px; padding: 8px 12px; border-radius: 6px;
	transition: background var(--cahf-speed), color var(--cahf-speed);
}
.cahf-menu-list .sub-menu li a:hover { background: rgba(var(--cahf-accent-rgb),.08); color: var(--cahf-accent); }
.cahf-menu-list .sub-menu .sub-menu { top: 0; left: 100%; margin-left: 6px; }

/* mega menu */
.cahf-mega-enabled .cahf-menu-list > li.cahf-has-mega { position: static; }
.cahf-mega-enabled .cahf-menu-list > li.cahf-has-mega > .sub-menu {
	left: 0; width: 100%; max-width: 900px;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 0; padding: 16px;
}
.cahf-mega-enabled .cahf-menu-list > li.cahf-has-mega > .sub-menu > li { padding: 8px 12px; border-right: 1px solid var(--cahf-border); }
.cahf-mega-enabled .cahf-menu-list > li.cahf-has-mega > .sub-menu > li:last-child { border-right: none; }
.cahf-mega-enabled .cahf-menu-list > li.cahf-has-mega > .sub-menu > li > a { font-weight: 700; font-size: 11px; color: var(--cahf-muted); text-transform: uppercase; letter-spacing: .08em; padding: 4px 0 8px; border-radius: 0; }
.cahf-mega-enabled .cahf-menu-list > li.cahf-has-mega > .sub-menu .sub-menu { position: static; box-shadow: none; border: none; padding: 0; opacity: 1; transform: none; pointer-events: auto; visibility: visible; background: none; }

/* ══ Header actions ══════════════════════════════════════════ */
.cahf-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ══ Phone button ════════════════════════════════════════════ */
.cahf-phone-btn {
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%; text-decoration: none;
	color: var(--cahf-accent);
	background: rgba(var(--cahf-accent-rgb),.1);
	box-shadow: 0 2px 8px rgba(var(--cahf-accent-rgb),.15);
	transition: background var(--cahf-speed), transform var(--cahf-speed), box-shadow var(--cahf-speed);
	flex-shrink: 0;
}
.cahf-phone-btn:hover { background: rgba(var(--cahf-accent-rgb),.2); transform: scale(1.08); box-shadow: 0 4px 14px rgba(var(--cahf-accent-rgb),.25); }
.cahf-phone-btn svg { width: 17px; height: 17px; }

/* ══ Book Now button ═════════════════════════════════════════ */
.cahf-book-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 9px 20px; text-decoration: none; font-weight: 700; font-size: 14px;
	border-radius: 8px; cursor: pointer; border: none; white-space: nowrap;
	background: var(--cahf-accent); color: #fff;
	box-shadow: 0 2px 14px rgba(var(--cahf-accent-rgb),.38);
	transition: transform var(--cahf-speed), box-shadow var(--cahf-speed), background var(--cahf-speed);
}
.cahf-book-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 22px rgba(var(--cahf-accent-rgb),.48); color: #fff; }

/* ══ Hamburger toggle ════════════════════════════════════════ */
.cahf-mobile-toggle {
	display: none; flex-direction: column; justify-content: center; align-items: center;
	gap: 5px; width: 40px; height: 40px;
	background: rgba(var(--cahf-accent-rgb),.08);
	border: none; border-radius: 8px; cursor: pointer; padding: 0; flex-shrink: 0;
	transition: background var(--cahf-speed) var(--cahf-ease);
}
.cahf-mobile-toggle:hover { background: rgba(var(--cahf-accent-rgb),.16); }
.cahf-mobile-toggle span {
	display: block; width: 18px; height: 2px; background: var(--cahf-accent);
	border-radius: 2px; transform-origin: center;
	transition: transform var(--cahf-speed) var(--cahf-ease), opacity var(--cahf-speed) var(--cahf-ease), width var(--cahf-speed) var(--cahf-ease);
}
.cahf-mobile-toggle.cahf-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cahf-mobile-toggle.cahf-open span:nth-child(2) { opacity: 0; width: 0; }
.cahf-mobile-toggle.cahf-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══ Shared overlay ══════════════════════════════════════════ */
.cahf-offcanvas-overlay {
	position: fixed; inset: 0; background: rgba(0,0,0,.55);
	z-index: 1000; opacity: 0; visibility: hidden;
	transition: opacity var(--cahf-speed) var(--cahf-ease), visibility var(--cahf-speed) var(--cahf-ease);
}
.cahf-offcanvas-overlay.cahf-open { opacity: 1; visibility: visible; }
/* subtle overlay for open-door */
.cahf-overlay-subtle { background: rgba(0,0,0,.2); }

/* ══ Panel chrome (shared) ═══════════════════════════════════ */
.cahf-offcanvas {
	position: fixed; top: 0; width: var(--cahf-panel-w); height: 100%; max-height: 100vh;
	background: var(--cahf-panel-bg);
	box-shadow: var(--cahf-panel-shadow);
	z-index: 1001; display: flex; flex-direction: column; overflow: hidden;
	transition: transform var(--cahf-speed) var(--cahf-ease);
}
.cahf-offcanvas-right { right: 0; transform: translateX(105%); }
.cahf-offcanvas-left  { left: 0;  transform: translateX(-105%); }
.cahf-offcanvas.cahf-open { transform: translateX(0); }

/* panel header strip — logo + close only */
.cahf-offcanvas-header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 20px; border-bottom: 1px solid var(--cahf-panel-border);
	flex-shrink: 0;
}
.cahf-offcanvas-close {
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; background: rgba(255,255,255,.1);
	border: none; border-radius: 50%; cursor: pointer; color: #fff; flex-shrink: 0;
	transition: background var(--cahf-speed), transform var(--cahf-speed);
}
.cahf-offcanvas-close:hover { background: rgba(255,255,255,.2); transform: rotate(90deg); }
.cahf-offcanvas-close svg { width: 16px; height: 16px; }

/* scrollable body — fits viewport, no overflow */
.cahf-offcanvas-body {
	padding: 8px 20px;
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	min-height: 0; /* critical for flex scroll */
}

/* pinned footer */
.cahf-offcanvas-footer {
	padding: 16px 20px 24px;
	border-top: 1px solid var(--cahf-panel-border);
	flex-shrink: 0;
	overflow-y: auto;
}

/* ══ Panel list shared ═══════════════════════════════════════ */
.cahf-offcanvas-list,
.cahf-sheet-list,
.cahf-fullscreen-list,
.cahf-opendoor-list,
.cahf-dropdown-list { list-style: none; margin: 0; padding: 0; }

/* stagger base state */
.cahf-offcanvas-list > li,
.cahf-sheet-list > li,
.cahf-opendoor-list > li {
	border-bottom: 1px solid var(--cahf-panel-border);
	opacity: 0; transform: translateX(20px);
	transition: opacity .28s var(--cahf-ease), transform .28s var(--cahf-ease);
}
.cahf-offcanvas-list > li:last-child,
.cahf-sheet-list > li:last-child,
.cahf-opendoor-list > li:last-child { border-bottom: none; }

/* stagger-in */
.cahf-open .cahf-offcanvas-list > li,
.cahf-open .cahf-sheet-list > li,
.cahf-open .cahf-opendoor-list > li { opacity: 1; transform: translateX(0); }
.cahf-open .cahf-offcanvas-list > li:nth-child(1),
.cahf-open .cahf-sheet-list > li:nth-child(1),
.cahf-open .cahf-opendoor-list > li:nth-child(1) { transition-delay: .05s; }
.cahf-open .cahf-offcanvas-list > li:nth-child(2),
.cahf-open .cahf-sheet-list > li:nth-child(2),
.cahf-open .cahf-opendoor-list > li:nth-child(2) { transition-delay: .10s; }
.cahf-open .cahf-offcanvas-list > li:nth-child(3),
.cahf-open .cahf-sheet-list > li:nth-child(3),
.cahf-open .cahf-opendoor-list > li:nth-child(3) { transition-delay: .15s; }
.cahf-open .cahf-offcanvas-list > li:nth-child(4),
.cahf-open .cahf-sheet-list > li:nth-child(4),
.cahf-open .cahf-opendoor-list > li:nth-child(4) { transition-delay: .20s; }
.cahf-open .cahf-offcanvas-list > li:nth-child(5),
.cahf-open .cahf-sheet-list > li:nth-child(5),
.cahf-open .cahf-opendoor-list > li:nth-child(5) { transition-delay: .25s; }
.cahf-open .cahf-offcanvas-list > li:nth-child(n+6),
.cahf-open .cahf-sheet-list > li:nth-child(n+6),
.cahf-open .cahf-opendoor-list > li:nth-child(n+6) { transition-delay: .30s; }

/* top-level links */
.cahf-offcanvas-list > li > a,
.cahf-sheet-list > li > a,
.cahf-opendoor-list > li > a {
	display: block; text-decoration: none; color: var(--cahf-panel-text);
	font-size: 16px; font-weight: 500; padding: 14px 4px;
	transition: color var(--cahf-speed);
}
.cahf-offcanvas-list > li > a:hover,
.cahf-sheet-list > li > a:hover,
.cahf-opendoor-list > li > a:hover { color: var(--cahf-accent); }

/* accordion row */
.cahf-mobile-item-row {
	display: flex; align-items: center; justify-content: space-between;
	color: var(--cahf-panel-text); font-size: 16px; font-weight: 500; padding: 14px 4px;
}
.cahf-mobile-item-row > a { color: inherit; text-decoration: none; flex: 1; }
.cahf-mobile-item-row > a:hover,
.cahf-mobile-item-row:hover { color: var(--cahf-accent); }

/* accordion arrow */
.cahf-accordion-arrow {
	display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; background: rgba(255,255,255,.08);
	border-radius: 7px; flex-shrink: 0; cursor: pointer;
	transition: background var(--cahf-speed);
}
.cahf-accordion-arrow svg {
	width: 14px; height: 14px; fill: none;
	stroke: rgba(255,255,255,.55); stroke-width: 2;
	stroke-linecap: round; stroke-linejoin: round;
	transition: transform var(--cahf-speed), stroke var(--cahf-speed);
}
.cahf-accordion-arrow.cahf-open { background: rgba(var(--cahf-accent-rgb),.25); }
.cahf-accordion-arrow.cahf-open svg { transform: rotate(180deg); stroke: var(--cahf-accent); }

/* sub-accordion */
.cahf-sub-accordion { list-style: none; margin: 0; padding: 0 0 6px 16px; display: none; }
.cahf-sub-accordion.cahf-open { display: block; }
.cahf-sub-accordion li { border: none !important; }
.cahf-sub-accordion li a {
	display: block; text-decoration: none; color: var(--cahf-panel-muted);
	font-size: 14px; padding: 9px 4px; border-radius: 6px;
	transition: color var(--cahf-speed), background var(--cahf-speed);
}
.cahf-sub-accordion li a:hover { color: var(--cahf-accent); background: rgba(var(--cahf-accent-rgb),.1); }
.cahf-sub-accordion .cahf-mobile-item-row { padding: 9px 4px; font-size: 14px; color: var(--cahf-panel-muted); }

/* ══ Panel extras ════════════════════════════════════════════ */
.cahf-panel-section { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--cahf-panel-border); }
.cahf-panel-section:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.cahf-panel-section-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--cahf-panel-muted); margin-bottom: 10px; }
.cahf-extra-row {
	display: flex; align-items: flex-start; gap: 9px;
	color: var(--cahf-panel-text); text-decoration: none; font-size: 13.5px; padding: 4px 0;
	transition: color var(--cahf-speed);
}
.cahf-extra-row:hover { color: var(--cahf-accent); }
.cahf-extra-row svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--cahf-accent); }
.cahf-hours-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--cahf-panel-text); padding: 4px 0; gap: 12px; }
.cahf-hours-row span:first-child { color: var(--cahf-panel-muted); }
.cahf-hours-row span:last-child  { font-weight: 500; }

/* ══════════════════════════════════════════════════════════════
   TABLET + MOBILE  ≤ 1024px
══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {
	:root { --cahf-panel-w: 480px; }
}

@media (max-width: 1024px) {
	.cahf-desktop-menu  { display: none !important; }
	.cahf-mobile-toggle { display: flex; }

	/* ── Fullscreen overlay ── */
	.cahf-fullscreen-overlay {
		position: fixed; inset: 0; z-index: 1001;
		background: var(--cahf-panel-bg);
		box-shadow: var(--cahf-panel-shadow);
		display: flex; flex-direction: column;
		opacity: 0; visibility: hidden; transform: scale(1.03);
		transition: opacity var(--cahf-speed) var(--cahf-ease), transform var(--cahf-speed) var(--cahf-ease), visibility var(--cahf-speed) var(--cahf-ease);
	}
	.cahf-fullscreen-overlay.cahf-open { opacity: 1; visibility: visible; transform: scale(1); }

	.cahf-fullscreen-list > li {
		border-bottom: 1px solid var(--cahf-panel-border);
		opacity: 0; transform: translateY(14px);
		transition: opacity .3s var(--cahf-ease), transform .3s var(--cahf-ease);
	}
	.cahf-fullscreen-list > li:last-child { border-bottom: none; }
	.cahf-fullscreen-overlay.cahf-open .cahf-fullscreen-list > li { opacity: 1; transform: translateY(0); }
	.cahf-fullscreen-overlay.cahf-open .cahf-fullscreen-list > li:nth-child(1) { transition-delay: .06s; }
	.cahf-fullscreen-overlay.cahf-open .cahf-fullscreen-list > li:nth-child(2) { transition-delay: .12s; }
	.cahf-fullscreen-overlay.cahf-open .cahf-fullscreen-list > li:nth-child(3) { transition-delay: .18s; }
	.cahf-fullscreen-overlay.cahf-open .cahf-fullscreen-list > li:nth-child(4) { transition-delay: .24s; }
	.cahf-fullscreen-overlay.cahf-open .cahf-fullscreen-list > li:nth-child(n+5) { transition-delay: .30s; }
	.cahf-fullscreen-list > li > a,
	.cahf-fullscreen-list .cahf-mobile-item-row { color: #fff; font-size: 22px; font-weight: 700; padding: 16px 0; }
	.cahf-fullscreen-list > li > a:hover { color: rgba(255,255,255,.65); }

	/* ── Bottom sheet ── */
	.cahf-bottom-sheet {
		position: fixed; bottom: 0; left: 0; width: 100%; max-height: 82vh;
		background: var(--cahf-panel-bg);
		box-shadow: 0 -4px 32px rgba(0,0,0,.3), var(--cahf-panel-shadow);
		border-radius: 20px 20px 0 0;
		z-index: 1001; display: flex; flex-direction: column;
		transform: translateY(100%);
		transition: transform var(--cahf-speed) var(--cahf-ease);
	}
	.cahf-bottom-sheet.cahf-open { transform: translateY(0); }
	.cahf-bottom-sheet-handle { width: 40px; height: 4px; background: rgba(255,255,255,.2); border-radius: 2px; margin: 12px auto 0; flex-shrink: 0; }

	/* ── Bottom nav ── */
	.cahf-style-bottom_nav .cahf-bottom-nav {
		position: fixed; bottom: 0; left: 0; width: 100%;
		background: var(--cahf-panel-bg); box-shadow: var(--cahf-panel-shadow); z-index: 1000;
	}
	.cahf-bottom-nav-list { display: flex; justify-content: space-around; list-style: none; margin: 0; padding: 8px 4px 14px; }
	.cahf-bottom-nav-list .sub-menu { display: none !important; }
	.cahf-bottom-nav-list > li { flex: 1; }
	.cahf-bottom-nav-list > li > a {
		display: flex; flex-direction: column; align-items: center;
		text-decoration: none; color: var(--cahf-panel-muted);
		font-size: 11px; font-weight: 500; gap: 3px; padding: 4px 2px; border-radius: 8px;
		transition: color var(--cahf-speed);
	}
	.cahf-bottom-nav-list > li > a:hover,
	.cahf-bottom-nav-list > li > a.cahf-active,
	.cahf-bottom-nav-list > li.current-menu-item > a { color: var(--cahf-accent); font-weight: 700; }

	/* ── Dropdown ── */
	.cahf-style-dropdown .cahf-dropdown-menu {
		max-height: 0; overflow: hidden; width: 100%;
		background: var(--cahf-panel-bg); box-shadow: var(--cahf-panel-shadow);
		border-top: 1px solid var(--cahf-panel-border);
		transition: max-height .38s var(--cahf-ease);
	}
	.cahf-style-dropdown .cahf-dropdown-menu.cahf-open { max-height: 85vh; overflow-y: auto; }
	.cahf-dropdown-inner { padding: 8px 20px 50px; }
	.cahf-dropdown-list > li { border-bottom: 1px solid var(--cahf-panel-border); }
	.cahf-dropdown-list > li:last-child { border-bottom: none; }
	.cahf-dropdown-list > li > a,
	.cahf-dropdown-list .cahf-mobile-item-row { color: var(--cahf-panel-text); font-size: 15px; font-weight: 500; padding: 13px 4px; display: block; text-decoration: none; transition: color var(--cahf-speed); }
	.cahf-dropdown-list > li > a:hover { color: var(--cahf-accent); }
	.cahf-dropdown-list .cahf-mobile-item-row { display: flex; align-items: center; justify-content: space-between; }

	/* ── Open Door (full-width slide-in from right, matching hamburger style) ── */
	.cahf-opendoor-panel {
		position: fixed;
		top: 0; right: 0;
		width: min(420px, 100vw);
		height: 100%;
		background: var(--cahf-panel-bg);
		box-shadow: -4px 0 40px rgba(0,0,0,.35);
		z-index: 1001;
		display: flex; flex-direction: column;
		overflow: hidden;
		transform: translateX(100%);
		opacity: 1; visibility: hidden;
		transition: transform .32s var(--cahf-ease), visibility .32s var(--cahf-ease);
	}
	.cahf-opendoor-panel.cahf-open {
		transform: translateX(0);
		visibility: visible;
	}
	/* open-door body scroll */
	.cahf-opendoor-panel .cahf-offcanvas-body {
		overflow-y: auto;
		overflow-x: hidden;
	}
	.cahf-opendoor-panel .cahf-offcanvas-footer { padding-bottom: 24px; }
}

/* ══ Desktop: hide all mobile panels ════════════════════════ */
@media (min-width: 1025px) {
	.cahf-offcanvas,
	.cahf-fullscreen-overlay,
	.cahf-bottom-sheet,
	.cahf-offcanvas-overlay,
	.cahf-bottom-nav,
	.cahf-dropdown-menu,
	.cahf-opendoor-panel { display: none !important; }
	.cahf-mobile-toggle { display: none !important; }
}