/* ESS v2 — loaded on every public page with media="not all"; theme.js flips it to
   "all" when the resolved UI version is v2. main.css stays the v1 source of truth;
   everything here is scoped to html[data-ui="v2"] as a second guard. Rollback:
   admin → Setări → Temă interfață → v1. */
@layer v2-tokens, v2-base, v2-components, v2-motion;

/* Cascade note: main.css is unlayered, and unlayered styles beat every @layer
   regardless of specificity. So the rules below are deliberately NOT inside the
   layers declared above (the order statement is kept as documentation only);
   html[data-ui="v2"] already out-specifies main.css's single-class selectors. */

/* Self-hosted (CSP font-src 'self'). Latin + latin-ext cover Romanian (șțăîâ).
   Inter is also declared in fonts.css (v1 pages that used Google Fonts); it stays here too because
   v1 login/register/profile/policy render Helvetica/Arial and must not pick Inter up in v1. */
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-latin-ext.woff2") format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin.woff2") format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-ext.woff2") format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---- tokens ---- */
/* Font tokens only for ESS: a destination skin's [data-theme] block sets its own and must win (D1). */
html[data-ui="v2"]:not([data-theme]) {
  --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-base: var(--font-body);
}
html[data-ui="v2"] {
  --font-utility: "Inter", system-ui, sans-serif;

  --tracking-display: -0.025em; --leading-display: 1.04;
  --tracking-heading: -0.012em; --leading-heading: 1.18;
  --tracking-body: 0;           --leading-body: 1.55;
  --tracking-label: 0.06em;

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --dur-press: 140ms; --dur-ui: 200ms; --dur-modal: 280ms; --dur-exit: 150ms;
  --transition: var(--dur-ui) var(--ease-out);

  --z-base: 1; --z-header: 100; --z-dropdown: 200; --z-sheet: 400;
  --z-modal: 500; --z-popover: 600; --z-toast: 700;

  --surface: #fff; --surface-sunken: #f4f6f9; --surface-raised: #fff;
  --border-subtle: rgba(10, 35, 66, .10);
  --radius-control: .625rem; --radius-card: 1rem;
  --header-h: 3.75rem;
  --tap: 2.75rem;
}

/* ---- base typography ---- */
html[data-ui="v2"] body { font-size: 1rem; line-height: var(--leading-body); }
html[data-ui="v2"] h1,
html[data-ui="v2"] .hero-title {
  font-family: var(--font-display); letter-spacing: var(--tracking-display);
  line-height: var(--leading-display); font-variation-settings: "opsz" 96;
}
html[data-ui="v2"] h2,
html[data-ui="v2"] h3,
html[data-ui="v2"] .section-title,
html[data-ui="v2"] .detail-section-title {
  font-family: var(--font-display); letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
}
/* uppercase eyebrow / label styles in main.css */
html[data-ui="v2"] .section-label,
html[data-ui="v2"] .hero-right-label,
html[data-ui="v2"] .confirm-eyebrow,
html[data-ui="v2"] .filter-title,
html[data-ui="v2"] .footer-col-title { letter-spacing: var(--tracking-label); }
/* prices */
html[data-ui="v2"] .boat-card-price,
html[data-ui="v2"] .boat-price,
html[data-ui="v2"] .hero-offer-price,
html[data-ui="v2"] .offer-card-price,
html[data-ui="v2"] .yacht-price,
html[data-ui="v2"] .extras-item-price,
html[data-ui="v2"] .bk-price-val,
html[data-ui="v2"] .bk-price-total-val,
html[data-ui="v2"] .booking-card-total,
html[data-ui="v2"] .booking-price-display,
html[data-ui="v2"] #summary-total { font-variant-numeric: tabular-nums; }

/* ======================================================================
   Components. Plain html[data-ui="v2"] selectors (see cascade note above).
   Brief selectors that matched nothing in pages/JS were dropped:
   .boat-card/.boat-card-fav (real: .yacht-card/.yacht-card-fav), .dest-card,
   see the task report for the full list.
   ====================================================================== */

