/* ============================================================
   TideIQ — theme-pro.css  ✅ Fixed V17
   ============================================================ */

:root{
  --bg:#f0faff;--bg2:#e0f4fc;--card:rgba(255,255,255,.92);
  --text:#05253a;--muted:#4a7a92;--primary:#0097b8;--primary2:#00c9b1;
  --deep:#024e6a;--gold:#f5a800;--danger:#ff4b3a;--success:#00b87a;
  --shadow:0 16px 48px rgba(0,90,120,.13);--radius:24px;
}

body{
  background:
    radial-gradient(ellipse at 10% 0%,rgba(0,180,220,.15),transparent 40%),
    radial-gradient(ellipse at 90% 5%,rgba(0,150,190,.12),transparent 35%),
    radial-gradient(ellipse at 50% 100%,rgba(0,100,160,.08),transparent 50%),
    linear-gradient(180deg,#e8f8ff 0%,#f5fcff 40%,#eaf8ff 100%) !important;
}

/* ── Header — LIGHT & CLEAN ── */
.topbar{
  background:rgba(255,255,255,.97) !important;
  border-bottom:1.5px solid rgba(0,150,190,.14) !important;
  backdrop-filter:blur(20px) !important;
  box-shadow:0 2px 20px rgba(0,100,140,.08) !important;
}
.topbar .btn.glass{
  background:rgba(0,150,190,.08) !important;
  color:#024e6a !important;
  border:1px solid rgba(0,150,190,.18) !important;
}
.topbar .btn.primary{
  background:linear-gradient(135deg,#0097b8,#00c9b1) !important;
  color:white !important;
}
.topbar .btn.danger{
  background:rgba(255,80,100,.08) !important;
  color:#cc2233 !important;
  border:1px solid rgba(255,80,100,.16) !important;
}
.lang-select{
  background:rgba(0,150,190,.06) !important;
  color:#024e6a !important;
  border:1px solid rgba(0,150,190,.18) !important;
  font-weight:900 !important;
}
.brand img{
  height:52px !important;
  max-width:185px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 2px 10px rgba(0,150,190,.18)) !important;
}

/* ── Landing ── */
.landing h1{
  background:linear-gradient(135deg,#024e6a 0%,#0097b8 50%,#00c9b1 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;
}

/* ── Cards ── */
.card{
  background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(0,150,190,.12) !important;
  box-shadow:0 12px 40px rgba(0,80,120,.10) !important;
}

/* ── Buttons ── */
.btn.primary,.primary{
  background:linear-gradient(135deg,#0097b8,#00c9b1) !important;
  box-shadow:0 10px 28px rgba(0,150,185,.28) !important;color:white !important;
}
.btn.glass,.btn.ghost{
  background:rgba(255,255,255,.80) !important;
  border:1px solid rgba(0,130,165,.16) !important;color:var(--deep) !important;
}
.btn.danger{background:rgba(255,75,58,.10) !important;color:#cc2233 !important;}

/* ── Chips ── */
.chip.active{background:linear-gradient(135deg,#0097b8,#00c9b1) !important;color:white !important;}

/* ── Badge ── */
.badge{background:rgba(0,180,220,.14) !important;color:#024e6a !important;border:1px solid rgba(0,150,190,.20) !important;}
.badge.soft{background:rgba(255,255,255,.70) !important;}
.badge.gold{background:rgba(245,168,0,.15) !important;color:#7a5000 !important;border-color:rgba(245,168,0,.28) !important;}
.badge.premium{background:linear-gradient(135deg,rgba(245,168,0,.18),rgba(255,200,80,.12)) !important;color:#6b4400 !important;}

/* ── Preview Map ── */
.preview-map{
  background:
    radial-gradient(ellipse at 20% 25%,rgba(0,220,255,.22),transparent 30%),
    radial-gradient(ellipse at 75% 65%,rgba(0,180,220,.20),transparent 28%),
    linear-gradient(160deg,#011a2e 0%,#022d45 35%,#014460 60%,#023855 100%) !important;
  box-shadow:inset 0 0 80px rgba(0,180,255,.14),0 20px 60px rgba(0,80,130,.22) !important;
}
.hotspot{width:28px !important;height:28px !important;background:radial-gradient(circle,#00ffcc,#00d4b4) !important;box-shadow:0 0 0 10px rgba(0,220,180,.16),0 0 36px rgba(0,220,180,.90) !important;z-index:4 !important;}
.hotspot.vip{background:radial-gradient(circle,#ffd600,#f5a800) !important;box-shadow:0 0 0 10px rgba(245,168,0,.20),0 0 36px rgba(245,168,0,.90) !important;}
.hotspot.safe{background:radial-gradient(circle,#00e5ff,#00b4d8) !important;}
.scan-circle{border-color:rgba(0,220,255,.45) !important;width:200px !important;height:200px !important;}
.map-grid{opacity:.70 !important;}
.map-stat,.map-bottom,.map-metric-panel,.map-current-panel{background:rgba(1,20,36,.78) !important;border-color:rgba(0,200,255,.26) !important;backdrop-filter:blur(12px) !important;}
.map-stat small,.map-metric-panel small,.map-current-panel small{color:#60eeff !important;}

/* ── Dashboard ── */
.welcome-card{background:linear-gradient(135deg,rgba(0,80,120,.07),rgba(0,180,210,.05)) !important;border:1px solid rgba(0,150,190,.14) !important;}
.satellite-pulse{background:linear-gradient(135deg,#d0f5ff,#a0ecff) !important;box-shadow:0 0 32px rgba(0,200,230,.28) !important;}
.metric{background:rgba(255,255,255,.85) !important;border:1px solid rgba(0,130,165,.10) !important;}

/* ── Report ── */
.report-metric{background:rgba(255,255,255,.90) !important;border-color:rgba(0,130,165,.10) !important;}
.report-banner{background:linear-gradient(135deg,rgba(0,150,190,.12),rgba(0,200,180,.08)) !important;border-color:rgba(0,150,190,.22) !important;}
.forecast-section{background:linear-gradient(135deg,rgba(1,22,38,.96),rgba(2,50,72,.94)) !important;border-color:rgba(0,180,220,.18) !important;}
.fc-day{background:rgba(255,255,255,.07) !important;border-color:rgba(0,200,230,.14) !important;}
.fc-name{color:#60eeff !important;}

/* ── Plans ── */
.vip-plan{background:linear-gradient(135deg,rgba(255,248,220,.95),rgba(255,255,255,.90)) !important;border:1.5px solid rgba(245,168,0,.25) !important;}
.premium-plan{background:linear-gradient(135deg,rgba(220,245,255,.95),rgba(255,255,255,.90)) !important;border:1.5px solid rgba(0,150,190,.22) !important;}

/* ── Misc ── */
#map{border:1px solid rgba(0,150,190,.18) !important;box-shadow:0 8px 32px rgba(0,80,130,.12) !important;}
.answer{background:rgba(0,150,190,.07) !important;border:1px solid rgba(0,150,190,.14) !important;}
.footer{color:var(--muted) !important;border-top:1px solid rgba(0,130,165,.10);padding-top:20px;}
.scan-head{background:linear-gradient(135deg,rgba(0,150,190,.15),rgba(0,200,180,.08)) !important;border:1px solid rgba(0,150,190,.18) !important;}
textarea:focus,input:focus{border-color:var(--primary) !important;box-shadow:0 0 0 4px rgba(0,150,190,.12) !important;}
.hotspot-pin{background:linear-gradient(135deg,#00d4f0,#00e8c8) !important;}
.ocean-bg span{background:rgba(0,180,220,.22) !important;}
.good{color:#007a5e !important;}
.gold{color:#a06800 !important;}

@media(max-width:560px){
  .brand img{height:44px !important;max-width:155px !important;}
}

/* ── Logo Fix — Force visible ── */
.brand img {
  height: 54px !important;
  max-width: 190px !important;
  object-fit: contain !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}