@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
/* Vice Marina — Neon Vice City Theme */
:root{
  --bg:#070712;
  --glass: rgba(10,10,20,.55);
  --glass2: rgba(10,10,20,.35);
  --stroke: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --neon-pink:#ff3fd1;
  --neon-cyan:#35e6ff;
  --pink: var(--neon-pink);
  --cyan: var(--neon-cyan);
  --neon-purple:#8b5cff;
  --gold:#ffd27a;
  --danger:#ff4d6d;
  --ok:#38f6a6;
  --shadow: 0 18px 45px rgba(0,0,0,.55);
  --radius: 18px;
  --radius-lg: 26px;
  --max: 1180px;
}

/* Prevent iOS Safari from inflating text sizes (can blow up buttons) */
html{ -webkit-text-size-adjust: 100%; }

/* =========================================================
   HOME SEARCH BAR — SMALLER + FLUSH ENDS (FINAL OVERRIDE)
   User request: Make the pill a bit smaller and remove any
   white empty protrusion on both ends.
========================================================= */
.hero-searchbar{ max-width: 620px !important; }
.hero-searchbar .hs-form{ flex: 1 !important; width: 100% !important; display:flex !important; align-items:stretch !important; }
.hero-searchbar .hs-seg{ padding: 12px 14px !important; }
.hero-searchbar .hs-btn{ width: 64px !important; border:0 !important; }
.hero-searchbar .hs-badge{ right: 14px !important; top:-11px !important; padding: 7px 12px !important; }


*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  background: var(--bg);
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  letter-spacing:.2px;
  overflow-x:hidden;

  /* Keep footer pinned to the bottom on short pages (ex: Checkout) */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main.container{ flex: 1; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.bg-wallpaper{
  position:fixed;
  inset:0;
  z-index:-2;
  background: url("../assets/vice-marina-bg.png") center/cover no-repeat fixed;
}
.bg-wallpaper::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 800px at 50% 10%, rgba(255,63,209,.22), transparent 55%),
    radial-gradient(1000px 700px at 70% 40%, rgba(53,230,255,.18), transparent 55%),
    linear-gradient(180deg, rgba(7,7,18,.30), rgba(7,7,18,.82));
  backdrop-filter: blur(1px);
}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(7,7,18,.88), rgba(7,7,18,.55));
  backdrop-filter: blur(12px);
}

.nav{
  max-width: var(--max);
  margin:0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.brand{
  display:flex; align-items:center; gap:10px;
  text-transform:uppercase;
  letter-spacing: .9px;
}
.brand-badge{
  width:40px; height:40px;
  border-radius: 14px;
  background: radial-gradient(circle at 30% 30%, rgba(255,63,209,.7), rgba(53,230,255,.55));
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 14px 30px rgba(255,63,209,.18);
  position:relative;
}
.brand-badge::after{
  content:"";
  position:absolute; inset:8px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
}

.brand-title{
  display:flex; flex-direction:column; line-height:1.0;
}
.brand-title span:nth-child(1){
  font-size: 14px;
  opacity:.86;
}
.brand-title span:nth-child(2){
  font-size: 18px;
  letter-spacing:1.2px;
}

.navlinks{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
}
.navlinks a{
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid transparent;
  color: var(--text);
  opacity:.92;
  font-size: 13px;
  text-transform:uppercase;
  letter-spacing: .9px;
  transition: .18s ease;
}
.navlinks a:hover{
  border-color: rgba(255, 77, 220, .55);
  background: rgba(255, 77, 220, .08);
  color: var(--neon-pink);
  text-shadow: 0 0 10px rgba(255,77,220,.65), 0 0 22px rgba(255,77,220,.35);
  transform: translateY(-1px);
  animation: neonFlicker 1.6s ease-in-out infinite;
}

.nav-cta{
  display:flex; align-items:center; gap:10px;
}
.btn{
  border:none;
  cursor:pointer;
  font-weight: 900;
  letter-spacing: .9px;
  text-transform: uppercase;
  padding: 12px 14px;
  border-radius: 16px;
  color: rgba(0,0,0,.92);
  background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan));
  box-shadow: 0 12px 30px rgba(255,63,209,.14);
  transition: .18s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  line-height: 1.05;
}
.btn:hover{ transform: translateY(-1px); filter:saturate(1.08); }
.btn:active{ transform: translateY(0px); }

.btn.ghost{
  color: var(--text);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: none;
}
.btn.danger{
  background: linear-gradient(90deg, var(--danger), #ffb4c2);
}
.btn.small{ padding: 10px 12px; border-radius: 14px; font-size: 12px; }

.container{
  max-width: var(--max);
  margin:0 auto;
  padding: 24px 18px 48px;
}

.card{
  background: linear-gradient(180deg, var(--glass), rgba(10,10,20,.28));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  overflow:hidden;
}

.card.pad{ padding: 18px; }

.grid{
  display:grid;
  gap:16px;
}
.grid.cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px){
  .grid.cols-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.cols-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .navlinks{ display:none; }
}
@media (max-width: 620px){
  .grid.cols-2,.grid.cols-3,.grid.cols-4{ grid-template-columns: 1fr; }
}

.hero{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  /* Home hero: remove glass box/backdrop behind the title */
  border: none;
  background: transparent;
  box-shadow: none;
}

.hero-inner{
  padding: 44px 22px;
  max-width: var(--max);
  margin:0 auto;
}
.hero h1{
  margin:0 0 10px;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.03;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-shadow: none;
}
.hero p{
  margin:0 auto 20px;
  font-size: 14px;
  max-width: 680px;
  opacity: .88;
  font-weight: 800;
  text-align:center;
}
.pills{
  display:flex; flex-wrap:wrap; gap:10px;
}
.pill{
  padding: 10px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .9px;
  opacity: .95;
}