/* -- press feedback -- */
html[data-ui="v2"] :is(.btn, .lang-btn, .theme-toggle-btn, .counter-btn, .load-more-btn, .compact-search-btn,
                       .social-btn, .avail-nav-btn, .bk-promo-btn, .mobile-filter-btn, .dates-prompt-btn,
                       .filter-chip, .yacht-card-fav, .link-btn, .offer-tab) {
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-ui) ease,
              color var(--dur-ui) ease, border-color var(--dur-ui) ease, box-shadow var(--dur-ui) ease;
  -webkit-tap-highlight-color: transparent;
}
/* also replaces v1's .btn:active translateY(1px) (higher specificity) */
html[data-ui="v2"] :is(.btn, .lang-btn, .counter-btn, .load-more-btn, .compact-search-btn, .social-btn,
                       .avail-nav-btn, .mobile-filter-btn, .filter-chip, .yacht-card-fav):active:not(:disabled) {
  transform: scale(.97);
}
/* skins set their own button radius (logbook/amalfi 0, fjordvik pill) */
html[data-ui="v2"]:not([data-theme]) .btn { border-radius: var(--radius-control); }

/* -- 44px tap targets on touch -- */
@media (pointer: coarse) {
  html[data-ui="v2"] :is(.btn, .lang-btn, .counter-btn, .social-btn, .avail-nav-btn, .filter-chip, .yacht-card-fav,
                         .compact-search-btn, .nav-hamburger, .offer-tab, .sidebar-toggle, .sidebar-close-btn,
                         .filter-section-toggle, .dates-prompt-btn, .load-more-btn, .mobile-filter-btn,
                         .back-to-search, .footer-link, .nav-brand, .yacht-card-model) {
    min-height: var(--tap); min-width: var(--tap);
  }
  html[data-ui="v2"] :is(.back-to-search, .footer-link, .nav-brand, .yacht-card-model, .btn) {
    display: inline-flex; align-items: center; justify-content: center;
  }
  html[data-ui="v2"] :is(.back-to-search, .footer-link, .yacht-card-model) { justify-content: flex-start; }
  html[data-ui="v2"] .compact-input { min-height: var(--tap); }
  html[data-ui="v2"] .breadcrumb a { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); }
  html[data-ui="v2"] :is(.bk-promo-btn, .bk-promo-input, .link-btn, .pax-input) { min-height: var(--tap); }
  html[data-ui="v2"] :is(.link-btn, #bk-policy-link, .bk-policy-link) { display: inline-flex; align-items: center; min-height: var(--tap); }
  /* glyph stays small; negative margin keeps the chip's size while the button grows to the tap size */
  html[data-ui="v2"] .filter-chip-remove { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap); margin: -14px -12px; }
}

/* -- hover lift only where hover exists; touch never sticks lifted -- */
@media not ((hover: hover) and (pointer: fine)) {
  html[data-ui="v2"] :is(.yacht-card, .hero-dest-card, .hero-offer-card, .feature-card, .offer-card):hover { transform: none; }
  /* back to each card's base state (v1 base shadows: none / sm) */
  html[data-ui="v2"] :is(.hero-dest-card, .hero-offer-card, .feature-card):hover { box-shadow: none; }
  /* cyclades is the one skin whose feature card has a base shadow (themes.css:269) */
  html[data-ui="v2"][data-theme="cyclades"] .feature-card:hover { box-shadow: 0 2px 12px rgba(23,82,160,.06); }
  html[data-ui="v2"] :is(.yacht-card, .offer-card):hover { box-shadow: var(--shadow-sm); }
  html[data-ui="v2"] .yacht-card:hover { border-color: var(--color-border); }
  html[data-ui="v2"] .yacht-card:hover .yacht-card-img { transform: none; }
}

/* -- cards -- */
html[data-ui="v2"] .yacht-card {
  border-radius: var(--radius-card);
  transition: box-shadow var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out);
}
/* no lift. shortcut: brief asked for a ::after shadow, but .yacht-card is overflow:hidden and would clip it;
   the card's own box-shadow fades instead */
html[data-ui="v2"] .yacht-card:hover { transform: none; }
html[data-ui="v2"] .yacht-card-img { transition: transform 250ms var(--ease-out); }

