/* ===================================================================
   Ocean Sun Theme — Navigation
   Header, mega-menu, mobile nav, sticky elements
   =================================================================== */

/* ── Top Utility Bar ── */

.os-topbar {
  background-color: var(--os-primary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--os-font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.os-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px var(--os-space-4);
}

@media (min-width: 768px) {
  .os-topbar__inner {
    padding: 8px var(--os-space-8);
  }
}

.os-topbar__left,
.os-topbar__right {
  display: flex;
  align-items: center;
  gap: var(--os-space-3);
}

/* Vertical dividers between topbar groups */
.os-topbar__right > * + * {
  position: relative;
  margin-left: var(--os-space-1);
}

.os-topbar__right > * + *::before {
  content: "";
  position: absolute;
  left: calc(var(--os-space-1) * -1 - 1px);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.15);
}

/* Language Links */
.os-topbar__lang {
  display: flex;
  align-items: center;
  gap: 2px;
}

.os-topbar__lang-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  border-radius: var(--os-radius-sm);
  transition: all var(--os-transition-fast);
  line-height: 1;
}

.os-topbar__lang-link:hover,
.os-topbar__lang-link.is-active {
  color: var(--os-text-white);
  background: rgba(255, 255, 255, 0.1);
}

.os-topbar__lang-link img {
  border-radius: 2px;
  display: block;
}

/* All language links show their text label */
.os-topbar__lang-link span {
  display: inline;
}

/* Currency Switcher */
.os-topbar__currency {
  position: relative;
}

.os-topbar__currency-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--os-radius-md);
  color: var(--os-text-white);
  font-family: var(--os-font-body);
  font-size: var(--os-text-xs);
  font-weight: var(--os-font-body-medium);
  cursor: pointer;
  transition: all var(--os-transition-fast);
}

.os-topbar__currency-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

.os-topbar__currency-btn svg {
  transition: transform var(--os-transition-fast);
}

.os-topbar__currency-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.os-topbar__currency-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 80px;
  background: var(--os-bg-white);
  border: 1px solid var(--os-border);
  border-radius: var(--os-radius-md);
  box-shadow: var(--os-shadow-lg);
  z-index: 1001;
  overflow: hidden;
}

.os-topbar__currency-dropdown.is-open {
  display: block;
}

.os-topbar__currency-option {
  display: block;
  padding: 8px 14px;
  font-size: var(--os-text-xs);
  font-weight: var(--os-font-body-medium);
  color: var(--os-text-body);
  text-decoration: none;
  transition: background var(--os-transition-fast);
}

.os-topbar__currency-option:hover {
  background: var(--os-bg-cream);
}

.os-topbar__currency-option.is-active {
  color: var(--os-cta);
  font-weight: var(--os-font-body-semibold);
}

.os-topbar__currency-label {
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--os-radius-md);
  color: var(--os-text-white);
  font-weight: var(--os-font-body-medium);
}

/* Mini Cart */
.os-topbar__cart {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color var(--os-transition-fast);
}

.os-topbar__cart:hover {
  color: var(--os-text-white);
}

.os-topbar__cart-count {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--os-cta);
  color: var(--os-text-white);
  font-size: 10px;
  font-weight: var(--os-font-body-semibold);
  line-height: 16px;
  text-align: center;
  border-radius: var(--os-radius-full);
}

/* Login / Account */
.os-topbar__login {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  color: rgba(255, 255, 255, 0.85);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--os-radius-sm);
  font-size: 13px;
  font-weight: var(--os-font-body-medium);
  text-decoration: none;
  transition: all 0.2s ease;
}

.os-topbar__login:hover {
  border-color: rgba(255, 255, 255, 0.8);
  color: var(--os-text-white);
}

.os-topbar__terminal {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.2s;
}

.os-topbar__terminal:hover {
  color: var(--os-text-white);
}

/* Hide topbar on mobile — show compact in mobile nav instead */
@media (max-width: 767px) {
  .os-topbar {
    display: none;
  }
}

/* ── Site Header ── */

.os-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--os-primary);
  box-shadow: var(--os-shadow-sm);
}

.os-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--os-space-4);
}

@media (min-width: 768px) {
  .os-header__inner {
    padding: 0 var(--os-space-8);
  }
}

/* ── Logo ── */

.os-header__logo {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 100%;
}

.os-header__logo img,
.os-header__logo .custom-logo {
  height: 52px;
  width: auto;
  max-height: 52px;
  object-fit: contain;
}

/* Invisible overlay link covers the logo area */
.os-header__logo-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ── Desktop Navigation ── */