.section-title{
  margin: 26px 0 10px;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:10px;
}
.section-title h2{
  margin:0;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.section-title .hint{
  font-size: 12px;
  opacity:.78;
  font-weight: 800;
}

.kpi{
  display:flex; flex-direction:column; gap:6px;
  padding: 16px;
}
.kpi .num{
  font-size: 22px;
  letter-spacing: 1.2px;
}
.kpi .label{
  font-size: 12px;
  opacity:.78;
  text-transform: uppercase;
}

.media-card{
  position:relative;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  overflow:hidden;
  min-height: 240px;
}

/* GO sticker (Explore / Top Spots cards) — now uses an image sticker */
.media-card .go-sticker-img{
  position:absolute;
  left:50%;
  bottom:14px;
  width: 500px;
  height:auto;
  transform: translateX(-50%) scale(1.6); /* ✅ LOGO ZOOM */
  transform-origin: center bottom;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.38));
  pointer-events:none;
  z-index: 999;
}
.media-card .go-sticker-img{
  width: 150px !important;
  height: auto !important;
}
.media-card .bg{
  position:absolute; inset:0;
  background-size: cover;
  background-position:center;
  filter: saturate(1.18) contrast(1.12) brightness(1.12);
  transform: scale(1.03);
}
.media-card .overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.28));
}
.media-card .content{
  position:relative;
  padding: 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.media-card .content h3{
  margin:0;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.media-card .content p{
  margin:0;
  font-size: 12px;
  opacity:.85;
  font-weight: 800;
}
.media-card .content .price{
  margin-top:auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  font-size: 12px;
  opacity:.92;
}
.tag{
  padding: 8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(7,7,18,.35);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.form{
  display:grid;
  gap:12px;
}
.input{
  width:100%;
  padding: 14px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  outline:none;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
}

/* Native select dropdown readability (important for checkout time picker)
   Some browsers render the dropdown with white background while keeping
   light text, making options hard to see. */
select.input{ color: var(--text); }
select.input option{
  background: rgba(7,7,18,.96);
  color: rgba(242,246,255,.92);
}

.input::placeholder{ color: rgba(255,255,255,.55); }
textarea.input{ min-height: 120px; resize: vertical; }

.row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.row > *{ flex: 1 1 220px; }

.notice{
  padding: 12px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-size: 12px;
  opacity:.9;
}

.footer{
  margin-top:auto;
  border-top: 1px solid rgba(255,255,255,.12);
  background: rgba(7,7,18,.62);
  backdrop-filter: blur(12px);
}
.footer-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.footer small{
  font-weight: 900;
  letter-spacing: .6px;
  opacity: .84;
}
.crypto{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.crypto .coin{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.crypto .coin b{ color: var(--gold); }

.neon{
  color: white;
  text-shadow:
    0 0 14px rgba(255,63,209,.55),
    0 0 30px rgba(53,230,255,.35);
}
.neon-pink{
  text-shadow:
    0 0 12px rgba(255,63,209,.65),
    0 0 34px rgba(255,63,209,.35);
}
.neon-cyan{
  text-shadow:
    0 0 12px rgba(53,230,255,.65),
    0 0 34px rgba(53,230,255,.35);
}

.intro{
  min-height: 100vh;
  display:grid;
  place-items:center;
  padding: 24px 18px;
}
.intro-card{
  width:min(940px, 100%);
  padding: 28px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(7,7,18,.55), rgba(7,7,18,.32));
  box-shadow: var(--shadow);
  text-align:center;
}
.intro-card h1{
  margin: 0 0 8px;
  font-size: clamp(38px, 6vw, 76px);
  text-transform: uppercase;
  letter-spacing: 1.6px;
}
.intro-card p{
  margin:0 auto 18px;
  max-width: 680px;
  font-size: 13px;
  opacity: .9;
  font-weight: 800;
}
.neon-enter{
  margin: 10px auto 16px;
  padding: 16px 22px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,63,209,.18);
  color: white;
  font-size: 14px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor:pointer;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 0 26px rgba(255,63,209,.45),
    0 0 60px rgba(255,63,209,.18);
  animation: pulse 1.35s ease-in-out infinite;
}
.neon-enter:hover{ filter:saturate(1.08); transform: translateY(-1px); }
.neon-enter:active{ transform: translateY(0); }

@keyframes pulse{
  0%{ box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 22px rgba(255,63,209,.35), 0 0 50px rgba(53,230,255,.12); }
  50%{ box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 0 34px rgba(255,63,209,.62), 0 0 70px rgba(53,230,255,.18); }
  100%{ box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 22px rgba(255,63,209,.35), 0 0 50px rgba(53,230,255,.12); }
}

/* Yachts page */
.split{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  align-items:stretch;
}
@media (max-width: 980px){
  .split{ grid-template-columns: 1fr; }
}
.listing{
  display:grid;
  gap:14px;
}
.yacht-card{
  display:grid;
  grid-template-columns: 240px 1fr;
  gap:14px;
  overflow:hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.yacht-card .thumb{
  position: relative;
  min-height: 170px;
  overflow:hidden;
}
.yacht-card .thumb .thumb-bg{
  position:absolute; inset:0;
  background-size: cover;
  background-position:center;
  filter: saturate(1.18) contrast(1.12) brightness(1.05);
  transform: scale(1.02);
}
.yacht-card .thumb:after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.55));
  pointer-events:none;
}

/* INSTANT BOOK logo image (top-left on listing cards) */
.yacht-card .thumb .instant-logo{
  position:absolute;
  top:10px;
  left:10px;
  z-index:3;
  width:60px;
  max-width: 60%;
  height:auto;
  filter: drop-shadow(0 30px 30px rgba(0,0,0,.45));
}
.corner-badge{
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(7,7,18,.55);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.corner-badge.type{
  top:auto;
  bottom:10px;
  left:10px;
  opacity:.95;
}
.corner-badge.flame{
  /* Make INSTANT badge always readable on bright photos */
  background: linear-gradient(90deg, rgba(255,43,214,.92), rgba(0,229,255,.72));
  border-color: rgba(255,255,255,.18);
  color: rgba(0,0,0,.88);
  font-weight: 1000;
  letter-spacing: 1.2px;
  text-shadow: none;
  box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 22px rgba(255,43,214,.22);
}
.yacht-card .body{
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.yacht-card h3{
  margin:0;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.yacht-meta{
  display:flex; flex-wrap:wrap; gap:8px;
}
.yacht-meta span{
  font-size: 11px;
  opacity:.86;
  letter-spacing: .9px;
  text-transform: uppercase;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(7,7,18,.35);
  padding: 8px 10px;
  border-radius: 999px;
}
.yacht-actions{
  margin-top:auto;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.price-big{
  margin-left:auto;
  font-size: 14px;
  letter-spacing:1px;
  opacity:.98;
}
.price-big .old{
  text-decoration: line-through;
  opacity:.65;
  margin-right: 8px;
}
.price-big b{ color: var(--gold); }

/* Yacht detail */
.yacht-detail{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:16px;
  align-items:start;
}
@media (max-width: 980px){
  .yacht-detail{ grid-template-columns: 1fr; }
}
.gallery{
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.gallery-main{
  height: 360px;
  background: #111;
  position:relative;
}
.gallery-main img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-thumbs{
  display:flex;
  gap:10px;
  padding: 12px;
  overflow:auto;
}
.gallery-thumbs button{
  border:none;
  background: transparent;
  padding:0;
  cursor:pointer;
  opacity:.9;
}
.gallery-thumbs img{
  width: 86px;
  height: 58px;
  object-fit:cover;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.16);
}
.gallery-thumbs button.active img{
  border-color: rgba(255,63,209,.70);
  box-shadow: 0 0 0 1px rgba(255,63,209,.35), 0 0 22px rgba(255,63,209,.28);
}

.spec-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}
@media (max-width: 700px){
  .spec-grid{ grid-template-columns: 1fr; }
}
.spec{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(7,7,18,.35);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 12px;
  letter-spacing: .8px;
  text-transform: uppercase;
  opacity:.92;
}

.spec .i{ font-size:18px; margin-bottom:6px; }
.spec .k{ opacity:.75; font-size:11px; }
.spec .v{ margin-top:4px; font-weight:900; letter-spacing:1px; }

/* Simple availability pills (yacht detail only) */
#calendar.cal{
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
#calendar.cal .day{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(7,7,18,.30);
  border-radius: 14px;
  padding: 12px;
  color: rgba(255,255,255,.92);
  font-weight: 800;
  letter-spacing: 1px;
  cursor:pointer;
  text-transform: uppercase;
}
#calendar.cal .day:hover{
  border-color: rgba(255,63,209,.55);
  box-shadow: 0 0 0 1px rgba(255,63,209,.25), 0 0 18px rgba(255,63,209,.18);
}
#calendar.cal .day.active{
  border-color: rgba(0,255,255,.55);
  box-shadow: 0 0 0 1px rgba(0,255,255,.22), 0 0 18px rgba(0,255,255,.18);
}

.bullets{ margin:0; padding-left: 18px; }
.bullets li{ margin: 6px 0; opacity:.9; }

.map-embed{ border:1px solid rgba(255,255,255,.12); border-radius: var(--radius); overflow:hidden; }
.map-embed iframe{ width:100%; height: 320px; border:0; }

.offer-head{ opacity:.85; margin-bottom:10px; }
.offer-row{
  display:grid;
  grid-template-columns: 1.2fr 1fr .6fr .8fr;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(0,0,0,.25);
  margin: 8px 0;
}
.offer-row .t, .offer-row .p, .offer-row .c{ opacity:.9; }

.auth-wrap{ display:flex; justify-content:center; padding: 18px 0; }
.auth-card{ width:100%; max-width: 520px; }

/* Mobile improvements */
@media (max-width: 900px){
  .navlinks{ display:none; }
  .yacht-card{ grid-template-columns: 1fr; }
  .yacht-card .thumb{ height: 220px; }
  .yacht-detail{ grid-template-columns: 1fr; }
  .checkout-wrap{ grid-template-columns: 1fr; }
  .offer-row{ grid-template-columns: 1fr; }
  .map-embed iframe{ height: 260px; }
}

.cal{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  overflow:hidden;
  background: rgba(255,255,255,.05);
}
.cal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.cal-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:8px;
  padding: 12px;
}
.cal-dow{
  font-size: 11px;
  opacity:.75;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.cal-day{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(7,7,18,.30);
  border-radius: 12px;
  min-height: 42px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  cursor:pointer;
  user-select:none;
}
.cal-day.disabled{
  opacity:.32;
  cursor:not-allowed;
}
.cal-day.available{
  border-color: rgba(53,230,255,.35);
  box-shadow: 0 0 0 1px rgba(53,230,255,.15);
}
.cal-day.selected{
  border-color: rgba(255,63,209,.70);
  box-shadow: 0 0 0 1px rgba(255,63,209,.25), 0 0 22px rgba(255,63,209,.22);
}

.addons-strip{
  display:flex;
  gap:12px;
  overflow:auto;
  padding: 10px 4px;
}
.addon-chip{
  min-width: 150px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);
  border-radius: 16px;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.addon-chip .img{ height: 92px; background-size:cover; background-position:center; }
.addon-chip .meta{ padding: 10px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.addon-chip .title{ font-size: 12px; letter-spacing:.9px; text-transform: uppercase; opacity:.92; }

.included-copy{
  font-weight: 800;
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: .2px;
  color: rgba(242,246,255,.90);
}
.addon-chip .plus{ width: 36px; height: 36px; border-radius: 12px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,63,209,.5); background: rgba(255,63,209,.18); cursor:pointer; }

#map{
  width:100%;
  min-height: 520px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  overflow:hidden;
  box-shadow: var(--shadow);
}

/* Admin table */
.table{
  width:100%;
  border-collapse: collapse;
  overflow:hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.table th, .table td{
  padding: 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .8px;
}
.table th{
  text-align:left;
  opacity:.9;
  background: rgba(255,255,255,.06);
}
.table td{ opacity:.88; }
.table tr:last-child td{ border-bottom:none; }

.badge{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  display:inline-flex;
  gap:8px;
  align-items:center;
  font-size: 11px;
  letter-spacing:1px;
  text-transform: uppercase;
}
.badge.ok{ border-color: rgba(56,246,166,.35); }
.badge.warn{ border-color: rgba(255,210,122,.35); }
.badge.danger{ border-color: rgba(255,77,109,.45); }

.toast{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1000;
  display:grid;
  gap:10px;
}
.toast .msg{
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(7,7,18,.72);
  box-shadow: var(--shadow);
  font-size: 12px;
  letter-spacing: .9px;
  text-transform: uppercase;
  opacity:.95;
}

.brand-logo{
  height: 58px;
  width: auto;
  display:block;
  filter: drop-shadow(0 0 10px rgba(255,77,220,.28)) drop-shadow(0 0 18px rgba(94,238,255,.16));
}
.brand{ display:flex; align-items:center; gap:12px; }

.btn.call{
  gap:10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  position:relative;
  overflow:hidden;
}
.btn.call .call-icon{
  font-size: 16px;
  filter: drop-shadow(0 0 10px rgba(255,77,220,.35));
}
.btn.call .montana{
  font-family: "Bebas Neue", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: 1.6px;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  text-transform: uppercase;
  margin-left: 8px;
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,.14);
  text-shadow: 0 0 12px rgba(255,77,220,.28);
}
.btn.call.gta{
  border-color: rgba(255,77,220,.35);
  box-shadow: 0 0 0 1px rgba(0,0,0,.18) inset, 0 10px 30px rgba(255,77,220,.10);
}
.btn.call.gta:hover{
  border-color: rgba(255,77,220,.65);
  background: rgba(255,77,220,.10);
  animation: neonFlicker 1.6s ease-in-out infinite;
}

.cart-mini{
  margin-left: 6px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.cart-count{
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  padding: 0 6px;
  font-size: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,77,220,.25);
  border: 1px solid rgba(255,77,220,.55);
  box-shadow: 0 0 12px rgba(255,77,220,.25);
}

.tag.flame{
  background: linear-gradient(90deg, rgba(255,116,0,.25), rgba(255,0,76,.18));
  border-color: rgba(255,160,0,.45);
  color: rgba(255,240,220,.98);
  position: relative;
  overflow:hidden;
}
.tag.flame::before{
  content:"";
  position:absolute; inset:-30% -20%;
  background: radial-gradient(circle at 30% 60%, rgba(255,180,0,.35), rgba(0,0,0,0) 55%),
              radial-gradient(circle at 60% 40%, rgba(255,80,0,.30), rgba(0,0,0,0) 60%),
              radial-gradient(circle at 70% 70%, rgba(255,0,76,.22), rgba(0,0,0,0) 58%);
  animation: flameMove 1.4s ease-in-out infinite;
}
@keyframes flameMove{
  0%,100%{ transform: translateY(0) rotate(-2deg); opacity:.95; }
  50%{ transform: translateY(-6px) rotate(2deg); opacity:.75; }
}

.photo-tiles{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .photo-tiles{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.photo-tile{
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  min-height: 170px;
  position:relative;
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.04);
}
.photo-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: saturate(1.12) contrast(1.08) brightness(1.10);
  transform: scale(1.03);
}

.price-big .old{
  text-decoration: line-through;
  opacity:.75;
  margin-right:8px;
}


