/* ============================================================
   Hidrosfera — shared stylesheet
   Design tokens, resets, and components used by two or more
   pages, kept in one place so every page renders in the same
   colors/type/spacing and a change here reaches every page at
   once (this file previously existed as duplicate <style> blocks
   copy-pasted between index.html, profile.html, and others —
   several had quietly drifted out of sync with each other).

   NOT included here (deliberately left page-specific, since they
   already differ by design between pages): .container widths,
   .btn/.field/.field-grid/.card sizing, and any page's own layout
   mechanics (booking wizard steps, admin calendar/tabs, checkin
   stepper, experience/recommendations page layout).
   ============================================================ */

:root{
  --deep:      #0B3D4C;   /* offshore water / primary dark   */
  --deep-2:    #082B36;   /* deeper shade for gradients       */
  --teal:      #1C7C82;   /* lagoon / interactive accent      */
  --teal-lt:   #2E9AA0;
  --sand:      #EDE4D3;   /* page background                  */
  --sand-2:    #E3D7C0;
  --foam:      #FBFAF7;   /* card surfaces                    */
  --coral:     #E8734A;   /* CTA / highlight accent           */
  --coral-dk:  #C85A34;
  --ink:       #10262B;   /* body text                        */
  --ink-soft:  #4A5D61;
  --line:      #D9CEB8;
  --ok:        #2E7D4F;
  --ok-bg:     #E6F2EA;
  --warn:      #B8860B;
  --warn-bg:   #FBF3DD;
  --err:       #C0392B;
  --err-bg:    #FBEAE7;
  --gray:      #6B7280;
  --gray-bg:   #EEF0F2;

  --font-display: 'Fraunces', serif;
  --font-body:    'Public Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius:   14px;   /* alias used by a few pages alongside radius-m */

  --shadow-card: 0 1px 2px rgba(11,61,76,.06), 0 8px 24px rgba(11,61,76,.08);
  --shadow-pop:  0 12px 40px rgba(11,61,76,.22);

  /* --heading exists because --deep does double duty: it's the header/
     masthead BACKGROUND (which should stay dark navy in both themes —
     the header already reads as "dark") and, separately, the color used
     for headings/labels sitting on light card surfaces (which must NOT
     stay dark navy once cards go dark). Splitting that second use into
     its own token lets dark mode relight headings without touching the
     header backgrounds that key off --deep directly. */
  --heading: var(--deep);

  /* Fixed light text/icon color for content sitting on a surface that's
     always dark regardless of theme (the --deep header/masthead, dark
     CTA buttons, etc). Deliberately NOT overridden in dark mode — those
     surfaces don't change, so this shouldn't either. Using --foam here
     instead (which does flip dark) is the bug that made header text and
     some buttons unreadable in dark mode. */
  --on-deep: #FBFAF7;

  /* Wash applied over a card's own background watermark image so body
     text stays readable on top of it — must flip with the theme or a
     card goes near-white in dark mode while its text stays light-on-
     light (see the [data-theme="dark"] block below). */
  --watermark-overlay: rgba(255,255,255,.88);
}

/* ---------- dark mode ----------
   Toggled by setting data-theme="dark" on <html> (see theme.js). Only
   tokens that are exclusively background/text surfaces are overridden
   here — brand accents (--deep, --teal, --coral and their variants) are
   deliberately left alone since they're already dark-navy/vivid enough
   to work unchanged on both a light and a dark page, and --deep in
   particular is relied on as a fixed header background in several
   pages. */
[data-theme="dark"]{
  --sand:      #0A1E24;
  --sand-2:    #0F2831;
  --foam:      #12313B;
  --ink:       #E8F0EE;
  --ink-soft:  #9AB0B4;
  --line:      #24454E;
  --heading:   #E3F3F1;

  --ok:        #7FDBA6;
  --ok-bg:     rgba(46,125,79,.28);
  --warn:      #E8C468;
  --warn-bg:   rgba(184,134,11,.28);
  --err:       #F29A8C;
  --err-bg:    rgba(192,57,43,.28);
  --gray:      #A9B2BB;
  --gray-bg:   rgba(107,114,128,.3);

  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.38);
  --shadow-pop:  0 12px 40px rgba(0,0,0,.55);
  --watermark-overlay: rgba(10,22,26,.82);
}

