/* ===== Gulet Point — Favorites + Recently Viewed (site-wide, wherever a yacht card appears) ===== */
/* Hex values hardcoded (not var()) for the same reason as global.css: this loads on every
   front-end page, including ones without the --sea/--gold/--mist custom properties defined. */

/* Favorite heart — default: white overlay icon on a photo (top-right corner, mirrors the
   country badge's top-left placement already used on catalog/homepage cards). */
.gp-fav-heart{
  position:absolute; top:12px; right:12px; z-index:3; width:30px; height:30px; border-radius:50%;
  background:rgba(11,30,38,.45); border:none; padding:0; margin:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition:background .2s, color .2s; outline:none; -webkit-tap-highlight-color:transparent;
}
.gp-fav-heart:hover{ background:rgba(11,30,38,.7); }
.gp-fav-heart svg{ width:16px; height:16px; display:block; }
.gp-fav-heart.is-fav{ background:rgba(11,30,38,.55); color:#C2A35B; }
.gp-fav-heart.is-fav svg{ fill:#C2A35B; }

/* Inline variant — next to the yacht title / share icon on the single-yacht hero, sitting on
   the page's own light background rather than over a photo. */
.gp-fav-heart.is-inline{
  position:static; width:34px; height:34px; background:#fff; border:1px solid #EDE7DA; color:#0B1E26;
}
.gp-fav-heart.is-inline:hover{ background:#F6F2EA; }
.gp-fav-heart.is-inline.is-fav{ background:#F6F2EA; color:#C2A35B; border-color:#C2A35B; }
.gp-fav-heart.is-inline.is-fav svg{ fill:#C2A35B; }

/* Recently Viewed strip — same single-row/scroll pattern used elsewhere on the site (team
   cards, About photo strip): equal-size tiles, no wrap, scrolls sideways past 3-4 items. */
.gp-recent{ padding:40px 40px 8px; background:#fff; }
.gp-recent-label{ margin:0 0 16px; font-family:'Jost',system-ui,sans-serif; font-size:10.5px; font-weight:500; letter-spacing:2.5px; text-transform:uppercase; color:#A88947; }
.gp-recent-strip{ display:flex; gap:18px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; }
.gp-recent-strip::-webkit-scrollbar{ height:5px; }
.gp-recent-strip::-webkit-scrollbar-thumb{ background:#EDE7DA; border-radius:3px; }

/* Shared mini-card — used by the Recently Viewed strip AND the Favorites grid (both built
   entirely client-side from localStorage snapshots, see assets/yacht-tools.js). */
.gp-tool-card{ position:relative; flex:0 0 220px; display:block; background:#fff; border:1px solid #EDE7DA; text-decoration:none; color:inherit; overflow:hidden; transition:box-shadow .3s; }
.gp-tool-card:hover{ box-shadow:0 16px 34px rgba(11,30,38,.14); }
.gp-tool-card-img{ position:relative; }
.gp-tool-card img{ width:100%; height:130px; object-fit:cover; display:block; }
.gp-tool-card-b{ padding:14px 16px 16px; }
.gp-tool-card-b .t{ margin:0 0 4px; font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; color:#C2A35B; }
.gp-tool-card-b h3{ margin:0 0 6px; font-family:'Marcellus',Georgia,serif; font-weight:400; font-size:16px; color:#0B1E26; }
.gp-tool-card-b .pr{ margin:0; font-family:'Marcellus',Georgia,serif; font-size:14px; color:#0B1E26; }
.gp-tool-card-b .pr span{ font-family:'Jost',system-ui,sans-serif; font-size:10px; color:#8a9698; }

/* Favorites page grid — a plain wrapping grid (not a strip: this page IS the shortlist, the
   visitor should see everything at once, not scroll past it). */
.gp-favorites-grid{ max-width:1140px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:22px; }
.gp-favorites-empty{ max-width:480px; margin:0 auto; text-align:center; padding:60px 24px; }
.gp-favorites-empty p{ font-size:14px; color:#5a6b6e; font-weight:300; margin:0 0 22px; }

@media (max-width:700px){
  .gp-recent{ padding:32px 20px 4px; }
  .gp-tool-card{ flex-basis:180px; }
  .gp-tool-card img{ height:110px; }
  /* Favorites grid only (not the horizontal-scroll strip): the fixed-height/cover crop above
     was cutting off the boat in a narrow single-column card on phones — show the photo whole
     instead, letterboxed on a dark ground rather than cropped. */
  .gp-favorites-grid{ grid-template-columns:1fr; }
  .gp-favorites-grid .gp-tool-card img{ height:auto; aspect-ratio:4/3; object-fit:contain; background:#0B1E26; }
}

/* ===== Compare — a separate mechanism from Favorites (own storage key, own cap of 4) ===== */

/* Toggle — icon-only, same circular-button treatment as the heart (sits just to its left on
   the photo) rather than a spelled-out "COMPARE" checkbox, which read like a comparison-
   shopping site rather than a boutique charter brand. */
/* Colors forced with !important and repeated across :hover/:focus/:focus-visible/:active —
   same fix as the share button: a plain <button>'s color can otherwise be overridden by the
   theme's own interactive-state styling, which was making this icon flash/stick to an
   unintended color on click instead of behaving exactly like the (already-correct) heart. */
.gp-compare-toggle{
  position:absolute; top:12px; right:50px; z-index:3; width:30px; height:30px; border-radius:50%;
  background:rgba(11,30,38,.45) !important; border:none; padding:0; margin:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff !important;
  transition:background .2s, color .2s; outline:none; -webkit-tap-highlight-color:transparent;
}
.gp-compare-toggle:hover, .gp-compare-toggle:focus, .gp-compare-toggle:focus-visible, .gp-compare-toggle:active{
  background:rgba(11,30,38,.7) !important; color:#fff !important;
}
.gp-compare-toggle svg{ width:15px; height:15px; display:block; }
.gp-compare-toggle.is-comparing,
.gp-compare-toggle.is-comparing:hover, .gp-compare-toggle.is-comparing:focus, .gp-compare-toggle.is-comparing:focus-visible, .gp-compare-toggle.is-comparing:active{
  background:rgba(11,30,38,.55) !important; color:#C2A35B !important;
}

/* Inline variant — next to the heart/share icons on the single-yacht hero, sitting on the
   page's own light background rather than over a photo. */
.gp-compare-toggle.is-inline{
  position:static; width:34px; height:34px; background:#fff !important; border:1px solid #EDE7DA; color:#0B1E26 !important;
}
.gp-compare-toggle.is-inline:hover, .gp-compare-toggle.is-inline:focus, .gp-compare-toggle.is-inline:focus-visible, .gp-compare-toggle.is-inline:active{
  background:#F6F2EA !important; color:#0B1E26 !important;
}
.gp-compare-toggle.is-inline.is-comparing,
.gp-compare-toggle.is-inline.is-comparing:hover, .gp-compare-toggle.is-inline.is-comparing:focus, .gp-compare-toggle.is-inline.is-comparing:focus-visible, .gp-compare-toggle.is-inline.is-comparing:active{
  background:#F6F2EA !important; color:#C2A35B !important; border-color:#C2A35B;
}

/* Floating "Compare (N) →" bar — appears once 2+ yachts are selected, sits above the mobile
   quick-action bar the same way the campaign popup's card does. */
.gp-compare-bar{ position:fixed; left:0; right:0; bottom:0; z-index:9995; background:#0B1E26; display:flex; align-items:center; justify-content:center; gap:24px; padding:14px 20px; transform:translateY(100%); transition:transform .35s ease; }
.gp-compare-bar.show{ transform:translateY(0); }
.gp-compare-bar button{ background:none; border:none; cursor:pointer; font-family:'Jost',system-ui,sans-serif; }
.gp-compare-bar .gp-compare-open{ color:#fff; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; display:flex; align-items:center; gap:8px; }
.gp-compare-bar .gp-compare-open b{ color:#C2A35B; font-style:normal; }
.gp-compare-bar .gp-compare-clear{ color:rgba(237,231,218,.6); font-size:11px; letter-spacing:normal; text-transform:none; text-decoration:underline; text-underline-offset:2px; }
@media (max-width:700px){
  .gp-compare-bar{ bottom:calc(64px + env(safe-area-inset-bottom, 0px)); padding:12px 16px; gap:16px; }
}

/* Toast — brief inline confirmation/notice (e.g. the compare-cap message), not alert(). */
.gp-toast{ position:fixed; left:50%; bottom:24px; transform:translate(-50%, 10px); z-index:99999; background:#0B1E26; color:#EDE7DA; padding:12px 22px; font-family:'Jost',system-ui,sans-serif; font-size:12.5px; border:1px solid #C2A35B; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; max-width:90vw; text-align:center; }
.gp-toast.show{ opacity:1; transform:translate(-50%, 0); }
@media (max-width:700px){ .gp-toast{ bottom:calc(64px + env(safe-area-inset-bottom, 0px) + 12px); } }

/* Comparison modal */
.gp-compare-modal{ position:fixed; inset:0; z-index:99990; display:flex; align-items:center; justify-content:center; padding:24px; }
.gp-compare-modal[hidden]{ display:none; }
.gp-compare-overlay{ position:absolute; inset:0; background:rgba(11,30,38,.6); }
.gp-compare-panel{ position:relative; z-index:1; background:#fff; width:100%; max-width:960px; max-height:88vh; overflow:auto; box-shadow:0 30px 70px rgba(11,30,38,.35); font-family:'Jost',system-ui,sans-serif; }
.gp-compare-close{ position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%; background:#0B1E26; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; }
.gp-compare-head{ padding:28px 28px 8px; text-align:center; }
.gp-compare-head p{ margin:0 0 4px; font-size:10.5px; letter-spacing:3px; text-transform:uppercase; color:#C2A35B; }
.gp-compare-head h2{ margin:0; font-family:'Marcellus',Georgia,serif; font-weight:400; font-size:24px; color:#0B1E26; }
/* A CSS Grid, not an HTML <table> — with only 1-2 yachts selected, a table let the browser
   stretch that lone data column (and its photo) across the whole panel width. A grid with
   fixed-width tracks (set inline per-render, see assets/yacht-tools.js) stays a sane, compact
   size no matter how many columns there are, and scrolls sideways past 4. */
.gp-compare-table-wrap{ overflow-x:auto; padding:16px 28px 32px; display:flex; justify-content:center; }
.gp-compare-grid{ display:grid; }
.gp-compare-cell{ border-bottom:1px solid #EDE7DA; padding:12px 14px; text-align:center; font-size:12.5px; color:#0B1E26; display:flex; align-items:center; justify-content:center; }
.gp-compare-label-col{ justify-content:flex-start; text-align:left; color:#8a9698; font-size:10.5px; letter-spacing:1px; text-transform:uppercase; white-space:nowrap; }
.gp-compare-col-head{ flex-direction:column; align-items:stretch; padding-top:0; }
.gp-compare-col-head img{ width:100%; height:100px; object-fit:cover; display:block; margin-bottom:10px; }
.gp-compare-col-head h3{ margin:0 0 4px; font-family:'Marcellus',Georgia,serif; font-size:15px; font-weight:400; }
.gp-compare-col-head .meta{ margin:0 0 8px; font-size:11px; color:#8a9698; }
.gp-compare-col-head a.view{ display:block; margin:0 0 8px; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:#A88947; text-decoration:none; border-bottom:1px solid #C2A35B; padding-bottom:2px; }
.gp-compare-col-head .remove{ display:block; margin:0 auto; background:none; border:none; font-size:10.5px; letter-spacing:normal; text-transform:none; color:#8a9698; text-decoration:underline; cursor:pointer; padding:6px 0 14px; }
.gp-compare-empty{ padding:40px 28px 56px; text-align:center; color:#5a6b6e; font-size:13px; }

@media (max-width:700px){
  .gp-compare-modal{ padding:0; }
  .gp-compare-panel{ max-width:none; max-height:100vh; height:100%; }
}