/* Geo suggestions + Map price pins */
.suggest{
  position:absolute;
  top: 52px;
  left:0;
  right:0;
  background: rgba(10,10,22,.96);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  overflow:hidden;
  z-index: 60;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.suggest .item{
  padding: 10px 12px;
  cursor:pointer;
  font-size: 12px;
  letter-spacing: .9px;
  text-transform: uppercase;
  opacity:.92;
  border-top: 1px solid rgba(255,255,255,.08);
}
.suggest .item:first-child{ border-top:none; }
.suggest .item:hover{
  background: rgba(255,63,209,.12);
}

.vm-pin{ background: transparent; border: none; }
.pin-price{
  background: rgba(10,10,22,.88);
  border: 1px solid rgba(255,255,255,.22);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .8px;
  font-size: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 18px rgba(0,255,255,.12);
  backdrop-filter: blur(10px);
  transform: translateY(-2px);
  white-space: nowrap;
}
.pin-price b{ color: var(--gold); }

.leaflet-popup-content-wrapper{
  background: rgba(10,10,22,.96);
  color: #fff;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 42px rgba(0,0,0,.45);
}
.leaflet-popup-tip{ background: rgba(10,10,22,.96); }

.vm-popup{
  display:flex;
  gap:10px;
  align-items:stretch;
  min-width: 240px;
}
.vm-popup img{
  width: 120px;
  height: 84px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
}
.vm-popup .meta{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.vm-popup .name{
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-size: 12px;
}
.vm-popup .sub{
  font-size: 12px;
  opacity: .88;
  letter-spacing: .6px;
}
.vm-popup .sub b{ color: var(--gold); }
.vm-popup .actions a{
  display:inline-flex;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  text-decoration:none;
  color:#fff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .8px;
}
.vm-popup .actions a:hover{
  box-shadow: 0 0 0 1px rgba(255,63,209,.35), 0 0 20px rgba(255,63,209,.22);
  border-color: rgba(255,63,209,.42);
}

/* MOBILE BOTTOM BAR */
.bottom-bar{
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 100;
  display: none;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 22px;
  background: rgba(7,7,18,.72);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
}
.bottom-bar .bb{
  flex: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 10px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  letter-spacing: .7px;
  text-transform: uppercase;
  transition: .16s ease;
  white-space: nowrap;
}
.bottom-bar .bb .i{ font-size: 16px; line-height:1; }
.bottom-bar .bb .t{ font-size: 11px; }
.bottom-bar .bb.active{
  border-color: rgba(255,63,209,.55);
  color: var(--neon-pink);
  background: rgba(255,63,209,.08);
  box-shadow: 0 0 0 1px rgba(255,63,209,.22), 0 0 24px rgba(255,63,209,.16);
}
@media (max-width: 760px){
  .bottom-bar{ display:flex; }
  body{ padding-bottom: 94px; }

  /* iOS-safe header + prevent half-cut top menu */
  .topbar{ padding-top: env(safe-area-inset-top); }

  /* Mobile header: 1.5x bigger so logo is readable */
  .nav{
    /* IMPORTANT: do NOT double-apply safe-area padding (topbar already has it) */
    padding: 22px 16px;
    min-height: 110px;
    position:relative;
    justify-content:flex-end;
  }

  /* Center the logo without blocking the hamburger click */
  .brand{
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    width:auto;
    max-width: calc(100% - 96px);
    justify-content:center;
    z-index:2;
  }
  .brand-logo{ height: 66px; width:auto; }

  /* Mobile header: show hamburger only */
  .nav-cta{
    display:flex !important;
    position:absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    gap: 8px;
    z-index:5;
  }
  .nav-cta > *{ display:none !important; }
  .nav-cta .mnav-toggle{ display:inline-flex !important; align-items:center; justify-content:center; }
  .cart-mini{ display:none !important; }
}


/* CHECKOUT WIZARD */
.checkout-wrap{
  /* Center everything + keep content readable */
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  max-width: 920px;
  margin: 0 auto;
}

.checkout-wrap > div{ width: 100%; }

/* Checkout container sizes */
.checkout-wrap .co-step{ width:100%; max-width:720px; }
.checkout-wrap .co-progress{ width:100%; max-width:720px; margin-left:auto; margin-right:auto; }

.checkout-wrap .co-progress{ justify-content:center; }

/* iPhone-style mobile checkout */
@media (max-width: 760px){
  .checkout-wrap{ max-width: 100%; padding-left: 0; padding-right: 0; }

  /* Progress chips become swipeable pills */
  .co-progress{
    position: sticky;
    /* Keep progress bar BELOW the mobile header (header is ~110px on mobile). */
    top: calc(118px + env(safe-area-inset-top));
    z-index: 6;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 0 10px;
    margin-bottom: 4px;
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
  .co-progress::-webkit-scrollbar{ display:none; }
  .co-chip{ flex: 0 0 auto; }

  /* Cards feel more iOS */
  .co-step{ border-radius: 22px; }
  .co-step .row{ flex-direction: column; gap: 10px; }
  /* When rows become columns on mobile, stop children from flex-growing vertically */
  .co-step .row > *{ flex: 0 0 auto !important; }
  .co-step .input{
    width: 100%;
    padding: 12px 12px;
    font-size: 14px;
    letter-spacing: .4px;
  }

  /* Buttons stack nicely */
  .co-actions{ display:flex; flex-direction: column; gap: 10px; }
  .co-actions .btn{ width: 100%; }

  /* Make final buttons compact (avoid giant blocks on iPhone) */
  .co-final-actions{ flex-direction: column; gap: 10px; }
  .co-final-actions > *{ flex: 0 0 auto !important; }
  /* Force iPhone-safe final action button sizing */
  .co-final-actions .btn,
  .co-final-actions a.btn{
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 10px 14px !important;
    border-radius: 18px !important;
    font-size: 12px !important;
    letter-spacing: .6px !important;
    white-space: nowrap;
  }
  .co-final-actions .btn.ghost{ height: 48px !important; }

  /* Slightly smaller form controls on mobile */
  .co-step .input{ padding: 12px 12px; border-radius: 20px; font-size: 14px; }
}

/* Checkout final buttons should not become giant blocks on iPhone */
@media (max-width: 760px){
  .co-final-actions{ display:flex; flex-direction:column; gap:10px; }
  .co-final-actions > *{ flex: 0 0 auto !important; }
  /* Extra safeguard for any duplicated rules */
  .co-final-actions .btn,
  .co-final-actions a.btn{
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 10px 14px !important;
    border-radius: 18px !important;
    font-size: 12px !important;
    letter-spacing: .6px !important;
    white-space: nowrap;
  }
}
.checkout-wrap .co-actions{ justify-content:center; }
.checkout-wrap .section-title{ justify-content:center; }
.checkout-wrap .row{ justify-content:center; }

/* Step-by-step visibility (strong) */
.co-step{ display:none !important; }
.co-step.is-active{ display:block !important; }

.co-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.co-progress{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.co-chip{
  padding: 10px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-size: 11px;
  letter-spacing: .9px;
  text-transform: uppercase;
  opacity: .8;
}
.co-chip.is-current{
  opacity: 1;
  border-color: rgba(255,43,214,.38);
  box-shadow: 0 0 0 1px rgba(255,43,214,.18) inset, 0 0 22px rgba(255,43,214,.14);
}
.co-chip.is-done{
  opacity: 1;
  border-color: rgba(0,229,255,.32);
  box-shadow: 0 0 0 1px rgba(0,229,255,.14) inset;
}

/* Checkout trust + policy boxes */
.co-trust{
  display:grid;
  gap: 10px;
  margin: 10px 0 14px;
}
.co-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-start;
}
.pay-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(242,246,255,.92);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pay-badge.apple{
  background: rgba(0,0,0,.55);
  border-color: rgba(255,255,255,.18);
}
.pay-badge.stripe{
  border-color: rgba(0,229,255,.28);
  box-shadow: 0 0 18px rgba(0,229,255,.10);
}
.pay-badge.visa{ border-color: rgba(255,43,214,.24); }
.pay-badge.mc{ border-color: rgba(255,195,74,.22); }

.co-policies{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.policy-card{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 12px 12px;
}
.policy-title{
  font-weight: 900;
  letter-spacing: .16em;
  font-size: 11px;
  opacity: .95;
}
.policy-text{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  opacity: .78;
}
@media (max-width: 760px){
  .co-policies{ grid-template-columns: 1fr; }
}

/* Apple-style sticky action bar (mobile only) */
.co-sticky{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 20;
  display:none;
  align-items:center;
  gap:10px;
  padding: 12px 12px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,12,18,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.co-sticky .btn{ height: 46px; padding-left: 14px; padding-right: 14px; }
.co-sticky-mid{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.co-sticky-label{
  font-size: 10px;
  letter-spacing: .18em;
  opacity: .72;
  text-transform: uppercase;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.co-sticky-total{
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .02em;
}
@media (max-width: 760px){
  .co-sticky{ display:flex; }
  /* extra padding so content isn't hidden behind the sticky bar */
  body{ padding-bottom: 160px; }
}
@media (max-width: 980px){
  .checkout-wrap{ max-width: 100%; }
}
.steps{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom: 12px;
}
.step-pill{
  padding: 10px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-size: 12px;
  letter-spacing: .9px;
  text-transform: uppercase;
  opacity:.85;
}
.step-pill.on{
  color: var(--neon-pink);
  border-color: rgba(255,63,209,.55);
  background: rgba(255,63,209,.08);
  box-shadow: 0 0 24px rgba(255,63,209,.14);
  opacity:1;
}
.wizard-actions{
  display:flex;
  gap:10px;
  margin-top: 12px;
}
.wizard-actions .btn{ flex:1; }

.review-card{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(7,7,18,.35);
  border-radius: 16px;
  padding: 14px;
}
.review-card .top{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.stars{ letter-spacing:2px; color: var(--gold); }
.review-card .meta{ font-size: 12px; opacity:.88; letter-spacing:.8px; text-transform:uppercase; }
.review-card p{ margin: 10px 0 0; font-size: 13px; line-height:1.4; opacity:.9; font-weight:800; }

.offer-list{
  display:grid;
  gap:10px;
}
.offer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
}
.offer-row b{ color: var(--gold); }


/* --- 2026 DETAIL + FILTER POLISH --- */
.gallery-grid{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:12px;
}
.gallery-main{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.35);
  min-height:320px;
}
.gallery-main img{
  width:100%;
  height:100%;
  min-height:320px;
  object-fit:cover;
  display:block;
}
.gallery-side{
  display:grid;
  gap:12px;
}
.gallery-side .side-shot{
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  overflow:hidden;
  background:rgba(0,0,0,.35);
  padding:0;
  cursor:pointer;
  min-height:154px;
}
.gallery-side .side-shot img{
  width:100%;
  height:100%;
  min-height:154px;
  object-fit:cover;
  display:block;
}
.gallery-thumbs button img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* small avatar blocks (host + reviews) */
.avatar{
  width:64px;
  height:64px;
  border-radius:18px;
  background-size:cover;
  background-position:center;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 0 0 1px rgba(0,0,0,.35) inset, 0 10px 24px rgba(0,0,0,.35);
}
.avatar-sm{
  width:42px;
  height:42px;
  border-radius:14px;
  background-size:cover;
  background-position:center;
  border:1px solid rgba(255,255,255,.14);
  flex:0 0 auto;
  margin-right:10px;
}
.review-card{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

/* make ALL TYPES filter look neon + colored */
.type-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.type-pill{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.35);
  padding:10px 12px;
  border-radius:999px;
  cursor:pointer;
  font-weight:900;
  letter-spacing:.4px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.type-pill:hover{ transform: translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.35); border-color: rgba(255,63,209,.55); }
.type-pill.active{ border-color: rgba(255,63,209,.9); box-shadow:0 0 0 2px rgba(255,63,209,.15) inset; }
.type-pill[data-type="MOTOR YACHT"]{ color: var(--gold); }
.type-pill[data-type="SPEED BOAT"]{ color: var(--neon-pink); }
.type-pill[data-type="SAILING"]{ color: #63e6ff; }
.type-pill[data-type=""]{ color: rgba(255,255,255,.92); }

/* reduce forced ALL CAPS in key UI */
.btn, .badge, .pill, .navlinks a, .input { text-transform:none !important; letter-spacing:.2px; }
h1,h2,h3{ text-transform:none; }


/* brand-logo responsive */
@media (max-width: 760px){
  .brand-logo{height:44px;}
}



/* ===== Home hero search bar (Boatsetter-style) ===== */
.hero-searchbar{
  position:relative;
  margin-top: 14px;
display:flex;
  align-items:stretch;
  gap:0;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 2px solid rgba(255,77,220,.45);
  box-shadow: 0 18px 45px rgba(0,0,0,.35), 0 0 0 rgba(255,77,220,.0);
  overflow:hidden;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Home hero search bar — compact + no blank ends (Requested) ===== */
/* This block is intentionally placed after the original rules as an override.
   Goal: slightly smaller bar + ensure left/right ends sit flush with content
   (no extra white protrusion) while keeping the same Miami Vice style. */
.hero-searchbar{
  max-width: 620px; /* smaller like reference */
}

/* Make the form fill the whole pill so no empty white area remains */
.hero-searchbar .hs-form{
  flex: 1;
  width: 100%;
  display: flex;
  align-items: stretch;
}

/* Slightly tighter segments + button */
.hero-searchbar .hs-seg{
  padding: 12px 14px;
}

.hero-searchbar .hs-icon{ font-size: 17px; margin-right: 10px; }
.hero-searchbar .hs-top{ font-size: 12px; }
.hero-searchbar .hs-bottom{ font-size: 15px; }

.hero-searchbar .hs-btn{
  width: 64px;
  border: 0;
}

/* Badge position tuned for smaller pill */
.hero-searchbar .hs-badge{
  right: 14px;
  top: -11px;
  padding: 7px 12px;
}

@media (max-width: 720px){
  .hero-searchbar{ max-width: 100%; border-radius: 26px; }
  .hero-searchbar .hs-form{ flex-wrap: wrap; }
  .hero-searchbar .hs-divider{ display: none; }
  .hero-searchbar .hs-seg{ width: 100%; border-bottom: 1px solid rgba(0,0,0,.10); }
  .hero-searchbar .hs-seg:last-of-type{ border-bottom: none; }
  .hero-searchbar .hs-btn{ width: 100%; height: 48px; font-size: 20px; }
}
.hero-searchbar:before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius: 999px;
  border: 3px solid rgba(255,77,220,.25);
  filter: blur(.2px);
  pointer-events:none;
  animation: vmNeonPulse 1.6s ease-in-out infinite;
}
@keyframes vmNeonPulse{
  0%,100%{ box-shadow: 0 0 0 rgba(255,77,220,.0); opacity:.55; }
  50%{ box-shadow: 0 0 28px rgba(255,77,220,.28); opacity:1; }
}
.hero-searchbar .hs-badge{
  position:absolute;
  top:-12px;
  right:22px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color:#0b0b18;
  background: linear-gradient(90deg, rgba(255,77,220,1), rgba(94,238,255,1));
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  animation: vmBadgeBlink 1.25s ease-in-out infinite;
}
@keyframes vmBadgeBlink{
  0%,100%{ filter:saturate(1); opacity:1;}
  50%{ filter:saturate(1.2) brightness(1.05); opacity:.9;}
}
.hero-searchbar .hs-seg{
  flex:1;
  display:flex;
  align-items:center;
  padding: 16px 18px;
  min-width: 0;
}
.hero-searchbar .hs-icon{
  font-size: 18px;
  margin-right: 12px;
}
.hero-searchbar .hs-top{
  font-weight: 800;
  font-size: 12px;
  color: rgba(0,0,0,.68);
}
.hero-searchbar .hs-bottom{
  font-weight: 800;
  font-size: 16px;
  color: rgba(0,0,0,.92);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.hero-searchbar .hs-divider{
  width:1px;
  background: rgba(0,0,0,.10);
}
.hero-searchbar .hs-btn{
  width: 78px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
  background: rgba(94,238,255,.95);
  color:#071018;
  text-decoration:none;
}
.hero-searchbar .hs-btn:hover{ filter: brightness(1.03); }

/* ===== Featured yachts (info below image) ===== */
.featured-yacht-card{
  display:block;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow);
}
.featured-yacht-card .fy-media{
  position:relative;
  height: 170px;
  background-size: cover;
  background-position: center;
}

/* INSTANT BOOK sticker badge (featured yachts) */
.featured-yacht-card .fy-sticker{
  position:absolute;
  /* ✅ Top-left corner on the photo (visible, not cut) */
  left: 2px !important;
  top: 2px !important;
  width: 110px !important;
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.38));
  transform: rotate(-12deg);
  pointer-events:none;
  z-index: 5;
}
.featured-yacht-card .fy-chip{
  position:absolute;
  top:12px;
  left:12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .9px;
  text-transform: uppercase;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(7,7,18,.45);
  backdrop-filter: blur(6px);
}
.featured-yacht-card .fy-chip.alt{ opacity:.85; }
.featured-yacht-card .fy-body{
  padding: 12px 14px 14px;
}
.featured-yacht-card .fy-title{
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .4px;
  margin-bottom: 6px;
}
.featured-yacht-card .fy-meta{
  font-size: 12px;
  opacity:.92;
  margin-bottom: 10px;
}
.featured-yacht-card .fy-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.featured-yacht-card .fy-price{
  display:flex;
  align-items:baseline;
  gap: 8px;
  font-size: 12px;
}
.featured-yacht-card .fy-from{ opacity:.8; font-size: 11px; }
.featured-yacht-card .fy-old{ text-decoration: line-through; opacity:.65; }
.featured-yacht-card .fy-now{ color: var(--gold); font-weight: 900; font-size: 14px; }
.featured-yacht-card .fy-unit{ opacity:.85; margin-left: 2px; }
.featured-yacht-card .fy-view{
  padding: 7px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  font-size: 11px;
  letter-spacing: .9px;
  text-transform: uppercase;
}

/* ===== Packages (4 tiles) ===== */
.pkg-tile{ position:relative; overflow:hidden; }
.pkg-tile img{ transform: scale(1.02); }
.pkg-tile .pkg-cap{
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
}
.pkg-tile .pkg-title{
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .5px;
}
.pkg-tile .pkg-sub{
  margin-top: 3px;
  font-size: 10px;
  opacity: .9;
  letter-spacing: 1px;
}

/* Home responsive */
@media (max-width: 980px){
  .hero-searchbar{ max-width: 100%; }
}
@media (max-width: 720px){
  .hero-searchbar{ border-radius: 22px; flex-direction: column; }
  .hero-searchbar:before{ border-radius: 24px; }
  .hero-searchbar .hs-divider{ width:100%; height:1px; }
  .hero-searchbar .hs-btn{ width:100%; height:54px; }
  .hero-searchbar .hs-badge{ right: 14px; }
  .featured-yacht-card .fy-media{ height: 190px; }
}


/* ===== Firebase + Admin UI polish overrides ===== */
.hs-form{ display:flex; width:100%; align-items:stretch; gap:0; }
.hs-control{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}
.hs-seg{ position:relative; }
.hs-seg.hs-click:hover{ background: rgba(0,0,0,.03); }

.card-white{
  color: rgba(10,16,28,.92);
}
.card-white .hint{ color: rgba(10,16,28,.55) !important; }
.card-white h2, .card-white h3{
  color: rgba(10,16,28,.95);
}
.card-white .notice{
  color: rgba(10,16,28,.72);
}
.card-white .btn.ghost{
  border: 1px solid rgba(10,16,28,.25);
  color: rgba(10,16,28,.92);
  background: rgba(255,255,255,.75);
}
.card-white .btn.ghost:hover{
  border-color: rgba(255,43,214,.55);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* Reviews in white cards: make them colorful + stars orange */
.card-white .review-card{
  background: linear-gradient(135deg, rgba(255,43,214,.14), rgba(94,238,255,.12));
  border: 1px solid rgba(255,43,214,.20);
}
.card-white .review-card p{ color: rgba(10,16,28,.82); opacity:1; }
.card-white .review-card .meta{ color: rgba(242,246,255,.65); opacity:1; }
.card-white .stars{ color: #ff9a2e; }

/* Gallery: show only one main image + arrows (thumbs hidden) */
.gallery-thumbs{ display:none !important; }

/* Similar boats tag styling */
.sim-tag{
  position:absolute;
  top:12px;
  left:12px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: #071018;
  background: linear-gradient(90deg, rgba(94,238,255,1), rgba(255,43,214,1));
  box-shadow: 0 12px 24px rgba(0,0,0,.25);
}
.sim-tag.request{
  background: linear-gradient(90deg, rgba(255,154,46,1), rgba(255,43,214,1));
}
.sim-price{
  position:absolute;
  bottom:12px;
  left:12px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  background: rgba(7,9,13,.55);
  border: 1px solid rgba(255,255,255,.22);
}

/* Reviews page header stars */
#rvHeader .notice .stars{ color:#ff9a2e; }

/* ===== Fix v3 (Jan 2026): prevent regressions =====
   - Boat type tiles always side-by-side
   - Yacht gallery arrows visible + swipe
   - Similar boats visible + styled like yacht cards
   - card-white actually white (text was dark on dark glass)
*/

/* card-white must also change background, not just text */
.card.card-white{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90));
  border: 1px solid rgba(255,255,255,.60);
  box-shadow: 0 18px 46px rgba(0,0,0,.28);
}

/* Boat type tiles (yachts.html) */
.type-tiles{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  margin-top: 12px;
}
@media (max-width: 980px){
  .type-tiles{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .type-tiles{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.type-tile{
  display:block;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  box-shadow: 0 16px 44px rgba(0,0,0,.28);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.type-tile img{
  width:100%;
  height: 92px;
  object-fit: cover;
  display:block;
  filter: saturate(1.15) contrast(1.05);
}
.type-tile:hover{
  transform: translateY(-2px);
  filter: saturate(1.15);
  box-shadow: 0 20px 52px rgba(0,0,0,.34);
  border-color: rgba(255,43,214,.35);
}

/* Yacht gallery arrows (yacht.html) */
.gallery-main{ position:relative; }
.g-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(7,9,13,.52);
  color: rgba(255,255,255,.95);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index: 6;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  user-select:none;
}
.g-nav.prev{ left: 12px; }
.g-nav.next{ right: 12px; }
.g-nav:hover{
  border-color: rgba(255,43,214,.45);
  box-shadow: 0 0 0 1px rgba(255,43,214,.22), 0 14px 34px rgba(0,0,0,.35);
}
.g-count{
  position:absolute;
  right: 12px;
  bottom: 12px;
  z-index: 6;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .8px;
  color: rgba(255,255,255,.95);
  background: rgba(7,9,13,.52);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Similar boats layout + colors */
.similar-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .similar-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .similar-grid{ grid-template-columns: 1fr; }
}
.sim-card{
  display:block;
  border-radius: 18px;
  overflow:hidden;
  text-decoration:none;
  border: 1px solid rgba(10,16,28,.14);
  background: rgba(7,9,13,.92);
  box-shadow: 0 18px 46px rgba(0,0,0,.24);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sim-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,43,214,.34);
  box-shadow: 0 24px 62px rgba(0,0,0,.30);
}
.sim-img{
  position:relative;
  height: 170px;
  background-size: cover;
  background-position: center;
  filter: saturate(1.18) contrast(1.04);
}
.sim-body{ padding: 12px 12px 14px; }
.sim-title{
  margin-top: 8px;
  font-weight: 1000;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(255,255,255,.96);
}
.sim-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-size: 12px;
  letter-spacing: .4px;
  color: rgba(255,255,255,.78);
}
.sim-sub{
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .4px;
  color: rgba(255,255,255,.70);
}
.sim-rate .gold{ color:#ff9a2e; }

/* Hero date input: keep it clickable */
.hs-control{ z-index: 5; }
.hs-text, .hs-icon{ position:relative; z-index: 1; }


/* =========================
   FIXES v4 — Card-white, Booking UI, Hero date input
   ========================= */

/* card-white must also be WHITE background (was only changing text color) */
.card.card-white{
  background: rgba(255,255,255,.94);
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
  color: rgba(10,16,28,.92);
}
.card.card-white .hint{ color: rgba(10,16,28,.56); }
.card.card-white .section-title h2,
.card.card-white h2,
.card.card-white h3{ color: rgba(10,16,28,.96); }

/* Ensure hero search date input is clickable (absolute input needs positioned parent) */
.hs-seg{ position:relative; }
.hs-control{ z-index: 6; }

/* Booking card: make it look premium + readable */
.booking-card{
  border-radius: 22px;
  overflow:hidden;
}
.booking-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px rgba(255,43,214,.18), inset 0 0 0 2px rgba(0,229,255,.12);
}
.booking-card .book-top{
  display:flex;
  flex-direction:column;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  margin-bottom: 12px;
}
.booking-card .book-price{
  font-size: 22px;
  font-weight: 1000;
  letter-spacing: .2px;
  color: rgba(10,16,28,.96);
}
.booking-card .book-sub{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .6px;
  color: rgba(10,16,28,.62);
  text-transform: uppercase;
}

/* Labels */
.book-field > span{
  display:block;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .8px;
  text-transform: uppercase;
  margin: 0 0 8px;
  background: linear-gradient(90deg, rgba(255,43,214,1), rgba(0,229,255,1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Inputs/selects inside booking card */
.booking-card .book-input{
  background: linear-gradient(180deg, rgba(245,247,255,.98), rgba(236,240,255,.98));
  border: 1px solid rgba(0,0,0,.12);
  color: rgba(10,16,28,.96);
  font-weight: 800;
  letter-spacing: .2px;
  text-transform: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.booking-card .book-input:focus{
  outline:none;
  border-color: rgba(255,43,214,.55);
  box-shadow: 0 0 0 4px rgba(255,43,214,.12), 0 0 0 1px rgba(0,229,255,.08);
}
.booking-card input[type="date"].book-input{
  color-scheme: light;
}

/* Custom select arrow (keeps it visible on light bg) */
.booking-card select.book-input{
  -webkit-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(180deg, rgba(245,247,255,.98), rgba(236,240,255,.98)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='rgba(10,16,28,0.75)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 0, right 14px center;
  background-size: auto, 18px 18px;
  padding-right: 44px;
}

/* Booking CTA */
.booking-card .book-btn{
  margin-top: 10px;
  width:100%;
  border-radius: 16px;
  padding: 14px 16px;
  font-weight: 1000;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: #071018;
  background: linear-gradient(90deg, rgba(255,43,214,1), rgba(0,229,255,1));
  box-shadow: 0 18px 40px rgba(0,0,0,.22), 0 0 0 1px rgba(255,43,214,.18);
  border: none;
}
.booking-card .book-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 54px rgba(0,0,0,.26), 0 0 0 1px rgba(0,229,255,.22);
}
.booking-card .book-note{
  margin-top: 10px;
  font-weight: 900;
  color: rgba(10,16,28,.72);
}

/* Terms block inside booking card */
.booking-card .book-terms{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.08);
}
.booking-card .terms-title{
  font-weight: 1000;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(10,16,28,.9);
  margin-bottom: 8px;
}
.booking-card .terms-list li{
  color: rgba(242,246,255,.88);
  font-weight: 700;
}

/* Make gallery arrows visible even if single photo (disabled state) */
.g-nav.is-disabled{
  opacity: .28;
  pointer-events:none;
}

.booking-card{ position:relative; }


/* Contact page upgrade */
.contact-split{ align-items: start; }
.contact-head{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.contact-actions{ display:flex; flex-direction:column; gap:12px; margin-top:10px; }
.contact-action{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow);
  text-decoration:none;
  color: rgba(242,246,255,.92);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.contact-action:hover{
  transform: translateY(-2px);
  border-color: rgba(0,229,255,.45);
  background: rgba(255,255,255,.07);
}
.contact-action .icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: radial-gradient(120% 120% at 30% 10%, rgba(255,43,214,.22), rgba(0,229,255,.18));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 0 0 1px rgba(255,43,214,.10), 0 0 24px rgba(0,229,255,.10);
}
.contact-action .meta .title{
  font-weight: 900;
  letter-spacing: .08em;
}
.contact-action .meta .sub{
  margin-top:2px;
  opacity:.78;
  font-size: .95rem;
}
.contact-details{ margin-top: 14px; }
@media (max-width: 980px){
  .contact-actions{ gap:10px; }
  .contact-action{ padding: 12px 12px; }
}


/* Fallback visual if a tile image fails to load */
.photo-tile{
  background: radial-gradient(120% 120% at 30% 10%, rgba(255,43,214,.18), rgba(0,229,255,.14), rgba(255,255,255,.04));
}


/* HERO SEARCHBAR TUNING (fit inside hero on all widths) */
.hero-searchbar{
  width: 100%;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.hero-searchbar .hs-seg{ padding: 12px 14px; }
.hero-searchbar .hs-icon{ font-size: 17px; margin-right: 10px; }
.hero-searchbar .hs-top{ font-size: 11px; }
.hero-searchbar .hs-bottom{ font-size: 15px; }
.hero-searchbar .hs-btn{ width: 64px; font-size: 20px; }

@media (max-width: 900px){
  .hero-searchbar{ max-width: 100%; border-radius: 22px; }
  .hs-form{ flex-wrap: wrap; }
  .hs-seg{ flex: 1 1 260px; }
  .hero-searchbar .hs-btn{ flex: 1 1 100%; width: 100%; height: 54px; }
}


/* HOME WHY TILES (Admin) */
.tile-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.tile-card{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
}
.tile-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.tile-preview{
  height: 170px;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: radial-gradient(120% 120% at 30% 10%, rgba(255,43,214,.14), rgba(0,229,255,.12), rgba(255,255,255,.03));
}
.tile-preview img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
@media (max-width: 980px){
  .tile-grid{ grid-template-columns: 1fr; }
}


/* CONTACT SELECT FIX (Preferred / Request types looked white) */
.contact-form-card select.input{
  background: rgba(0,0,0,.28);
  color: rgba(242,246,255,.92);
  border: 1px solid rgba(255,255,255,.14);
  appearance: none;
  -webkit-appearance: none;
}
.contact-form-card select.input option{
  background: #0b0f18;
  color: rgba(242,246,255,.92);
}


/* CONTACT ICON ROW (right side) */
.contact-actions{
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
}
.contact-action{
  flex: 1 1 240px;
  min-width: 220px;
}
@media (max-width: 720px){
  .contact-action{ flex: 1 1 100%; min-width: 0; }
}

/* Channel-specific neon tints */
#waLink .icon{ 
  background: radial-gradient(120% 120% at 30% 10%, rgba(25,255,150,.22), rgba(0,229,255,.14), rgba(255,255,255,.04));
  box-shadow: 0 0 0 1px rgba(25,255,150,.14), 0 0 26px rgba(25,255,150,.16);
}
#waLink .icon{ color: rgba(25,255,150,.95); }

#tgLink .icon{
  background: radial-gradient(120% 120% at 30% 10%, rgba(0,229,255,.22), rgba(255,43,214,.12), rgba(255,255,255,.04));
  box-shadow: 0 0 0 1px rgba(0,229,255,.16), 0 0 26px rgba(0,229,255,.16);
}
#tgLink .icon{ color: rgba(0,229,255,.95); }

#mailLink .icon{
  background: radial-gradient(120% 120% at 30% 10%, rgba(255,43,214,.24), rgba(0,229,255,.10), rgba(255,255,255,.04));
  box-shadow: 0 0 0 1px rgba(255,43,214,.16), 0 0 26px rgba(255,43,214,.16);
}
#mailLink .icon{ color: rgba(255,43,214,.95); }

#callLink .icon{
  background: radial-gradient(120% 120% at 30% 10%, rgba(170,120,255,.22), rgba(0,229,255,.10), rgba(255,255,255,.04));
  box-shadow: 0 0 0 1px rgba(170,120,255,.16), 0 0 26px rgba(170,120,255,.16);
}
#callLink .icon{ color: rgba(170,120,255,.95); }


/* TOPBAR SHRINK ON SCROLL */
.topbar.is-scrolled .nav{
  padding: 8px 16px;
  gap: 10px;
}
.topbar.is-scrolled .brand-logo{
  height: 44px;
}
.topbar.is-scrolled .navlinks{
  gap: 18px;
}
.topbar.is-scrolled .navlinks a{
  font-size: 12px;
  letter-spacing: .08em;
}
.topbar.is-scrolled .nav-cta{
  gap: 10px;
}
@media (max-width: 980px){
  .topbar.is-scrolled .brand-logo{ height: 40px; }
}


/* TOPBAR BASE TUNING (menu was too big on scroll / took half screen) */
.nav{
  padding: 10px 16px;
  gap: 12px;
}
.brand-logo{ height: 48px; }
.navlinks{ gap: 18px; }
.navlinks a{
  font-size: 12px;
  letter-spacing: .08em;
}
@media (max-width: 980px){
  .brand-logo{ height: 44px; }
}


/* ===== Reviews: gold stars pill (requested) ===== */
.review-card{ position: relative; }
.review-stars-pill{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.review-stars{
  color: #d4af37; /* gold */
  letter-spacing: 1px;
  font-weight: 900;
}
.review-score{
  color: rgba(10,16,28,.85);
  font-weight: 900;
  font-size: 12px;
}


/* ===== Home hero: center title + search, no backdrop ===== */
.hero-inner{ text-align:center; }
.hero-searchbar{ margin-left:auto; margin-right:auto; }
.hs-form{ max-width: 680px; margin: 0 auto; }
.hs-seg{ padding: 14px 16px; }
.hs-btn{ width: 66px; }

/* ===== Reviews: make it look like real client reviews (no ADMIN line) ===== */
.review-card .review-body{ width:100%; }
.review-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.review-author{
  font-weight: 900;
  font-size: 13px;
  line-height: 1.2;
}
.review-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
.review-date{
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(242,246,255,.65);
}
.review-text{
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 800;
  color: rgba(242,246,255,.88);
}


/* Review text colors on white cards */
.card-white .review-date{ color: rgba(10,16,28,.55); }
.card-white .review-text{ color: rgba(10,16,28,.78); }

/* HERO searchbar: dış kabuğu da içiyle aynı genişlik yap */
#hero .hero-searchbar{
  width: min(680px, calc(100% - 28px)) !important;  /* komple daralt */
  margin: 18px auto 0 !important;                  /* tam ortala */
  padding: 0 !important;                           /* dıştaki ekstra boşluğu kaldır */
  overflow: visible !important;
}

/* form dış kabuğun içinde %100 otursun */
#hero #heroSearchForm.hs-form{
  width: 100% !important;
  margin: 0 !important;
}

/* İç segmentlerde solda/sağda fazladan padding varsa biraz azalt */
#hero #heroSearchForm.hs-form .hs-seg{
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Arama butonunun sağında boşluk kalmasın (grid son kolon sabit) */
#hero #heroSearchForm.hs-form{
  grid-template-columns: 1fr 1fr 1fr 56px !important; /* 64 yerine 56 daha sıkı */
}

#hero #heroSearchForm.hs-form .hs-btn{
  width: 56px !important;
  border-radius: 14px !important;
}

/* Badge sağda taşmasın, barın içine otursun */
#hero .hero-searchbar .hs-badge{
  right: 10px !important;
  top: -10px !important;
}
#hero .hero-inner{ max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
#hero .hero-searchbar{ border-radius: 22px !important; }


/* =========================
   MOBILE MENU (Overlay + Bottom Bar)
   ========================= */
.mnav-toggle{
  display:none;
  width: 46px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(10,12,20,.35);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(12px);
}
.mnav-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  padding: 14px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}
.mnav-overlay.open{ display: flex; align-items: flex-start; justify-content: center; }
.mnav-sheet{
  width: min(520px, 100%);
  margin-top: 70px;
  border-radius: 22px;
  background: rgba(10,12,20,.86);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 70px rgba(0,0,0,.65);
  overflow: hidden;
}
.mnav-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.mnav-title{
  font-weight: 900;
  letter-spacing: .18em;
  font-size: 13px;
  opacity: .9;
}
.mnav-close{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  font-size: 16px;
}
.mnav-links{
  display:flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
}
.mnav-links a{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 12px;
  border-radius: 16px;
  text-decoration:none;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.mnav-links a:active{ transform: scale(.99); opacity: .9; }
.mnav-actions{
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.mnav-auth{
  display:flex;
  gap: 10px;
}
.mnav-auth .btn{ flex:1; text-align:center; }

/* no-scroll helper */
.no-scroll{ overflow:hidden !important; }

/* bottom bar: make + button look like your design */
.bottom-bar .bb-plus{
  border-color: rgba(0,229,255,.28);
  background: rgba(0,229,255,.10);
}
.bottom-bar .bb-plus .i{ font-size: 18px; }

/* =========================
   VICE MARINA FIX PACK v3
   - Instant badges visibility
   - Map popup VIEW button
   - Admin select readability
   ========================= */

/* Yachts list INSTANT badge (make it POP) */
.corner-badge.flame{
  background: linear-gradient(90deg, rgba(255,43,214,.92), rgba(0,229,255,.72)) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(0,0,0,.88) !important;
  font-weight: 1000 !important;
  letter-spacing: 1.2px !important;
  text-shadow: none !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 22px rgba(255,43,214,.22) !important;
}

/* Featured yachts INSTANT BOOK chip */
.featured-yacht-card .fy-chip{
  color: rgba(255,255,255,.98) !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, rgba(255,63,209,.92), rgba(0,229,255,.78)) !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.35) !important;
}
.featured-yacht-card .fy-chip.alt{
  background: rgba(10,12,20,.55) !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* Leaflet popup VIEW button (yachts map click) */
.vm-popup .actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,63,209,.92), rgba(0,229,255,.82)) !important;
  color: rgba(10,12,20,.98) !important;
  font-weight: 1000;
  letter-spacing: .9px;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