/* ---------- global resets & base typography ---------- */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ font-family:var(--font-body); background:var(--sand); color:var(--ink); -webkit-font-smoothing:antialiased; min-height:100vh; transition:background-color .2s ease, color .2s ease; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0; color:var(--heading); }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }
a{ color:inherit; }
.hidden{ display:none !important; }
::selection{ background:var(--coral); color:#fff; }
:focus-visible{ outline:3px solid var(--coral); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* Cross-fade backgrounds/borders/text on theme change. Kept to the
   surfaces that actually carry theme tokens, rather than a blanket `*`
   rule, so we're not fighting page-specific transitions elsewhere. */
body, .card, .site-header, .masthead, .masthead .container, header,
input, select, textarea, .modal-box, .cp-login-pop, .header-login-pop,
.email-suggest, .cp-email-suggest, .eq-item-card, .cert-row, .cert-section{
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* ---------- theme toggle button ---------- */
.theme-toggle-btn{
  background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.25);
  color:#fff;
  width:38px; height:38px;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:16px;
  line-height:1;
  cursor:pointer;
  flex-shrink:0;
  transition:background .15s ease, transform .15s ease;
}
.theme-toggle-btn:hover{ background:rgba(255,255,255,.18); }
.theme-toggle-btn:active{ transform:scale(.92); }
/* Variant for pages/spots with no dark header to sit in (checkin.html's
   kiosk view has no nav at all) — a self-contained floating pill instead. */
.theme-toggle-btn.floating{
  position:fixed; top:16px; right:16px; z-index:500;
  background:var(--foam); color:var(--ink);
  border:1.5px solid var(--line);
  box-shadow:var(--shadow-card);
}
.theme-toggle-btn.floating:hover{ background:var(--foam); filter:brightness(.97); }

/* ---------- shared site header (booking/profile/experience/recommendations/template) ---------- */
.site-header{ background:var(--deep); color:#fff; position:sticky; top:0; z-index:200; }
.site-header .inner{ max-width:1080px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; row-gap:10px; }
.header-icon-btn{ background:rgba(255,255,255,.1); border:none; color:#fff; width:38px; height:38px; border-radius:50%; font-size:17px; display:inline-flex; align-items:center; justify-content:center; transition:background .15s ease; }
.header-icon-btn:hover{ background:rgba(255,255,255,.18); }

/* ---------- hamburger menu (booking/profile/experience/recommendations/template) ---------- */
.menu-btn{ background:none; border:none; width:38px; height:38px; display:flex; flex-direction:column; justify-content:center; gap:5px; align-items:center; }
.menu-btn span{ display:block; width:22px; height:2.5px; background:#fff; border-radius:2px; }
.menu-overlay{ position:fixed; inset:0; background:var(--deep-2); z-index:400; transform:translateX(100%); transition:transform .5s cubic-bezier(.2,.9,.25,1); display:flex; flex-direction:column; padding:26px; }
.menu-overlay.open{ transform:translateX(0); }
.menu-close{ background:none; border:none; color:#fff; font-size:26px; align-self:flex-end; width:44px; height:44px; }

/* Nav links + the social row at the bottom of the menu. Each item (link
   or icon) fades/slides in on its own delay so they cascade onscreen
   one at a time rather than all arriving together — that cadence is the
   whole point, so if you touch the delay steps or the transition
   duration on one rule, keep the others in this block matching. */
.menu-links{ display:flex; flex-direction:column; gap:10px; margin-top:24px; padding-left:30%; }
.menu-links a{ color:#fff; text-decoration:none; font-family:var(--font-display); font-size:46px; padding:12px 8px; border-radius:8px; opacity:0; transform:translateX(40px); transition:opacity .6s ease, transform .65s cubic-bezier(.2,.9,.25,1), background .15s ease; }
.menu-links a:hover{ background:rgba(255,255,255,.08); }
.menu-overlay.open .menu-links a{ opacity:1; transform:translateX(0); }
.menu-overlay.open .menu-links a:nth-of-type(1){ transition-delay:.2s; }
.menu-overlay.open .menu-links a:nth-of-type(2){ transition-delay:.38s; }
.menu-overlay.open .menu-links a:nth-of-type(3){ transition-delay:.56s; }
.menu-overlay.open .menu-links a:nth-of-type(4){ transition-delay:.74s; }

.menu-social{ display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:auto; padding-top:24px; padding-left:30%; padding-right:20px; }
.menu-social-btn{ width:115px; height:115px; border-radius:50%; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; opacity:0; transform:translateX(40px); transition:opacity .6s ease, transform .65s cubic-bezier(.2,.9,.25,1), background .15s ease; }
.menu-social-btn:hover{ background:rgba(255,255,255,.24); }
.menu-social-btn svg{ width:55px; height:55px; }
.menu-overlay.open .menu-social-btn{ opacity:1; transform:translateX(0); }
/* continues the same 4-links-then-4-icons cascade started above */
.menu-overlay.open .menu-social-btn:nth-of-type(1){ transition-delay:.92s; }
.menu-overlay.open .menu-social-btn:nth-of-type(2){ transition-delay:1.1s; }
.menu-overlay.open .menu-social-btn:nth-of-type(3){ transition-delay:1.28s; }
.menu-overlay.open .menu-social-btn:nth-of-type(4){ transition-delay:1.46s; }
@media (max-width:640px){
  /* Narrow screens: the 30% left-indent and large link size that work on
     desktop leave too little room for longer labels ("Recommended
     places") and crowd the social row. Tighten both. The social icons
     stay large (2.5x the original size) but wrap onto a second row
     instead of overflowing a narrow viewport. */
  .menu-links{ padding-left:22px; gap:6px; }
  .menu-links a{ font-size:34px; padding:9px 6px; }
  .menu-social{ padding-left:22px; padding-right:12px; padding-top:18px; gap:14px; }
  .menu-social-btn{ width:95px; height:95px; }
  .menu-social-btn svg{ width:46px; height:46px; }
}
@media (max-width:420px){
  .menu-social-btn{ width:80px; height:80px; }
  .menu-social-btn svg{ width:38px; height:38px; }
}

/* ---------- language bar (booking's tr-switcher styling is page-specific;
   this covers the .pf-lang-bar / .exp-lang-bar variant used on profile
   and experience, which are the same component under two names) ---------- */
.pf-lang-bar, .exp-lang-bar{ display:flex; gap:2px; background:rgba(255,255,255,.08); border-radius:999px; padding:4px; margin-left:auto; }
.pf-lang-bar button, .exp-lang-bar button{ border:none; background:transparent; color:rgba(255,255,255,.6); font-family:var(--font-body,sans-serif); font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:999px; cursor:pointer; transition:all .15s ease; white-space:nowrap; }
.pf-lang-bar button:hover, .exp-lang-bar button:hover{ color:#fff; }
.pf-lang-bar button.active, .exp-lang-bar button.active{ background:var(--coral); color:#fff; }
@media (max-width:860px){
  .pf-lang-bar button, .exp-lang-bar button{ font-size:0; padding:6px 8px; }
  .pf-lang-bar button::after, .exp-lang-bar button::after{ content:attr(data-short); font-size:11.5px; font-family:var(--font-body,sans-serif); }
}
@media (max-width:640px){
  /* The header row (brand + lang bar + login/profile icons + menu) no
     longer fits on one line at phone widths. Let it wrap, and pin the
     language bar to its own centered row below brand/icons rather than
     wrapping button-by-button, which read as broken/uncentered. */
  .pf-lang-bar, .exp-lang-bar{ order:5; flex-basis:100%; margin-left:0; justify-content:center; }
}

/* ---------- collapsed language-bar chip — wraps .pf-lang-bar/.exp-lang-bar
   in a single chip showing the current language, expanding into a popover
   on click instead of sitting open as a full row all the time. Same
   pattern as booking.html's own lang-switch-wrap/curr-switch-wrap (kept
   page-local there since booking's language bar is a different component
   under the hood — but visually identical to this one). ---------- */
.lang-switch-wrap{ position:relative; margin-left:auto; }
.lang-chip{ background:rgba(255,255,255,.12); border:none; color:#fff; font-family:var(--font-mono,monospace); font-size:12.5px; font-weight:600; padding:8px 12px; border-radius:999px; cursor:pointer; white-space:nowrap; }
.lang-chip:hover{ background:rgba(255,255,255,.22); }
.lang-switch-pop{ position:absolute; top:calc(100% + 10px); right:0; background:var(--foam); border-radius:14px; box-shadow:0 12px 34px rgba(0,0,0,.22); padding:10px; z-index:250; }
.lang-switch-pop::before{ content:''; position:absolute; top:-6px; right:20px; width:12px; height:12px; background:var(--foam); transform:rotate(45deg); }
.lang-switch-pop .pf-lang-bar, .lang-switch-pop .exp-lang-bar{ background:transparent; margin-left:0; }
.lang-switch-pop .pf-lang-bar button, .lang-switch-pop .exp-lang-bar button{ color:var(--ink-soft); }
.lang-switch-pop .pf-lang-bar button.active, .lang-switch-pop .exp-lang-bar button.active{ background:var(--coral); color:#fff; }
@media (max-width:640px){
  .lang-switch-wrap{ order:5; flex-basis:100%; margin-left:0; display:flex; justify-content:center; }
}

/* ---------- certification + rental-equipment component family
   (booking page step 3 and profile's reservation editor / own-certs card) ---------- */
.field-grid-generic{ display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px; }
.eq-item-card{ background:#fff; border:1.5px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:10px; transition:border-color .2s, background .2s; }
.eq-item-card.status-incomplete{ border-color:var(--err,#C0392B); background:var(--err-bg,#FBEAEA); }
.eq-item-card.status-complete{ border-color:var(--ok,#2E7D4F); background:var(--ok-bg,#E9F5EC); }
.cert-section{ border:1.5px solid var(--teal); border-radius:12px; padding:12px 14px; background:rgba(28,124,130,.04); }
.cert-section-head{ font-weight:700; font-size:14px; color:var(--heading); margin-bottom:10px; }
.cert-section-sub{ font-size:12px; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin:14px 0 8px; }
.cert-row{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:10px; background:var(--foam); position:relative; }
.cert-remove{ background:none; border:none; color:var(--coral); font-size:12.5px; font-weight:600; cursor:pointer; padding:4px 0 0; }
.cert-help{ font-size:12px; color:var(--ink-soft); line-height:1.5; margin-top:10px; padding:8px 10px; background:var(--sand); border-radius:8px; }
.cert-warning{ font-size:12.5px; font-weight:600; color:var(--warn); background:var(--warn-bg); border-radius:8px; padding:8px 10px; margin:0 0 10px; }
.cert-ocr{ margin-top:10px; }
.cert-ocr-btn{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--teal); cursor:pointer; padding:6px 12px; border:1.5px dashed var(--teal); border-radius:8px; }
.cert-ocr-status{ font-size:12px; color:var(--ink-soft); margin-top:6px; font-style:italic; }
.cert-ocr-result{ margin-top:8px; }
.cert-ocr-note{ font-size:11.5px; color:var(--ink-soft); margin-bottom:4px; }
.cert-ocr-text{ width:100%; font-size:12px; font-family:ui-monospace,monospace; padding:8px; border:1px solid var(--line); border-radius:6px; background:var(--sand); resize:vertical; min-height:160px; max-height:320px; line-height:1.5; }
.cert-ocr-copy{ margin-top:6px; font-size:12px; font-weight:600; color:var(--teal); background:none; border:none; cursor:pointer; padding:0; }

/* Certification row: complete state (green border), agency logo, the
   card-styled "add another" button, and the read-only look once saved. */
.cert-row{ transition:border-color .2s ease; }
.cert-row.is-complete{ border-color:var(--ok); border-width:1.5px; }
.cert-row.is-saved input{ background:transparent; border-color:transparent; padding-left:0; color:var(--ink); font-weight:500; cursor:default; }
.cert-row-head{ display:flex; align-items:center; gap:10px; margin-bottom:2px; }
.cert-agency-logo{ height:22px; max-width:64px; object-fit:contain; flex-shrink:0; }
.cert-row-actions{ display:flex; justify-content:flex-end; margin-top:8px; }
.cert-save-btn{ border:none; border-radius:8px; font-size:12.5px; font-weight:700; padding:7px 16px; cursor:pointer; }
.cert-save-btn.save{ background:var(--teal); color:#fff; }
.cert-save-btn.save:disabled{ background:var(--line); color:var(--ink-soft); cursor:not-allowed; }
.cert-save-btn.remove{ background:none; color:var(--coral); border:1px solid var(--coral); }
.cert-add-card{
  display:flex; align-items:center; justify-content:center; width:100%; min-height:58px;
  border:1.5px dashed var(--teal); border-radius:10px; background:none; color:var(--teal);
  font-weight:700; font-size:14px; cursor:pointer; margin-top:4px;
}
.cert-add-card:hover{ background:rgba(28,124,130,.05); }

/* ---------------------------------------------------------------------
   CERTIFICATION CARD — a real credit-card-proportioned component
   (85.6×54mm ≈ 300×189px at ~3.5px/mm), fixed size on every screen
   rather than shrinking to fit — used both while filling in a
   certificate's fields and after it's saved. The agency logo sits as a
   full-height watermark panel on the left in both states, matching an
   actual certification card's layout instead of a small corner badge.
   Same component/markup as booking.html's own copy of these rules
   (kept local there since its cert system is a different component
   under the hood) — used here by profile.html.
   --------------------------------------------------------------------- */
.cert-editor-wrap{ margin-bottom: 14px; }
.cert-card{
  width:300px; height:189px; max-width:100%; position:relative; border-radius:14px; overflow:hidden;
  background:var(--foam); box-shadow:0 3px 10px rgba(11,61,76,.16); border:1px solid var(--line);
  margin:0 auto;
}
.cert-card.is-saved{ border-color:var(--ok); }
.cert-card-logo-wrap{
  position:absolute; left:0; top:0; bottom:0; width:38%; overflow:hidden;
  background:linear-gradient(160deg, var(--teal-lt), var(--teal));
  display:flex; align-items:center; justify-content:center; padding:10px;
}
/* Agency logo: fit fully visible, no cropping. The avatar photo
   (fallback when no agency is recognized yet, or the logo fails to
   load) fills the whole panel edge to edge instead — see .is-avatar. */
.cert-card-logo-img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,.2)); }
.cert-card-logo-img.is-avatar{ object-fit:cover; padding:0; margin:-10px; width:calc(100% + 20px); height:calc(100% + 20px); filter:none; }
/* Last-resort fallback — only shown once the <img>'s onerror handler
   has given up on both the agency logo AND the avatar photo. */
.cert-card-logo-wrap.no-logo::after{ content:'🤿'; font-size:34px; opacity:.85; }
.cert-card-fields{
  position:absolute; left:38%; right:0; top:0; bottom:0; padding:12px 14px;
  display:flex; flex-direction:column; justify-content:center; gap:5px; overflow:hidden;
}
.cert-card-name{ font-family:var(--font-display); font-size:15px; color:var(--heading); line-height:1.2; margin-bottom:2px; }
.cert-card-row{ font-size:11px; color:var(--ink-soft); line-height:1.4; }
.cert-card-row span:first-child{ color:var(--ink); font-weight:600; }
.cert-card-fields-edit{ justify-content:space-evenly; gap:4px; }
.cert-mini-field input{ width:100%; border:1.5px solid var(--line); border-radius:7px; padding:6px 8px; font-size:12px; font-family:inherit; background:var(--sand); color:var(--ink); }
.cert-mini-field input:focus{ outline:none; border-color:var(--teal); }
.cert-mini-field input.filled{ border-color:var(--teal); background:#fff; }
.cert-editor-toolbar{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
.cert-editor-toolbar .cert-ocr{ width:100%; text-align:center; margin-top:0; }
.cert-card-remove-btn{ display:block; margin:8px auto 0; }