/* -- inputs -- */
html[data-ui="v2"] :is(.form-input, .form-select) {
  min-height: var(--tap); border-radius: var(--radius-control);
}
html[data-ui="v2"]:not([data-theme]) :is(.form-input, .form-select) { border-color: var(--border-subtle); }
html[data-ui="v2"] :is(.form-input, .form-select, .form-textarea):focus-visible {
  outline: 2px solid var(--color-focus); outline-offset: 2px;
}
/* hero label repeats its placeholder; stays in the a11y tree */
html[data-ui="v2"] label[data-i18n="search.placeholder"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* -- translucent header: default (ESS) theme only, so skins keep their own header colours -- */
html[data-ui="v2"]:not([data-theme]) .site-header:not(.transparent) {
  background: rgba(255, 255, 255, .94); /* ≥.92: at .78 the navy hero bled through as a grey-blue band */
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid var(--border-subtle);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-ui="v2"]:not([data-theme]) .site-header:not(.transparent) { background: #fff; }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-ui="v2"]:not([data-theme]) .site-header:not(.transparent) { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* -- search rail -- */
html[data-ui="v2"] .filter-section-title {
  border-left: 0; padding-left: 0; letter-spacing: var(--tracking-label); text-transform: uppercase;
}
html[data-ui="v2"]:not([data-theme]) .filter-section-title { color: var(--color-gray-text); }
html[data-ui="v2"] .filter-section + .filter-section { border-top: 1px solid var(--border-subtle); padding-top: 1.25rem; }
html[data-ui="v2"] .filter-apply { box-shadow: 0 -12px 16px -12px rgba(10, 35, 66, .12); }

/* -- z-index scale (v1 values collided: two 9999s, 2000 vs 1000...) -- */
html[data-ui="v2"] .site-header { z-index: var(--z-header); }
html[data-ui="v2"] .nav-overlay { z-index: calc(var(--z-header) - 1); }
html[data-ui="v2"] .skip-link { z-index: calc(var(--z-header) + 1); }
html[data-ui="v2"] .search-top-bar { z-index: calc(var(--z-header) - 3); }
html[data-ui="v2"] .search-bar-section { z-index: calc(var(--z-header) - 2); }
html[data-ui="v2"] .autocomplete-dropdown { z-index: var(--z-dropdown); }
html[data-ui="v2"] .mobile-filter-btn { z-index: var(--z-dropdown); }
html[data-ui="v2"] .sticky-cta-bar { z-index: calc(var(--z-sheet) - 2); }
html[data-ui="v2"] .sidebar-backdrop { z-index: calc(var(--z-sheet) - 1); }
@media (max-width: 767px) { html[data-ui="v2"] .search-sidebar { z-index: var(--z-sheet); } }
html[data-ui="v2"] .modal-backdrop, html[data-ui="v2"] .dest-modal-backdrop { z-index: var(--z-modal); }
html[data-ui="v2"] .dest-modal { z-index: calc(var(--z-modal) + 1); }
html[data-ui="v2"] .dp-popup { z-index: var(--z-popover); }
html[data-ui="v2"] #toast-container, html[data-ui="v2"] .theme-notify { z-index: var(--z-toast); }
html[data-ui="v2"] #offline-banner { z-index: calc(var(--z-toast) + 1); }

/* ===== Motion, materials, accessibility media (B3) =====
   Plain selectors, no @layer. Exit animations for .modal / .dialog need JS
   (element is removed/closed instantly) - not done here. */

@keyframes v2-pop-in { from { opacity: 0; transform: scale(.95); } }

/* -- hero entrance: 300ms, 0/50/100/150ms stagger (6s image zoom untouched) -- */
html[data-ui="v2"] .hero-left, html[data-ui="v2"] .hero-right,
html[data-ui="v2"] .hero-subtitle, html[data-ui="v2"] .hero-offers-hidden {
  animation-duration: 300ms; animation-timing-function: var(--ease-out);
}
html[data-ui="v2"] .hero-left { animation-delay: 0ms; }
html[data-ui="v2"] .hero-subtitle { animation-delay: 50ms; }
html[data-ui="v2"] .hero-right { animation-delay: 100ms; }
html[data-ui="v2"] .hero-offers-hidden { animation-delay: 150ms; }

/* -- modal / dialog -- */
html[data-ui="v2"] .modal, html[data-ui="v2"] .dialog[open] {
  animation: v2-pop-in var(--dur-modal) var(--ease-out) both; transform-origin: center;
}
html[data-ui="v2"] .modal-backdrop { animation-duration: var(--dur-ui); animation-timing-function: var(--ease-out); }
html[data-ui="v2"] .dialog::backdrop { animation: fade-in var(--dur-ui) var(--ease-out); }

/* -- datepicker popover -- */
html[data-ui="v2"] .dp-popup { transform-origin: top left; animation: v2-pop-in 180ms var(--ease-out) both; }

/* -- toasts / notifications (exit classes: .removing set by utils.js, .theme-notify--out by theme.js) -- */
html[data-ui="v2"] .toast { animation-duration: 250ms; animation-timing-function: var(--ease-out); }
html[data-ui="v2"] .toast.removing { animation-duration: var(--dur-exit); }
html[data-ui="v2"] .theme-notify { animation-duration: 250ms; animation-timing-function: var(--ease-out); }
html[data-ui="v2"] .theme-notify--out { animation-duration: var(--dur-exit); }
html[data-ui="v2"] .heart-pulse { animation-duration: 200ms; }

/* -- mobile filter sheet + backdrop (JS toggles .sidebar-sheet-open / .active) -- */
@media (max-width: 767px) {
  html[data-ui="v2"] .search-sidebar { transition: transform 200ms var(--ease-drawer); } /* closing */
  html[data-ui="v2"] .search-sidebar.sidebar-sheet-open { transition-duration: 340ms; } /* opening */
  /* Always in the DOM so opacity can fade; v1 toggles display:none, which cannot transition. */
  html[data-ui="v2"] .sidebar-backdrop {
    display: block; visibility: hidden; opacity: 0; pointer-events: none;
    transition: opacity var(--dur-exit) var(--ease-out), visibility 0s linear var(--dur-exit); /* closing */
  }
  html[data-ui="v2"] .sidebar-backdrop.active {
    visibility: visible; opacity: 1; pointer-events: auto;
    transition: opacity var(--dur-ui) var(--ease-out), visibility 0s; /* opening */
  }
}

/* -- reduced motion: gentler, not zero (v1 zeroes with !important, so !important is needed to beat it) -- */
@media (prefers-reduced-motion: reduce) {
  html[data-ui="v2"] *, html[data-ui="v2"] *::before, html[data-ui="v2"] *::after {
    animation-duration: 120ms !important; transition-duration: 120ms !important; /* beats v1 .01ms !important */
  }
  /* Opacity-only crossfade. .search-sidebar is excluded: its transform IS its closed state. */
  html[data-ui="v2"] :is(.modal, .dialog[open], .dp-popup, .hero-left, .hero-right, .hero-subtitle, .hero-offers-hidden) {
    transform: none !important; animation-name: fade-in !important; /* beats v1/keyframe transform */
  }
}

/* -- contrast / transparency -- */
@media (prefers-contrast: more) {
  html[data-ui="v2"] { --border-subtle: rgba(10, 35, 66, .45); --color-placeholder: #4a5568; }
  html[data-ui="v2"]:not([data-theme]) .site-header:not(.transparent) {
    background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: #0a2342;
  }
}

/* ======================================================================
   Signature: destination chart cards
   The one bold element of v2 — each landing tile reads as a chart card: a
   coordinate caption in utility type, and a navy chart grid where no photo
   exists. themes.css does not touch .hero-dest-card, so no :not([data-theme]).
   ====================================================================== */
html[data-ui="v2"] .hero-dest-card { border-radius: var(--radius-card); border-color: rgba(255,255,255,.14); }
html[data-ui="v2"] .hero-dest-monogram { display: none; } /* the coordinates replace the ghost letters */

/* Grid offset by the text inset, so a meridian runs exactly along the caption/name edge. */
html[data-ui="v2"] .hero-dest-card:not(:has(img)) {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 28px),
    linear-gradient(160deg, hsl(var(--dest-hue) 45% 26%), #0a2342);
  background-position: var(--space-3) var(--space-3), var(--space-3) var(--space-3), 0 0;
}
/* Navy, not v1's black. Grid tiles need only a light floor; over a photo the scrim is
   ≥.68 under the name, so white text holds ≥4.5:1 even over a white image. */
html[data-ui="v2"] .hero-dest-overlay { background: linear-gradient(to top, rgba(10,35,66,.45) 0%, rgba(10,35,66,0) 60%); }
html[data-ui="v2"] .hero-dest-card:has(img) .hero-dest-overlay {
  background: linear-gradient(to top, rgba(10,35,66,.9) 0%, rgba(10,35,66,.7) 38%, rgba(10,35,66,0) 72%);
}
html[data-ui="v2"] .hero-dest-name {
  font-family: var(--font-display); font-size: var(--text-base); font-weight: 600;
  letter-spacing: var(--tracking-heading); line-height: var(--leading-heading);
}
html[data-ui="v2"] .hero-dest-count { font-family: var(--font-utility); font-variant-numeric: tabular-nums; }

/* display is set here, not left to .v2-only's `revert` (inline for a span) */
html[data-ui="v2"] .dest-coords {
  position: absolute; top: var(--space-3); left: var(--space-3);
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--font-utility); font-size: var(--text-xs); font-weight: 500; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-label);
  color: #fff; opacity: .85; pointer-events: none; /* .8 dips to 4.3:1 where gridlines cross; .85 holds ≥4.6 */
}
html[data-ui="v2"] .dest-coords::before { content: ""; width: .75rem; height: 1px; background: currentColor; }
/* Over a photo the caption gets its own chip: a full-tile top scrim would bury the image. */
html[data-ui="v2"] .hero-dest-card:has(img) .dest-coords {
  top: calc(var(--space-3) - .3rem); left: calc(var(--space-3) - .5rem);
  padding: .3rem .5rem; border-radius: 999px; opacity: 1;
  background: rgba(10,35,66,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* ======================================================================
   Page passes (B5). Colour/background rules that skins also set are scoped
   :not([data-theme]) so the destination skin keeps winning (D1).
   ====================================================================== */

/* -- index hero: "More →" links become real secondary controls on navy -- */
html[data-ui="v2"] :is(.hero-right, .hero-offers) > .btn-outline-white {
  min-height: var(--tap); padding: 0 1.1rem; gap: .4rem;
  display: inline-flex; align-items: center;
  font-size: var(--text-sm); font-weight: 600;
  border: 1.5px solid rgba(255, 255, 255, .7); /* radius: .btn (ESS) or the skin's own */
}

/* -- auth pages: brand navy + the chart grid of the destination tiles -- */
html[data-ui="v2"]:not([data-theme]) .auth-page {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 28px),
    linear-gradient(160deg, #13365e, #0a2342);
}
html[data-ui="v2"]:not([data-theme]) .auth-card { border-radius: var(--radius-card); }
html[data-ui="v2"] .auth-card { box-shadow: var(--shadow-xl); }

/* -- boat detail: sections breathe; the total reads as the number that matters -- */
html[data-ui="v2"] .detail-section:not(.hidden) ~ .detail-section .detail-section-title { margin-top: var(--space-6); }
html[data-ui="v2"] .detail-section-title { margin-bottom: var(--space-3); }
html[data-ui="v2"] #summary-total {
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700;
  line-height: 1.1; letter-spacing: var(--tracking-heading); font-variant-numeric: tabular-nums;
}
html[data-ui="v2"] .booking-reassure { color: var(--color-gray-text); }

/* -- search: guidance strip without the side tab; chips share the control radius -- */
html[data-ui="v2"] .dates-prompt { border-left: 1px solid var(--color-border); border-radius: var(--radius-control); }
html[data-ui="v2"]:not([data-theme]) .dates-prompt { background: var(--surface-sunken); border-color: var(--border-subtle); }
html[data-ui="v2"] :is(.spec-pill, #results-count) { border-radius: var(--radius-control); }