.vm-popup .actions a:hover{
  transform: translateY(-1px);
}

/* Admin selects: keep selected readable + dropdown readable
   IMPORTANT: scoped so it doesn't affect checkout / booking widgets */
.page-admin select.input{
  background: rgba(10,12,20,.60) !important;
  color: rgba(255,255,255,.96) !important;
}
.page-admin select.input option{
  color: #111 !important;
  background: #fff !important;
}

/* Booking card selects must stay LIGHT (overrides global select rules) */
.booking-card select.book-input{
  background: linear-gradient(180deg, rgba(245,247,255,.98), rgba(236,240,255,.98)) !important;
  color: rgba(10,16,28,.96) !important;
}
.booking-card select.book-input option{
  color: #111 !important;
  background: #fff !important;
}

/* Remove jittery topbar "shrink" effect (keep same sizing on scroll) */
.topbar.is-scrolled .nav{ padding: 10px 16px; gap: 12px; }
.topbar.is-scrolled .brand-logo{ height: 48px; }
.topbar.is-scrolled .navlinks a{ font-size: 13px; letter-spacing: .02em; }

/* Checkout payment UI */
.pay-plan{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
@media (max-width: 720px){ .pay-plan{ grid-template-columns: 1fr; } }
.pay-card{
  display:block;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  border-radius: 18px;
  padding: 12px 12px;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.pay-card input{ display:none; }
.pay-card .pc-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pay-card .pc-title{ font-weight:1000; letter-spacing:.7px; }
.pay-card .pc-badge{ font-size:11px; font-weight:1000; letter-spacing:.8px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,43,214,.35); background: rgba(255,43,214,.12); }
.pay-card .pc-badge.alt{ border-color: rgba(0,229,255,.35); background: rgba(0,229,255,.12); }
.pay-card .pc-sub{ margin-top:6px; opacity:.85; font-size:12px; }
.pay-card:hover{ transform: translateY(-1px); border-color: rgba(0,229,255,.28); }
.pay-card:has(input:checked){
  border-color: rgba(255,43,214,.45);
  box-shadow: 0 0 0 1px rgba(255,43,214,.18) inset, 0 18px 40px rgba(0,0,0,.18);
  background: rgba(255,255,255,.07);
}

.pay-methods{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; }
@media (max-width: 980px){ .pay-methods{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* On mobile keep payment options side-by-side */
@media (max-width: 520px){ .pay-methods{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.pay-method{
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  border-radius: 18px;
  padding: 12px 12px;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.pay-method input{ display:none; }
.pay-method .pm-ico{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: radial-gradient(120% 120% at 30% 10%, rgba(255,43,214,.18), rgba(0,229,255,.12), rgba(255,255,255,.04));
  font-weight:1000;
}
.pay-method .pm-txt{ display:flex; flex-direction:column; gap:2px; }
.pay-method .pm-txt b{ font-size:12px; letter-spacing:.6px; }
.pay-method .pm-txt span{ font-size:11px; opacity:.75; }
.pay-method:hover{ transform: translateY(-1px); border-color: rgba(0,229,255,.28); }
.pay-method:has(input:checked){
  border-color: rgba(0,229,255,.45);
  box-shadow: 0 0 0 1px rgba(0,229,255,.18) inset, 0 18px 40px rgba(0,0,0,.18);
  background: rgba(255,255,255,.07);
}

/* Account dashboard */
.account-shell{ display:grid; grid-template-columns: 280px 1fr; gap:16px; margin-top: 14px; }
@media (max-width: 980px){ .account-shell{ grid-template-columns: 1fr; } }
.account-side{
  position: sticky;
  top: 96px;
  align-self: start;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  border-radius: 20px;
  padding: 14px;
  backdrop-filter: blur(10px);
}
.account-side .acc-title{ font-weight:1000; letter-spacing:.8px; margin: 2px 0 8px; }
.account-side .acc-sub{ opacity:.75; font-size:12px; margin-bottom:10px; }
.account-nav{ display:grid; gap:8px; }
.account-nav button{
  width:100%;
  text-align:left;
  border-radius: 16px;
  padding: 11px 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(242,246,255,.92);
  cursor:pointer;
  font-weight:900;
  letter-spacing:.4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.account-nav button:hover{ transform: translateY(-1px); border-color: rgba(255,43,214,.35); background: rgba(255,43,214,.08); }
.account-nav button.active{ border-color: rgba(0,229,255,.45); box-shadow: 0 0 0 1px rgba(0,229,255,.22) inset; background: rgba(0,229,255,.08); }

/* Admin quick access inside My Account */
.account-nav .acc-admin{
  width:100%;
  text-decoration:none;
  border-radius: 16px;
  padding: 11px 12px;
  border:1px solid rgba(0,229,255,.22);
  background: rgba(0,229,255,.06);
  color: rgba(242,246,255,.92);
  cursor:pointer;
  font-weight:1000;
  letter-spacing:.5px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.account-nav .acc-admin:hover{ transform: translateY(-1px); border-color: rgba(0,229,255,.45); background: rgba(0,229,255,.10); }
.account-panel{ display:none; }
.account-panel.active{ display:block; }

/* =========================
   MOBILE LAYOUT OVERRIDES
   ========================= */
@media (max-width: 760px){
  .navlinks{ display:none !important; }  /* hide the ugly horizontal links on mobile */
  .mnav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
}

/* HERO SEARCHBAR: mobile stack (strong specificity) */
@media (max-width: 600px){
  .hero .hero-searchbar{ padding: 12px !important; width: 100% !important; max-width: 100% !important; }
  .hero .hero-searchbar .hs-badge{
    position: static !important;
    display: inline-block !important;
    margin: 0 auto 10px !important;
  }
  #heroSearchForm.hs-form{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }
  #heroSearchForm .hs-divider{ display:none !important; }
  #heroSearchForm .hs-seg{
    width: 100% !important;
    border-radius: 16px !important;
    padding: 14px 14px !important;
  }
  #heroSearchForm .hs-btn{
    width: 100% !important;
    height: 54px !important;
    border-radius: 16px !important;
  }
  #hero h1{
    font-size: 40px !important;
    line-height: 1.05 !important;
    text-align: center !important;
  }
}

/* WHY VICE MARINA: center title; hide hint if still present anywhere */
.section-title{ text-align:center; }
.section-title .hint{ display:none !important; }




/* =========================================================
   VICE MARINA — FIX PACK (AUTO) — 2026-01-14
   - Home searchbar (match reference)
   - Packages popular deals: remove "dull/curtain" look
   - Yacht terms: readable on white booking card
   - Yachts grid: remove dull overlay on photos
   - Add-ons: compact cards + details modal
========================================================= */

/* ===== HOME SEARCHBAR (make it like ref image #2) ===== */
#hero .hero-searchbar{
  width: min(980px, calc(100% - 28px)) !important;
  max-width: 980px !important;
}

.hero-searchbar{
  max-width: 980px !important;
  border-color: rgba(255,77,220,.55) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.35) !important;
}

.hero-searchbar .hs-seg{
  padding: 16px 18px !important;
}

.hero-searchbar .hs-divider{
  background: rgba(0,0,0,.12) !important;
}

.hero-searchbar .hs-btn{
  width: 74px !important;
  background: linear-gradient(135deg, rgba(25,245,255,.95), rgba(108,110,255,.95)) !important;
  border-left: 1px solid rgba(0,0,0,.14) !important;
  border: 2px solid rgba(0,0,0,.60) !important;
  color: #071018 !important;
  border-radius: 0 999px 999px 0 !important;
}

.hero-searchbar .hs-badge{
  right: 64px !important;
  top: -12px !important;
}

/* ===== PACKAGES: Popular deals images look dull ===== */
#packagesGrid .thumb{
  border-radius: 16px;
  overflow: hidden;
  background-size: cover !important;
  background-position: center !important;
  filter: saturate(1.18) contrast(1.10) brightness(1.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

/* ===== YACHT PAGE: Terms text visible (white booking card) ===== */
.booking-card .terms-list li{
  color: rgba(10,16,28,.82) !important;
  font-weight: 800 !important;
}
.booking-card .terms-list a,
.booking-card .neon-link{
  color: rgba(255,63,209,.95) !important;
  font-weight: 900 !important;
}

/* ===== YACHTS PAGE: remove dark overlay / dull look ===== */
.yacht-card .thumb:after{
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.18)) !important;
}
.yacht-card .thumb .thumb-bg{
  filter: saturate(1.25) contrast(1.12) brightness(1.12) !important;
}

/* ===== ADD-ONS: compact cards ===== */
#addonsGrid{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 14px !important;
}

.addon-card{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  box-shadow: 0 16px 35px rgba(0,0,0,.35);
}

.addon-card .addon-img{
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
  filter: none !important;
  opacity: 1 !important;
}

.addon-card .addon-meta{
  padding: 10px 12px 12px;
}

.addon-card .addon-title{
  font-weight: 1000;
  font-size: 13px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.95);
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.addon-card .addon-bottom{
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.addon-card .addon-price{
  font-weight: 1000;
  font-size: 14px;
  color: rgba(25,245,255,.95);
}

.addon-card .addon-add{
  width: 42px;
  height: 34px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.55);
  background: linear-gradient(135deg, rgba(255,59,212,.95), rgba(25,245,255,.92));
  cursor: pointer;
  font-weight: 1000;
}

.addon-card .addon-details{
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 1000;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.45);
  color: rgba(255,255,255,.92);
}

