/* ==========================================================================
   WELCOME / MANIFESTO + alegerea pentru cookie-uri — stratul de la prima vizită
   --------------------------------------------------------------------------
   Modul izolat: toate regulile sunt legate de #welcome-overlay și
   #welcome-info-trigger. Refolosește tokenii din style.css (culori, raze,
   umbre, fonturi), deci trebuie încărcat DUPĂ style.css și urmează automat
   tema luminos / întunecat.

   DESIGN (mobile-first):
   • fereastra are două zone: „.wm-scroll” (informarea; derulează dacă ecranul e mic)
     și „.wm-foot” (alegerea: MEREU vizibilă, nu derulează niciodată);
   • pe telefon (≤ 600 px lățime) fereastra urcă din partea de jos, ca o „foaie”;
   • pe telefon în orientare orizontală: două coloane (informare | alegere);
   • pe desktop: fereastră centrată.
   ========================================================================== */

#welcome-overlay {
  /* Închis (nu doar invizibil), ca să nu intercepteze click-uri pe hartă între vizite.
     ACELAȘI element se refolosește la fiecare deschidere. */
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500; /* peste orice altă fereastră (100) și peste header */
  align-items: center;
  justify-content: center;
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  overflow: hidden;
  overscroll-behavior: contain;
  background: rgba(8, 14, 28, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s ease;
}
#welcome-overlay.wm-open { display: flex; }
#welcome-overlay.wm-visible { opacity: 1; }

#welcome-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  max-height: 100%;
  overflow: hidden;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  container-type: inline-size;   /* titlul se scalează după lățimea ferestrei */
  transform: translateY(14px) scale(0.985);
  transition: transform 0.4s var(--ease);
}
#welcome-overlay.wm-visible #welcome-modal { transform: none; }
#welcome-modal:focus { outline: none; }

/* Tricolorul din siglă, ca marcaj discret sus */
#welcome-modal::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 4px; z-index: 1;
  background: linear-gradient(90deg, #1d4ed8 0 33.33%, #f5b301 33.33% 66.66%, #c81e2e 66.66% 100%);
}

#welcome-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  font-size: 22px; line-height: 1;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  z-index: 3;
}
#welcome-close:hover { color: var(--ink); border-color: var(--line-strong); }
#welcome-close:focus-visible,
#welcome-cta:focus-visible,
#welcome-link:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ------------------------------ zona de informare ------------------------------ */
.wm-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 30px 28px 14px;
  text-align: center;
  /* umbre de derulare: apar sus / jos doar când mai e conținut de văzut */
  background:
    linear-gradient(var(--surface) 30%, rgba(255, 255, 255, 0)) center top / 100% 36px no-repeat local,
    linear-gradient(rgba(255, 255, 255, 0), var(--surface) 70%) center bottom / 100% 36px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(14, 26, 51, 0.16), rgba(14, 26, 51, 0)) center top / 100% 10px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(14, 26, 51, 0.16), rgba(14, 26, 51, 0)) center bottom / 100% 10px no-repeat scroll;
}

.wm-logo { margin: 0 auto 8px; }
.wm-logo img { display: block; margin: 0 auto; height: 58px; width: auto; }

.wm-eyebrow {
  margin: 0 0 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-text);
}

.wm-headline {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 8.4cqw, 42px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  white-space: nowrap;   /* un singur rând, mereu */
}

.wm-lead {
  max-width: 420px;
  margin: 0 auto 16px;
  font-size: 16px; line-height: 1.5; color: var(--ink);
}

.wm-points {
  list-style: none;
  margin: 0 0 16px; padding: 0;
  display: grid; gap: 10px;
  text-align: left;
}
.wm-points li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px; line-height: 1.45; color: var(--ink-2);
}
.wm-ic {
  flex: none;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;
  background: var(--gold-soft);
  border-radius: 999px;
}
.wm-points li > span:last-child { padding-top: 6px; }

.wm-price { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.wm-price-tag {
  display: inline-block;
  padding: 8px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.015em;
  color: #0e1a33;
  background: var(--gold);
  border-radius: 999px;
}
.wm-price-note { font-size: 13px; color: var(--ink-3); }

.wm-more { margin: 0; }
#welcome-link { font-size: 13.5px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
#welcome-link:hover { color: var(--ink); }

/* ------------------------------ zona de alegere (mereu vizibilă) ------------------------------ */
.wm-foot {
  flex: none;
  padding: 14px 28px calc(18px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--line);
}

#welcome-cta {
  display: block;
  width: 100%;
  padding: 15px 18px;
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  color: #0e1a33;
  background: var(--gold);
  border: 0;
  border-radius: var(--r-md);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 6px 16px -8px rgba(176, 127, 0, 0.7);
  cursor: pointer;
  transition: background-color 0.15s, transform 0.1s;
}
#welcome-cta:hover { background: var(--gold-hover); }
#welcome-cta:active { transform: translateY(1px); }

