/* =====================================================================
   NXT-Mobile  —  Marine/Harbor theme overlay
   ---------------------------------------------------------------------
   Sits on top of app.css. Include AFTER app.css in every page:
       <link rel="stylesheet" href="/assets/css/app.css">
       <link rel="stylesheet" href="/assets/css/theme-shore.css">
   This file only remaps colors + adds the water-damage modal styles.
   Layout, typography, components are unchanged — so this overlay is
   non-destructive and can be removed by deleting the one <link> line.
   ===================================================================== */

:root {
  /* Base surface — deep tidal water */
  --bg:        #0a1822;   /* near-black with a blue cast, harbor at night */
  --bg-2:      #0f2030;   /* slightly lifted, like a buoyed surface       */
  --panel:     #152230;   /* harbor steel / panel face                    */
  --panel-2:   #1b2a3a;   /* hover / lifted panel                          */
  --line:      #25384a;   /* steel rim                                     */
  --line-2:    #324a60;   /* brighter rim on hover/focus                   */

  /* Type */
  --ink:       #e8eef2;   /* foam / sea-foam white                         */
  --muted:     #8aa3b3;   /* sea fog / mist                                */
  --muted-2:   #5d7585;

  /* Accents */
  --amber:     #ffb454;   /* harbor light / buoy — kept from prior brand   */
  --amber-dim: #c8862f;
  --acid:      var(--amber);   /* legacy var name, still maps to amber    */
  --acid-dim:  var(--amber-dim);
  --tide:      #5cb6d4;   /* a cooler accent, used sparingly for "info"    */
  --depth:     #2d7da3;   /* deeper marine blue                            */
  --red:       #ff5c5c;   /* urgency / water-damage state                  */
  --ok:        #76d49e;
}

/* The body background gets a subtle tidal gradient instead of warehouse
   gray. Keep it understated — this is a repair shop, not a vacation site. */
body {
  background:
    radial-gradient(1100px 600px at 88% -10%, #18374d 0%, transparent 60%),
    radial-gradient(800px 460px at 5% 110%, #0b1f2e 0%, transparent 55%),
    var(--bg) !important;
}

/* The hero gradient — keep it readable on the left, fade right so the
   blueprint image still reads. */
.hero::after {
  background: linear-gradient(105deg,
              rgba(10, 24, 34, .82) 0%,
              rgba(10, 24, 34, .60) 42%,
              rgba(10, 24, 34, .28) 100%) !important;
}

/* Buttons keep their amber identity (the buoy/light metaphor). Outline
   buttons get a tide-blue hover to reinforce the marine palette. */
.btn-line:hover {
  border-color: var(--tide);
  color: var(--tide);
  box-shadow: 0 8px 24px -12px var(--tide);
}

/* The kicker pill above the hero gets a subtle tide tint */
.kicker {
  background: linear-gradient(90deg,
              rgba(92,182,212,.08), rgba(255,180,84,.06));
  border-color: var(--line-2);
}

/* Status badges get marine-appropriate hues without losing readability */
.b-quoted    { background:#1e3a52; color:#bcdcef; }
.b-accepted  { background:#1e4438; color:#9be0c0; }
.b-repair    { background:#3a2d12; color:var(--amber); }

/* ===========================================================
   Water-damage emergency modal
   =========================================================== */
.wdm-backdrop {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(4, 12, 18, .78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.wdm-backdrop.on { opacity: 1; pointer-events: auto; }

.wdm {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7),
              0 0 0 1px rgba(92,182,212,.08) inset;
  transform: translateY(12px) scale(.98);
  transition: transform .22s ease;
}
.wdm-backdrop.on .wdm { transform: none; }

.wdm-head {
  position: relative;
  padding: 22px 56px 18px 26px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,92,92,.10), transparent 70%),
    linear-gradient(90deg, var(--panel-2), var(--panel));
}
.wdm-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--red); margin-bottom: 10px;
}
.wdm-tag::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(255,92,92,.6);
  animation: wdm-pulse 1.4s ease-out infinite;
}
@keyframes wdm-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,92,92,.55); }
  70%  { box-shadow: 0 0 0 14px rgba(255,92,92,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,92,92,0); }
}
.wdm-head h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  line-height: 1.2; color: var(--ink); margin: 0;
}
.wdm-close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  background: transparent; border: 1px solid var(--line-2);
  color: var(--muted); font-size: 18px; line-height: 1;
  cursor: pointer; transition: .15s;
}
.wdm-close:hover { color: var(--ink); border-color: var(--ink); }

.wdm-body { padding: 22px 26px 4px; }
.wdm-body p { color: var(--muted); font-size: 14px; line-height: 1.65;
              margin-bottom: 14px; }
.wdm-body strong { color: var(--ink); }

.wdm-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 14px 26px 24px;
}
.wdm-actions .btn { width: 100%; }

/* —— "Yes" content (the guide) —— */
.wdm-guide { padding: 22px 26px 6px; }
.wdm-guide h3 {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 14px;
}
.wdm-steps { list-style: none; counter-reset: w; margin: 0 0 14px; }
.wdm-steps li {
  counter-increment: w;
  position: relative;
  padding: 12px 14px 12px 52px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 10px; margin-bottom: 10px;
  font-size: 14px; line-height: 1.55; color: var(--ink);
}
.wdm-steps li::before {
  content: counter(w);
  position: absolute; left: 12px; top: 11px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--amber); color: #0a1822;
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.wdm-steps li small { display: block; color: var(--muted);
  font-size: 12px; margin-top: 4px; }

.wdm-warn {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(255,92,92,.08);
  border: 1px solid rgba(255,92,92,.32);
  border-radius: 10px; padding: 12px 14px; margin: 4px 0 16px;
  font-size: 13px; line-height: 1.55; color: var(--ink);
}
.wdm-warn b { color: var(--red); }

.wdm-cta {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 4px 26px 22px;
}
.wdm-cta .btn { flex: 1 1 auto; min-width: 200px; }

.wdm-disclaimer {
  font-size: 11px; color: var(--muted-2); line-height: 1.55;
  padding: 0 26px 22px; border-top: 1px dashed var(--line);
  margin-top: 0; padding-top: 14px;
}
.wdm-free {
  display: inline-block;
  background: linear-gradient(180deg, rgba(118,212,158,.14), rgba(118,212,158,.06));
  border: 1px solid rgba(118,212,158,.35);
  color: var(--ok);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 99px;
  margin: 4px 26px 8px;
}

@media (max-width: 480px) {
  .wdm-head      { padding: 18px 50px 14px 18px; }
  .wdm-body, .wdm-guide, .wdm-actions, .wdm-cta, .wdm-disclaimer { padding-left: 18px; padding-right: 18px; }
  .wdm-actions   { grid-template-columns: 1fr; }
}