/* hide any long text inside addons grid */
#addonsGrid .overlay,
#addonsGrid .content,
#addonsGrid p{
  display: none !important;
}

/* ===== Add-on Modal ===== */
.vm-modal{
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  z-index: 9999;
  padding: 18px;
}
.vm-modal.open{ display: grid; }

.vm-modal .vm-box{
  width: min(560px, 100%);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(15,18,28,.92);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  position: relative;
}

.vm-modal .vm-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.45);
  color: #fff;
  cursor: pointer;
  font-weight: 1000;
}

.vm-modal .vm-img{
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

.vm-modal .vm-info{
  padding: 14px 14px 18px;
  color: rgba(255,255,255,.92);
}

.vm-modal .vm-title{
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.vm-modal .vm-price{
  margin-top: 6px;
  font-size: 16px;
  font-weight: 1000;
  color: rgba(25,245,255,.95);
}

.vm-modal .vm-desc{
  margin-top: 10px;
  opacity: .92;
  line-height: 1.45;
  font-weight: 800;
}


/* =========================================================
   HOME SEARCH BAR — SMALLER + FLUSH ENDS (FINAL OVERRIDE)
   User request: Make the pill a bit smaller and remove any
   white empty protrusion on both ends.
========================================================= */
.hero-searchbar{
  max-width: 620px !important;
}

.hero-searchbar .hs-form{
  flex: 1 !important;
  width: 100% !important;
  display: flex !important;
  align-items: stretch !important;
}

.hero-searchbar .hs-seg{
  padding: 12px 14px !important;
}

.hero-searchbar .hs-btn{
  width: 64px !important;
  border: 0 !important;
  flex: 0 0 64px !important;
}

.hero-searchbar .hs-badge{
  right: 14px !important;
  top: -11px !important;
  padding: 7px 12px !important;
}

@media (max-width: 720px){
  .hero-searchbar{ max-width: 100% !important; border-radius: 26px !important; }
  .hero-searchbar .hs-form{ flex-wrap: wrap !important; }
  .hero-searchbar .hs-divider{ display: none !important; }
  .hero-searchbar .hs-seg{ width: 100% !important; border-bottom: 1px solid rgba(0,0,0,.10) !important; }
  .hero-searchbar .hs-seg:last-of-type{ border-bottom: none !important; }
  .hero-searchbar .hs-btn{ width: 100% !important; height: 48px !important; font-size: 20px !important; }
}

/* ---- Checkout Add-ons Mini Cards + Modal (v3) ---- */
.addons-mini-grid{ display:grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap:12px; }
@media (max-width: 980px){ .addons-mini-grid{ grid-template-columns: repeat(2, minmax(140px, 1fr)); } }
@media (max-width: 520px){ .addons-mini-grid{ grid-template-columns: repeat(2, minmax(120px, 1fr)); } }

.addon-mini{
  position:relative;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  overflow:hidden;
  /* Smaller cards so mobile doesn't feel crowded */
  min-height: 122px;
  cursor:pointer;
}
.addon-mini .am-img{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  filter: saturate(1.15) contrast(1.1) brightness(1.1);
  transform: scale(1.03);
}
.addon-mini .am-overlay,
.addon-mini .am-grad{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.62)); }
.addon-mini .am-body{ position:relative; padding:12px; display:flex; flex-direction:column; gap:6px; }
.addon-mini .am-title{ font-weight: 950; font-size: 12px; letter-spacing:.8px; text-transform: uppercase; line-height:1.15; }
.addon-mini .am-sub{ font-size:11px; opacity:.85; font-weight:800; }
.addon-mini .am-bottom{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.addon-mini .am-price{ font-size: 12px; font-weight: 950; color: var(--gold); }
.addon-mini .am-add{
  border:none;
  padding: 8px 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pink), var(--cyan));
  color:#051018;
  font-weight: 950;
  letter-spacing:.8px;
  text-transform: uppercase;
  cursor:pointer;
}
.addon-mini .am-add:active{ transform: translateY(1px); }