/* cât timp nu s-a ales nimic: alegerea ia locul butonului „Descoperă harta” (vezi consent.js) */
#welcome-modal.wm-has-consent #welcome-cta { display: none; }
#welcome-modal:not(.wm-has-consent) #wm-consent { display: none; }
#wm-consent { min-height: 108px; }
#welcome-modal .ck-lead { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; text-align: center; color: var(--ink-2); }
#welcome-modal .ck-lead b { color: var(--ink); }
#welcome-modal .ck-links { margin-top: 10px; }
#welcome-modal .ck-fine { display: none; }
#welcome-modal .ck-settings { text-align: left; max-height: 34vh; overflow-y: auto; }

/* ============================ TELEFON (portret): „foaie” din partea de jos ============================ */
@media (max-width: 600px) {
  #welcome-overlay { align-items: flex-end; padding: 0; }
  #welcome-modal {
    max-width: none;
    max-height: 94vh; max-height: 94dvh;
    border-radius: 24px 24px 0 0;
    border-bottom: 0;
    transform: translateY(40px);
  }
  .wm-scroll { padding: 26px 20px 12px; }
  .wm-logo img { height: 50px; }
  .wm-lead { font-size: 15.5px; margin-bottom: 14px; }
  .wm-points { margin-bottom: 14px; gap: 9px; }
  .wm-points li { font-size: 13.5px; }
  .wm-foot { padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px)); }
  #welcome-modal .ck-lead { margin-bottom: 10px; font-size: 13px; }
}
@media (max-width: 340px) {
  #welcome-modal .ck-actions:not(.ck-actions-3) { grid-template-columns: 1fr; }
}

/* ============================ ecrane scurte (indiferent de lățime) ============================ */
@media (max-height: 700px) and (orientation: portrait) {
  .wm-logo { display: none; }
  .wm-points li:nth-child(2) { display: none; }
}
@media (max-height: 600px) and (orientation: portrait) {
  .wm-eyebrow { display: none; }
  .wm-lead { margin-bottom: 10px; }
}

/* ============================ TELEFON (peisaj): informare | alegere, în două coloane ============================ */
@media (orientation: landscape) and (max-height: 520px) {
  #welcome-overlay { align-items: center; justify-content: center; padding: 10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left)); }
  #welcome-modal {
    flex-direction: row;
    max-width: 880px;
    max-height: 100%;
    border-radius: var(--r-xl);
    border-bottom: 1px solid var(--line);
    transform: translateY(14px) scale(0.985);
  }
  #welcome-overlay.wm-visible #welcome-modal { transform: none; }
  .wm-scroll { flex: 1.35 1 0; padding: 20px 22px 14px; }
  .wm-logo { display: block; margin-bottom: 4px; }
  .wm-logo img { height: 42px; }
  .wm-eyebrow { display: none; }
  .wm-headline { font-size: clamp(22px, 5.6cqw, 30px); }
  .wm-lead { margin-bottom: 10px; font-size: 14px; }
  .wm-points { margin-bottom: 10px; }
  .wm-points li:nth-child(2) { display: none; }
  .wm-foot {
    flex: 1 1 0; max-width: 340px; min-width: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding: 52px 20px 16px; overflow-y: auto;   /* sus: loc pentru butonul de închidere */
    border-top: 0; border-left: 1px solid var(--line);
  }
  #wm-consent { min-height: 0; }
  #welcome-modal .ck-lead { font-size: 12.5px; margin-bottom: 8px; }
  #welcome-modal .ck-settings { max-height: 26vh; }
}
@media (orientation: landscape) and (max-height: 400px) {
  .wm-points { display: none; }
  .wm-price { margin-bottom: 6px; }
}
@media (min-width: 601px) {
  #welcome-modal .ck-fine { display: block; }
}

/* ============================ TRIGGER (reopen) ============================ */
/* Stă în header, lângă pastila de ocupare (welcome.js îl mută acolo), ca să
   nu se suprapună cu footerul sau cu butoanele hărții. Dacă headerul nu
   există, revine la poziția fixă de rezervă de mai jos. */
#welcome-info-trigger {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px 0 12px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
#welcome-info-trigger:hover { color: var(--ink); background: var(--surface); border-color: var(--line-strong); }
#welcome-info-trigger:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.wm-trigger-icon { font-size: 16px; line-height: 1; }
.wm-trigger-text { white-space: nowrap; }

body > #welcome-info-trigger { /* rezervă: headerul lipsește */
  position: fixed; left: 12px; bottom: 72px; z-index: 60;
  box-shadow: var(--shadow-1);
}

/* Pe ecrane mai înguste rămâne doar iconița */
@media (max-width: 1100px) {
  #welcome-info-trigger { width: 38px; padding: 0; justify-content: center; }
  .wm-trigger-text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #welcome-overlay, #welcome-modal, #welcome-cta { transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  #welcome-overlay, #welcome-modal, #welcome-cta { transition: none !important; }
}