.os-nav {
  display: none;
  align-items: center;
  gap: var(--os-space-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 1024px) {
  .os-nav {
    display: flex;
  }
}

.os-nav__item {
  position: relative;
}

.os-nav__link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  font-family: var(--os-font-body);
  font-size: 15px;
  font-weight: var(--os-font-body-medium);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.os-nav__link:hover {
  color: rgba(255, 255, 255, 1);
}

.os-nav__link[aria-expanded="true"] {
  color: var(--os-text-white);
  border-bottom-color: var(--os-cta);
}

/* Active page nav item */
.os-nav__item.current-menu-item > .os-nav__link,
.os-nav__item.current-menu-ancestor > .os-nav__link,
.os-nav__item.current-page-ancestor > .os-nav__link {
  color: var(--os-text-white);
  border-bottom-color: var(--os-cta);
}

.os-nav__arrow {
  width: 10px;
  height: 10px;
  transition: transform var(--os-transition-fast);
}

.os-nav__link[aria-expanded="true"] .os-nav__arrow {
  transform: rotate(180deg);
}

/* ── Mega Menu ── */

.os-mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--os-bg-white);
  border: none;
  border-top: 2px solid var(--os-cta);
  border-radius: 0 0 var(--os-radius-md) var(--os-radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: var(--os-space-6);
  margin-top: 0;
}

/* Show dropdown on hover — simple list by default */
.os-nav__item:hover > .os-mega-menu,
.os-mega-menu:hover {
  display: flex;
  flex-direction: column;
  min-width: 200px;
  gap: 0;
}

/* Multi-column grid mega menu (class set by walker for "os-mega" items) */
.os-nav__item:hover > .os-mega-menu--grid,
.os-mega-menu--grid:hover {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-width: 660px;
  gap: var(--os-space-8);
}

/* Column — wraps group title + all links for one section */
.os-mega-menu__column {
  display: flex;
  flex-direction: column;
}

/* Group title — uppercase label */
.os-mega-menu__group-title {
  display: block;
  font-size: var(--os-text-xs);
  font-weight: var(--os-font-body-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--os-text-muted);
  margin-bottom: var(--os-space-3);
  padding-bottom: var(--os-space-2);
  border-bottom: 1px solid var(--os-border-light);
  text-decoration: none;
}

/* Linked group title (clickable) */
.os-mega-menu__group-title--link {
  transition: color var(--os-transition-fast);
}

.os-mega-menu__group-title--link:hover {
  color: var(--os-cta);
}

/* Individual links */
.os-mega-menu__link {
  display: block;
  padding: 5px 0;
  font-size: var(--os-text-sm);
  color: var(--os-text-body);
  text-decoration: none;
  transition: color var(--os-transition-fast);
}

.os-mega-menu__link:hover {
  color: var(--os-cta);
}

/* "View all" style link at end of a group */
.os-mega-menu__link--more {
  margin-top: var(--os-space-2);
  font-weight: var(--os-font-body-semibold);
  color: var(--os-cta);
  font-size: var(--os-text-xs);
}

/* ── Header Actions ── */

.os-header__actions {
  display: flex;
  align-items: center;
  gap: var(--os-space-3);
}

/* Language Switcher */
.os-lang-switcher {
  display: none;
  align-items: center;
  gap: var(--os-space-1);
}

@media (min-width: 1024px) {
  .os-lang-switcher {
    display: flex;
  }
}

.os-lang-switcher a {
  padding: 4px 8px;
  font-size: var(--os-text-xs);
  font-weight: var(--os-font-body-medium);
  color: rgba(255, 255, 255, 0.6);
  border-radius: var(--os-radius-sm);
  transition: all var(--os-transition-fast);
}

.os-lang-switcher a:hover,
.os-lang-switcher a.active {
  color: var(--os-text-white);
  background: rgba(255, 255, 255, 0.1);
}

/* Hide "Book Now" if it appears as a nav menu item (CTA button handles this) */
.os-nav__item.os-nav__cta,
.os-nav .menu-item a[href*="/accommodation/"].os-nav__cta {
  display: none;
}

/* Book Now button */
.os-header__cta {
  padding: 10px 20px;
  font-size: var(--os-text-sm);
  background-color: var(--os-cta);
  color: var(--os-text-white);
  border: none;
  border-radius: var(--os-radius-md);
  font-weight: var(--os-font-body-semibold);
  cursor: pointer;
  transition: background-color var(--os-transition-fast);
  text-decoration: none;
}

.os-header__cta:hover {
  background-color: var(--os-cta-hover);
  color: var(--os-text-white);
}

/* ── Hamburger ── */

.os-hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .os-hamburger {
    display: none;
  }
}

.os-hamburger__line {
  width: 24px;
  height: 2px;
  background-color: var(--os-text-white);
  border-radius: 1px;
  transition: all var(--os-transition-fast);
}

.os-hamburger[aria-expanded="true"] .os-hamburger__line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.os-hamburger[aria-expanded="true"] .os-hamburger__line:nth-child(2) {
  opacity: 0;
}

.os-hamburger[aria-expanded="true"] .os-hamburger__line:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ── Mobile Nav Overlay ── */