/* Make selects readable in dropdowns */
select.input option{ color:#111; background:#fff; }

.vm-modal{ position:fixed; inset:0; display:none; z-index: 9999; }
.vm-modal[aria-hidden="false"]{ display:block; }
.vm-modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.65); backdrop-filter: blur(10px); }
.vm-modal-panel{
  position:relative;
  width:min(720px, calc(100% - 28px));
  margin: 60px auto;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(15,18,35,.92);
  overflow:hidden;
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
}
.vm-modal-close{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  color: rgba(242,246,255,.92);
  font-weight: 950;
  cursor:pointer;
}
.vm-modal-media{ height: 220px; background-size:cover; background-position:center; }
.vm-modal-body{ padding:16px; display:flex; flex-direction:column; gap:10px; }
.vm-modal-tag{ display:inline-flex; align-self:flex-start; padding:7px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(7,7,18,.35); font-size:11px; letter-spacing:1px; font-weight:950; }
.vm-modal-body h3{ margin:0; font-size:16px; letter-spacing:1px; text-transform: uppercase; }
.vm-modal-body p{ margin:0; font-size:12px; opacity:.9; font-weight:800; line-height:1.35; }
.vm-modal-actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; }
.vm-modal-price{ font-size:16px; font-weight: 950; color: var(--gold); }

/* Yacht booking add-ons preview */
.book-addons-wrap{ margin-top:12px; padding:12px; border-radius:18px; border:1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.06); }
.book-addons-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.book-addons-top b{ font-size:12px; letter-spacing:1px; text-transform: uppercase; }
.book-addon-row{ display:flex; gap:10px; overflow:auto; padding-top:10px; }
.book-addon-chip{ min-width: 150px; border-radius: 16px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.25); padding:10px; display:flex; gap:10px; align-items:center; }
.book-addon-chip .pic{ width:38px; height:38px; border-radius:12px; background-size:cover; background-position:center; }
.book-addon-chip .txt{ flex:1; }
.book-addon-chip .txt .t{ font-weight:950; font-size:11px; letter-spacing:.8px; text-transform: uppercase; line-height:1.15; }
.book-addon-chip .txt .p{ font-size:11px; opacity:.9; font-weight:900; color: var(--gold); }
.book-addon-chip button{ border:none; border-radius:999px; padding:7px 10px; font-weight:950; letter-spacing:.8px; text-transform: uppercase; background: linear-gradient(90deg, var(--pink), var(--cyan)); color:#051018; cursor:pointer; }

/* ---- Checkout Add-ons Mini Cards + Modal (v3) ---- */
.addons-mini-grid{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:12px;}
@media (max-width:980px){.addons-mini-grid{grid-template-columns:repeat(2,minmax(140px,1fr));}}
@media (max-width:520px){.addons-mini-grid{grid-template-columns:repeat(2,minmax(120px,1fr));}}

.addon-mini{position:relative;border-radius:18px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);overflow:hidden;cursor:pointer;min-height:140px;}
.addon-mini .am-img{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.15) contrast(1.08) brightness(1.1);transform:scale(1.03);}
.addon-mini .am-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55));}
.addon-mini .am-body{position:relative;padding:12px;display:flex;flex-direction:column;gap:6px;}
.addon-mini .am-title{font-weight:900;text-transform:uppercase;letter-spacing:.6px;font-size:12px;line-height:1.2;}
.addon-mini .am-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;}
.addon-mini .am-price{font-weight:900;font-size:12px;color:var(--gold);}
.addon-mini .am-add{border:0;outline:0;border-radius:999px;padding:8px 12px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;background:linear-gradient(90deg,var(--pink),var(--cyan));color:#080815;cursor:pointer;}
.addon-mini .am-add:active{transform:translateY(1px);} 

/* Modal */
.vm-modal{position:fixed;inset:0;display:none;z-index:9999;}
.vm-modal.open{display:block;}
.vm-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.58);backdrop-filter:blur(6px);}
.vm-modal-panel{position:relative;max-width:720px;margin:6vh auto;max-height:88vh;overflow:hidden;border-radius:26px;border:1px solid rgba(255,255,255,.18);background:rgba(10,10,26,.88);box-shadow:0 24px 80px rgba(0,0,0,.55);}
.vm-modal-close{position:absolute;top:12px;right:12px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:var(--text);border-radius:999px;width:38px;height:38px;font-weight:900;cursor:pointer;}
.vm-modal-media{height:240px;background-size:cover;background-position:center;filter:saturate(1.1) contrast(1.1) brightness(1.05);}
.vm-modal-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;}
.vm-modal-tag{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(7,7,18,.35);font-size:11px;text-transform:uppercase;letter-spacing:1px;width:fit-content;}
.vm-modal-body h3{margin:0;font-size:18px;letter-spacing:1px;text-transform:uppercase;}
.vm-modal-body p{margin:0;opacity:.88;font-weight:800;font-size:13px;line-height:1.35;}
.vm-modal-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;}
.vm-modal-price{font-weight:900;font-size:16px;color:var(--gold);}