.os-mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background-color: var(--os-primary);
  padding: 80px var(--os-space-6) var(--os-space-6);
  overflow-y: auto;
}

.os-mobile-nav.is-open {
  display: block;
}

.os-mobile-nav__link {
  display: block;
  padding: 14px 0;
  font-size: var(--os-text-lg);
  font-weight: var(--os-font-body-medium);
  color: var(--os-text-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-decoration: none;
}

.os-mobile-nav__sub {
  display: none;
  padding-left: var(--os-space-4);
}

.os-mobile-nav__sub.is-open {
  display: block;
}

.os-mobile-nav__sub a {
  display: block;
  padding: 10px 0;
  font-size: var(--os-text-base);
  color: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  text-decoration: none;
}

.os-mobile-nav__sub a:hover {
  color: var(--os-text-white);
}

/* Mobile nav actions (cart, login) */
.os-mobile-nav__actions {
  display: flex;
  gap: var(--os-space-3);
  margin-top: var(--os-space-6);
  padding-top: var(--os-space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.os-mobile-nav__action-link {
  display: flex;
  align-items: center;
  gap: var(--os-space-2);
  padding: 10px 16px;
  color: var(--os-text-white);
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--os-radius-md);
  font-size: var(--os-text-sm);
  font-weight: var(--os-font-body-medium);
  text-decoration: none;
  transition: background var(--os-transition-fast);
}

.os-mobile-nav__action-link:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--os-text-white);
}

/* Language switcher in mobile */
.os-mobile-nav .os-lang-switcher {
  display: flex;
  margin-top: var(--os-space-6);
  padding-top: var(--os-space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── Hold Timer (header override) ──
   Overrides plugin timer.css styles when placed inside the header.
   Uses --os-* theme tokens instead of --osb-* plugin tokens.
   ================================================================ */

/* Wrap: inline-flex next to Book Now */
.os-header__actions .osac-hold-timer-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Base pill — compact for header, no heavy shadow */
.os-header__actions .osac-hold-timer {
  display: inline-flex;
  align-items: center;
  gap: var(--os-space-1);
  padding: 6px 14px;
  border-radius: var(--os-radius-full);
  font-family: var(--os-font-body);
  font-size: var(--os-text-xs);
  font-weight: var(--os-font-body-semibold);
  text-decoration: none;
  color: var(--os-text-white);
  line-height: 1;
  transition: all var(--os-transition-fast);
  box-shadow: none;
}

.os-header__actions .osac-hold-timer:hover {
  transform: none;
  box-shadow: none;
  text-decoration: none;
  filter: brightness(1.1);
}

/* Timer icon — smaller in header */
.os-header__actions .osac-timer-icon {
  font-size: 13px;
  line-height: 1;
}

/* Monospace countdown */
.os-header__actions .osac-timer-time {
  font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
  font-size: 13px;
  font-weight: var(--os-font-body-semibold);
  letter-spacing: 0.5px;
}

/* "Reserved" label — hide in header, too verbose */
.os-header__actions .osac-timer-label {
  display: none;
}

/* Extend button — small circle in header */
.os-header__actions .osac-hold-timer__extend {
  width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--os-radius-full);
  color: var(--os-text-white);
  font-size: 13px;
  font-weight: var(--os-font-body-semibold);
  cursor: pointer;
  transition: all var(--os-transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.os-header__actions .osac-hold-timer__extend:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
}

.os-header__actions .osac-hold-timer__extend:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ── Color States (adapted for header) ── */

/* SAFE — subtle green, not a loud gradient */
.os-header__actions .osac-timer--safe {
  background: var(--os-success);
  color: var(--os-text-white);
}

/* WARNING — amber pulse */
.os-header__actions .osac-timer--warning {
  background: var(--os-warning);
  color: var(--os-text-white);
  animation: os-pulse-warning 2s ease-in-out infinite;
}

/* CRITICAL — red, faster pulse */
.os-header__actions .osac-timer--critical {
  background: var(--os-error);
  color: var(--os-text-white);
  animation: os-pulse-critical 1s ease-in-out infinite;
}

/* EXPIRED — muted */
.os-header__actions .osac-timer--expired {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
  animation: none;
}

/* Animations — gentler for the header */
@keyframes os-pulse-warning {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.3); }
}

@keyframes os-pulse-critical {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
  50%      { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.35); }
}

/* Mobile: even more compact */
@media (max-width: 767px) {
  .os-header__actions .osac-hold-timer {
    padding: 5px 10px;
    gap: 3px;
  }

  .os-header__actions .osac-timer-icon {
    font-size: 12px;
  }

  .os-header__actions .osac-timer-time {
    font-size: 12px;
  }

  .os-header__actions .osac-hold-timer__extend {
    width: 20px;
    height: 20px;
    font-size: 12px;
  }
}

/* Old .os-sticky-bar and .os-whatsapp removed — replaced by FAB stack in components.css */