/* Select dropdown readability */
select.input option{color:#111;background:#fff;}

/* Order summary (right column) */
.order-item{display:flex;gap:12px;align-items:center;padding:12px;border-radius:20px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);}
.order-title{font-weight:900;letter-spacing:.7px;text-transform:uppercase;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.order-mini{font-weight:900;letter-spacing:.4px;font-size:12px;}
.order-lines{margin-top:12px;padding:12px;border-radius:20px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.28);display:flex;flex-direction:column;gap:8px;}
.order-line{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:900;text-transform:uppercase;letter-spacing:.6px;font-size:12px;}
.order-line span{opacity:.85;}
.order-line.total{padding-top:8px;margin-top:4px;border-top:1px solid rgba(255,255,255,.12);font-size:14px;}
.order-right{display:flex;align-items:center;gap:8px;justify-content:flex-end;}
.strike{text-decoration:line-through;opacity:.6;}
.gold{color:var(--gold);}

/* Yacht page booking add-ons (optional) */
.book-addons{margin-top:10px;padding:10px;border-radius:18px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);}
.book-addons-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.book-addons-title{font-weight:900;letter-spacing:.6px;text-transform:uppercase;font-size:11px;opacity:.92;}
.book-addons-row{display:flex;gap:8px;overflow:auto;scrollbar-width:thin;padding-bottom:2px;}
.book-addon-chip{flex:0 0 auto;display:flex;align-items:center;gap:8px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.25);padding:7px 10px;cursor:pointer;}
.book-addon-chip img{width:26px;height:26px;border-radius:999px;object-fit:cover;}
.book-addon-chip b{font-size:11px;letter-spacing:.4px;text-transform:uppercase;}
.book-addon-chip span{font-size:11px;color:var(--gold);font-weight:900;}
.book-addon-chip.added{background:linear-gradient(90deg,rgba(255,43,214,.22),rgba(0,229,255,.18));border-color:rgba(255,255,255,.22);}

.instant-btn.is-loading{
  opacity:.85;
  pointer-events:none;
  filter:saturate(1.2);
}
/* ===== CHECKOUT HOTFIX (v5) ===== */
.checkout-wrap > div{ display:flex; flex-direction:column; align-items:center; }
.checkout-wrap .co-progress{ width:100%; max-width:720px; margin-left:auto; margin-right:auto; }
.checkout-wrap .co-step{ width:100%; max-width:720px; }
.footer{ margin-top:auto; }

/* =========================================================
   VICE MARINA FIX PACK v6 (Checkout mobile + logos + account)
   - Hide step chips on mobile (they cover UI)
   - Smaller iPhone-style sticky bar positioning above bottom nav
   - Add-ons titles/buttons readability
   - Real logo badges in payment section
   - Account dashboard sticky fix on mobile
========================================================= */

/* Hide the 1-2-3-4 chips on mobile (use the sticky bar instead) */
@media (max-width: 760px){
  .checkout-wrap .co-progress{ display:none !important; }
  .checkout-wrap .co-actions a[href="addons.html"]{ display:none !important; }
}

/* Make Step titles readable on image backgrounds */
.checkout-wrap .co-step .section-title h2{
  text-shadow: 0 2px 18px rgba(0,0,0,.85);
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.14);
  padding: 8px 12px;
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

/* Payment trust logos */
.co-badges{
  align-items:center;
  justify-content:flex-start;
}
.co-badges .pay-logo{
  height: 26px;
  width: auto;
  max-width: 140px;
  border-radius: 12px;
  display:block;
}
@media (max-width: 520px){
  .co-badges{ gap:8px; }
  .co-badges .pay-logo{ height: 24px; }
}

/* Payment method icons - keep them crisp and visible */
.pay-method{
  background: rgba(0,0,0,.32) !important;
  border-color: rgba(255,255,255,.18) !important;
}
.pay-method .pm-ico{
  background: rgba(0,0,0,.25) !important;
  border-color: rgba(255,255,255,.20) !important;
}
.pay-method .pm-icon{
  width: 28px;
  height: 28px;
  object-fit: contain;
  display:block;
}
.pay-method .pm-icon.wide{
  width: 44px;
  height: 22px;
}
.pay-method .pm-txt b{ text-shadow: 0 2px 18px rgba(0,0,0,.75); }

/* Mobile sticky bar should sit above bottom-bar */
@media (max-width: 760px){
  .co-sticky{
    bottom: calc(86px + env(safe-area-inset-bottom)) !important;
    padding: 10px 10px !important;
    border-radius: 22px !important;
  }
  .co-sticky .btn{ height: 44px !important; }
}

/* Add-ons mini cards: stronger title contrast + price/ADD in corners */
.addon-mini .am-title{
  color: rgba(255,255,255,.98) !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.88);
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.16);
  padding: 6px 8px;
  border-radius: 14px;
  width: fit-content;
  max-width: 100%;
}
.addon-mini .am-body{
  position:relative;
  min-height: 140px;
  padding-bottom: 56px;
}
.addon-mini .am-meta{
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  width: calc(100% - 24px);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.addon-mini .am-price{
  text-shadow: 0 2px 16px rgba(0,0,0,.8);
}
.addon-mini .am-add{
  box-shadow: 0 10px 26px rgba(0,0,0,.32);
}

/* Account dashboard: disable sticky sidebar on mobile so panels don't hide behind it */
@media (max-width: 980px){
  .account-side{
    position: relative !important;
    top: auto !important;
  }
}
/* Checkout hero buttons are too large on mobile; sticky bar has Back/Continue */
@media (max-width: 760px){
  #coBack{ display:none !important; }
  .hero .row a.btn[href="addons.html"]{ display:none !important; }
  #coSubtitle{ display:none !important; }
}


/* CONTACT: mobile compact (hide message form) */
@media (max-width: 760px){
  .contact-send-title{ display:none !important; }
  .contact-form-card{ display:none !important; }
  .contact-split{ grid-template-columns: 1fr !important; }
}


/* ===== AIR DETAIL SLIDER + MINIMAL AIR CARDS (2026-01-20) ===== */
.air-slider{
  position: relative;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  background: rgba(0,0,0,.35);
}
.air-slide{
  width:100%;
  border-radius: var(--radius);
}
.air-arrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:44px;
  height:44px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.68);
  color: rgba(255,255,255,.92);
  font-size: 26px;
  line-height: 44px;
  text-align:center;
  cursor:pointer;
  z-index:6;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  opacity: 1;
  backdrop-filter: blur(6px);
}
.air-arrow.left{ left:12px; }
.air-arrow.right{ right:12px; }
.air-arrow:hover{ background: rgba(255,255,255,.10); }

.air-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  padding: 10px 0 0;
}
.air-dots .dot{
  width:10px; height:10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.10);
  cursor:pointer;
}
.air-dots .dot.on{
  background: rgba(255,255,255,.82);
}

/* Minimal cards for heli-jet listing (photo only + GO button) */
.air-card .content.air-min{
  position:absolute;
  inset:auto 0 16px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
  padding: 0 14px;
}
.air-card .content.air-min .btn{
  backdrop-filter: blur(6px);
}



/* --- About page mini galleries (4 blocks) --- */
.about-gallery .gallery-main{ height:260px; border-radius:18px; overflow:hidden; }
.about-gallery .g-count{
  position:absolute;
  bottom:12px;
  right:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(7,9,13,.55);
  color: rgba(255,255,255,.9);
  font-size:12px;
  z-index:7;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* --- Index: Helicopter & Jet rentals cards upgrades --- */
.hj-card{ position:relative; min-height:240px; }
.hj-card .hj-view{
  position:absolute;
  left:14px;
  bottom:14px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(7,9,13,.55);
  color: rgba(255,255,255,.92);
  font-size:12px;
  letter-spacing:.08em;
  text-transform: uppercase;
  z-index:7;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hj-card h3{
  position:absolute;
  left:50%;
  bottom:12px;
  transform: translateX(-50%);
  margin:0;
  padding:0 12px;
  text-align:center;
  font-size:20px;
  z-index:7;
  text-shadow: 0 10px 20px rgba(0,0,0,.45);
}
.hj-card .hj-sticker{
  position:absolute;
  top:12px;
  right:12px;
  padding:8px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,43,214,.16);
  color: rgba(255,255,255,.95);
  font-weight:800;
  letter-spacing:.02em;
  z-index:7;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hj-card .tag.flame{ position:absolute; top:12px; left:12px; z-index:7; }
.hj-card .live-indicator{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(0,255,153,.35);
  background: rgba(0,255,153,.08);
  color: rgba(220,255,240,.95);
  font-size:12px;
}
.hj-card .live-indicator .dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(0,255,153,.95);
  box-shadow: 0 0 14px rgba(0,255,153,.85);
  animation: vmLiveBlink 1.1s infinite;
}
.hj-card .live-indicator .ico{ opacity:.95; font-size:12px; }
@keyframes vmLiveBlink{
  0%,100%{ opacity:.25; transform: scale(.85); }
  50%{ opacity:1; transform: scale(1); }
}

.hj-card .hj-sticker-img{
  position:absolute;
  top:10px;
  right:10px;
  width:175px;
  height:auto;
  z-index:8;
  transform: rotate(6deg);
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.45));
}
/* ✅ FORCE GO STICKER = BOTTOM CENTER (Explore cards) */
.spot-card,
.explore-card,
.topspot-card,
.miami-spot-card {
  position: relative !important;
}

.go-sticker-img,
.go-sticker {
  position: absolute !important;
  left: 50% !important;
  top: auto !important;         /* ✅ üstü iptal */
  bottom: -170px !important;      /* ✅ TAM ALTA */
  transform: translateX(-50%) rotate(-0deg) !important;
  z-index: 99 !important;
}

/* Görünmez olmasın */
.go-sticker-img{
  width: 88px !important;
  height: auto !important;
  display: block !important;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
  pointer-events: none;
}
/* ✅ Instant Book = more LEFT + more UP (still visible) */
.instant-sticker,
.fy-sticker,
.instant-book-sticker {
  position: absolute !important;
  left: 7px !important;
  top: 5px !important;

  /* ✅ daha sola + yukarı hissi */
  transform: translate(-15%, -20%) rotate(-20deg) !important;

  width: 95px !important;
  z-index: 99 !important;
  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));
}
/* FORCE: Instant Book image fills the whole button */
/* BUTTON */
#bookBtn{
  width: 100%;
  height: 82px;
  padding: 0;              /* -0 değil */
  border: 0;               /* 150 değil */
  background: transparent;
  border-radius: 18px;
  overflow: hidden;
  display: flex;           /* center fix */
  align-items: center;
  justify-content: center;
}

/* IMAGE */
#bookBtn .book-btn-img{
  width: 80%;
  height: 100%;
  display: block;
  object-fit: cover;       /* ✅ FULL doldurur */
  object-position: center;
  transform: scale(1.08);  /* ✅ biraz büyütür (isteğe bağlı) */
}
/* ✅ BUTONUN HER ŞEYİNİ SIFIRLA (beyaz arka plan + border + shadow gider) */
#bookBtn{
  width: 100%;
  height: 82px;
  padding: 0 !important;
  margin: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 18px;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  appearance: none;
  -webkit-appearance: none;
}

/* ✅ BOOTSTRAP btn CLASS'I override */
#bookBtn.btn,
#bookBtn.book-btn{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ✅ RESİM FULL OTURSUN */
#bookBtn .book-btn-img{
  width: 100%;
  height: 80%;
  display: block;
  object-fit: cover;       /* full doldurur */
  object-position: center;
  transform: scale(1.08);  /* hafif büyük dursun */
}