:root{
  /* Palette: #363636, #242f40, #cca43b, #e5e5e5, #ffffff */
  --bg: #242f40;            /* page background deep slate */
  --surface: #363636;       /* card / panel surface */
  --accent: #cca43b;        /* warm gold accent */
  --blue-900: #05223a;
  --blue-700: #0f4fb8;
  --blue-500: #0f62fe;
  --blue-300: #66b3ff;
  --blue-text: #66b3ff;    /* bright banner text */
  --muted: rgba(229,229,229,0.68); /* softer light text */
  --text: #e5e5e5;          /* primary text */
  --white: #ffffff;
  --glass: rgba(255,255,255,0.03);
  --overlay-bg: rgba(10,12,15,0.6);
  --radius: 14px;
  --shadow-md: 0 12px 30px rgba(2,6,23,0.6);
  --shadow-sm: 0 6px 18px rgba(2,6,23,0.45);
}

*{box-sizing:border-box}
html,body{height:100%}
/* Prevent accidental horizontal overflow on mobile which can trigger auto-zoom */
html, body { overflow-x: hidden; }
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(800px 600px at 10% 10%, rgba(255,255,255,0.02), transparent 15%), linear-gradient(180deg,var(--bg) 0%, #1e2730 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

/* Blurred fixed background image for the index page */
body{position:relative}
/* background image layer (blurred) sits behind a darker overlay */
body::before{
  content:"";
  position:fixed;
  inset:0;
  /* allow per-page override via --bg-image (set to "url('...')") */
  background-image: var(--bg-image, url('/img/background2.jpg'));
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* slightly darker base brightness; final darkness comes from overlay */
  filter: blur(8px) brightness(.55) saturate(.95);
  /* Avoid transform-based scaling (can cause painting/blank gaps while scrolling on some browsers)
     Keep the pseudo-element fixed and hint at compositing to reduce repaint glitches. */
  transform: none;
  background-attachment: fixed;
  will-change: transform, background-image;
  -webkit-backface-visibility: hidden;
  z-index: -2;
}

  #boatPhotos .card { border-radius: 0 !important; }
  #boatPhotos .thumb { border-radius: 0 !important; overflow: hidden; }
  #boatPhotos .thumb img { border-radius: 0 !important; }
/* dark overlay to emphasize site content */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: -1;
  pointer-events: none;
}

.security-deposit {
  margin-top: 4px;
}

/* Dark-only mode: removed light-theme rules to avoid iPhone issues */

/* Header / brand */
header{position:sticky;top:0;z-index:40;background: linear-gradient(180deg, rgba(36,47,64,0.7), rgba(36,47,64,0.55));backdrop-filter: blur(6px);border-bottom:1px solid rgba(255,255,255,0.03)}
.wrap{max-width:1200px;margin:0 auto;padding:20px; padding-bottom: 10px;}
.wrap-sbar{padding-top:5px !important;}
.brand{display:flex;align-items:center;gap:12px;justify-content:space-between}
.brand-left{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.brand h1{margin:0;font-weight:700;font-size:20px;color:var(--white);letter-spacing:0.3px}
.brand .logo-img{height:55px;width:auto;display:block}
.brand .tag{color:var(--muted);font-size:13px;text-transform:uppercase;padding-left:0;border-left:0;margin-top:0}

/* Header action area (right side) */
.wrap.brand{position:relative}
.header-actions{display:flex;gap:12px;align-items:center;z-index:60}
.header-actions .theme-toggle{width:56px;height:56px}

/* Bare icon links (larger, no button chrome) used for header and footer */
.icon-link{display:inline-grid;place-items:center;border-radius:10px;color:var(--muted);width:35px;height:35px;text-decoration:none}
.icon-link:focus{outline:2px solid rgba(204,164,59,0.22);outline-offset:3px}
.icon-link .icon{width:26px;height:26px;color:var(--white)}

/* Footer layout */
.site-footer{padding:18px 0;background:transparent}
.site-footer .wrap{display:flex;justify-content:center;gap:12px}

/* Overlay action buttons (stacked vertical) */
.ov-actions-row{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:12px;
  align-items:stretch;
}

/* Preserve line breaks in banner and preview text entered by admin */
#bannerText, #bannerDisclaimerText, #previewText, #previewBrokerDisclaimerText {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Shared button base for overlay actions (scoped to overlay for specificity) */
#overlay .pane .col > .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 5px 6px 5px;
  font-size:11px;
  border-radius:8px;
  box-sizing:border-box;
  border:none;
  color:var(--white);
  cursor:pointer;
  transition:transform .12s ease, filter .12s ease;
  box-shadow: 0 4px 12px rgba(12,40,90,0.12);
}

/* Preview Gallery (Client) button */
#overlay .btn-gallery{
  background: #107974;
  width: 100%;
  margin-bottom: 2px;
  margin-top: 2px;
}

/* Share Gallery (Client) button */
#overlay .btn-share{
  background: #194b0c;
  width: 100%;
  margin-bottom: 2px;
  margin-top: 2px;
}

/* Video + icon share row: video fills available width, share icon is fixed size */
#overlay .video-share-row{ display:flex; gap:8px; align-items:center; }
/* match overlay share button vertical sizing and center text/icon */
#overlay .video-share-row .btn-video{
  background: #2b5cff;
  flex:1 1 auto;
  margin:0;
  padding:6px 5px; /* match overlay button padding */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
}
#overlay .video-share-row .btn-video:focus{ outline:2px solid rgba(43,92,255,0.18); outline-offset:2px }
#overlay .video-share-row .btn-video-share{
  background:#153a7a;
  flex:0 0 36px; /* match button height */
  padding:4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
}
#overlay .video-share-row .btn-video-share svg{ display:block }

/* When video controls are disabled (no video available), show a muted/greyed appearance
   without changing layout. Rely on the native disabled attribute but include id/class
   selectors for robustness. Only visual change — buttons remain same size. */
#overlay .video-share-row .btn-video:disabled,
#overlay .video-share-row .btn-video-share:disabled,
#videoBtn:disabled,
#videoShareBtn:disabled,
#overlay .video-share-row .btn-video.disabled,
#overlay .video-share-row .btn-video-share.disabled {
  background: rgba(255,255,255,0.04) !important;
  color: var(--muted) !important;
  border-color: rgba(255,255,255,0.04) !important;
  cursor: default !important;
  opacity: 0.85; /* slightly dimmed */
  filter: none !important;
}

/* Global share button (used outside the overlay, e.g., boat page) */
.btn-share{
  background: #194b0c;
  color: var(--white);
  border-color: transparent;
  width: auto;
}

/* Overlay-specific Share Video button (separate from global .btn-share)
   Use the id so this can be styled independently without affecting other
   share buttons across the site. Matches overlay action sizing. */
#overlay .pane .col > #videoShareBtn{
  background: #233f70; /* default video-share color */
  color: var(--white);
  width: 100%;
  margin-bottom: 3px;
  margin-top: 2px;
  padding:6px 5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  border-radius:8px;
  box-shadow: 0 4px 12px rgba(12,40,90,0.12);
  border: none;
}

/* Disabled state for the overlay video share button */
#overlay .pane .col > #videoShareBtn:disabled{
  background: rgba(255,255,255,0.04) !important;
  color: var(--muted) !important;
  cursor: default !important;
  opacity: 0.85;
}

/* Hover / active states */
#overlay .pane .col > .btn:hover{ transform: translateY(-1px); filter:brightness(.98); }
#overlay .pane .col > .btn:active{ transform: translateY(1px); }

/* icon-only button style */
.icon-btn{padding:8px;display:inline-grid;place-items:center;border-radius:10px}
.icon-btn .icon{width:18px;height:18px;display:block;color:var(--muted)}
.icon-btn:hover .icon{color:var(--white)}
.icon-btn:active{transform:translateY(1px)}

/* Overlay pricing UI (moved into the parent column). Target inner pieces
   directly rather than relying on a wrapper box. */
.ov-hour-input-row{margin-top:2px;display:flex;flex-direction:column;gap:0px}
.ov-hour-input-row label{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
.input-number{width:100%;max-width:120px;padding:8px;border-radius:8px;border:1px solid rgba(0,0,0,0.12);background:rgba(255,255,255,0.03);color:var(--text)}
.ov-hourly{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:13px;color:var(--muted)}
.ov-hourly div{flex:1 1 140px}
.ov-totals{margin-top:8px;display:flex;gap:12px;flex-wrap:wrap}
.ov-totals div{flex:1 1 160px}
.ov-min-label{margin-top:6px;font-size:12px;color:var(--muted)}
.ov-pricing-notes{margin-top:8px;color:var(--muted);font-size:13px;line-height:1.6}

/* Admin hourly editor styling */
.hourly-editor{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hourly-editor .form-group{flex:1 1 0px}
.hourly-input{width:100%;padding:8px;border-radius:6px;border:1px solid rgba(0,0,0,0.08);background:var(--white)}

/* Yacht editor header actions: status + save button */
.yacht-actions{display:flex;align-items:center;gap:8px}
.yacht-actions .yacht-status{font-weight:700;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,0.03);color:var(--muted);font-size:13px}
.yacht-actions .yacht-status.modified{background:linear-gradient(180deg, rgba(15,98,254,0.12), rgba(15,98,254,0.08));color:var(--blue-500)}
.yacht-actions .save-yacht{margin-left:8px;padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--muted);cursor:pointer}
.yacht-price-editor.modified .save-yacht{background:var(--blue-500);color:var(--white);border-color:transparent}
.yacht-price-editor.modified .save-yacht:hover{filter:brightness(.95)}
.yacht-price-editor .save-yacht:hover{background:rgba(255,255,255,0.02)}

/* Compact adjustments for the Rates content when shown in the second column. */
@media (max-width:420px){
  /* compact numbers and labels */
  #overlay .pane .col:nth-child(2) label{font-size:11px;margin-bottom:4px}
  #overlay .pane .col:nth-child(2) .input-number{width:100%;font-size:14px;padding:6px;border-radius:6px}
  #overlay .pane .col:nth-child(2) .ov-hourly.small{display:flex;flex-direction:column;gap:0px;margin-top:6px}
  #overlay .pane .col:nth-child(2) .ov-hourly.small div{font-size:12px;line-height:1.1}
  #overlay .pane .col:nth-child(2) .ov-totals.small{display:flex;flex-direction:column;gap:0px;margin-top:4px;margin-bottom:4px}
  #overlay .pane .col:nth-child(2) .ov-totals.small div{font-size:11px}

  #overlay .pane .col:nth-child(2) .ov-totals strong{font-size:11.5px}


  #overlay .pane .col:nth-child(2) .notes.small{font-size:11px;margin-top:6px;overflow:hidden;text-overflow:ellipsis}

  /* ensure any overflow doesn't show scrollbars inside the small area */
  #overlay .pane .col:nth-child(2) > *{max-width:100%;box-sizing:border-box}
}

/* Number stepper (mobile fallback when native arrows are not shown) */
.number-stepper{display:inline-flex;align-items:center;gap:6px}
.number-stepper .step-btn{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text);width:34px;height:28px;border-radius:8px;font-size:18px;display:inline-flex;align-items:center;justify-content:center}
.number-stepper .step-btn:active{transform:translateY(1px)}
.ov-min-label{margin-top:6px;font-size:12px;color:var(--muted)}

/* On larger screens hide the custom stepper and rely on native controls */
@media (min-width:421px){
  .number-stepper .step-btn{display:none}
}

/* Ensure input still looks like an input on iOS/Android */
input[type="number"].input-number{appearance:textfield;-moz-appearance:textfield}
input[type="number"].input-number::-webkit-outer-spin-button,
input[type="number"].input-number::-webkit-inner-spin-button{appearance:auto}

/* Visual for thumbs with no photo (mock/offline mode) */
.thumb.no-photo{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));display:flex;align-items:center;justify-content:center;color:var(--muted);min-height:120px}
.thumb.no-photo img{opacity:0}
.thumb.no-photo::after{content:'No image available';font-size:13px;opacity:0.9}

/* Video thumbnail badge (boat page) */
.video-thumb{position:relative}
.video-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.5);color:var(--white);padding:8px 10px;border-radius:999px;font-size:14px;box-shadow:0 6px 18px rgba(0,0,0,0.6)}

/* Video modal (lazy loaded) */
.video-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:2200}
.video-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.75)}
.video-modal-content{position:relative;z-index:2201;max-width:960px;width:calc(100% - 40px);background:transparent;padding:12px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.video-modal-player{width:100%;height:auto;border-radius:10px;box-shadow:0 20px 80px rgba(0,0,0,0.8);background:#000}
.video-modal-close{position:absolute;top:-6px;right:-6px;z-index:2202;background:rgba(0,0,0,0.6);color:var(--white);border:none;padding:8px;border-radius:10px;cursor:pointer}

/* Overlay inline video placeholder and player */
.ov-video-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000;color:var(--white);z-index:3}
.ov-video-placeholder .ov-play-btn{background:rgba(255,255,255,0.06);border:none;color:var(--white);font-size:34px;width:84px;height:84px;border-radius:999px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ov-inline-video{position:relative;z-index:2;display:block;background:#000;border-radius:6px;max-height:100%;}
/* Ensure any video placed inside the image stack scales to fit the available
   area while preserving aspect ratio. Use absolute positioning to mirror
   how images are laid out and `object-fit: contain` to avoid cropping. */
.image-stack video, .image-stack .ov-inline-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  z-index: 2;
  background: #000;
}

/* Header controls row */
.header-controls{display:flex;gap:12px;align-items:center;margin-top:6px}
.search-input{flex:1;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:var(--text);min-width:160px}
.search-input::placeholder{font-size: 15px;color:rgba(229,229,229,0.45)}
.filter-select{padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text)}
.theme-toggle{width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--white);display:grid;place-items:center;cursor:pointer}
.theme-toggle:hover{background:rgba(255,255,255,0.02)}

/* Animated sun / moon icon */
.theme-toggle{padding:6px}
.theme-toggle .theme-icon{display:block;width:20px;height:20px;color:var(--white);transition:transform .28s ease, color .28s ease}
.icon-sun{opacity:0;transform:scale(.6) rotate(-20deg);transform-origin:50% 50%;transition:opacity .28s ease, transform .28s cubic-bezier(.2,.9,.25,1)}
.icon-moon{opacity:1;transform:scale(1);transition:opacity .28s ease, transform .28s cubic-bezier(.2,.9,.25,1)}
@media (prefers-reduced-motion: reduce){ .theme-toggle .theme-icon, .icon-sun, .icon-moon{transition:none} }

/* When light theme active, show sun and hide moon */
/* Light mode removed: dark theme is the default to avoid iPhone issues */

/* When overlay is active, prevent the document body from scrolling. We'll toggle
   the `overlay-open` class on <body> from JS. The overlay panel's internal
   scrollable columns retain overflow:auto so they can be scrolled independently. */
body.overlay-open{height:100vh;overflow:hidden;}

/* Ensure overlay can still handle touch gestures internally */
.overlay-root.active{touch-action:auto}

/* Card thumbnail: show full image within the card size without changing the card dimensions */
.thumb img{ object-fit: contain; background: rgba(0,0,0,0.06); }

/* Catalog grid: responsive two+ columns. Use auto-fit with a smaller
  min width so narrow phones can display more than one card without
  causing horizontal overflow or page zooming. */
.catalog{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:18px;padding:28px 14px 72px;max-width:1400px;margin:0 auto;align-items:stretch}

/* Card */
.card{background: linear-gradient(180deg, var(--surface), rgba(22,22,22,0.85));border-radius:var(--radius);overflow:hidden;cursor:pointer;border:1px solid rgba(255,255,255,0.04);box-shadow:var(--shadow-sm);transition: transform .26s cubic-bezier(.2,.9,.3,1), box-shadow .26s, border-color .2s;display:flex;flex-direction:column;height:100%}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:rgba(204,164,59,0.14)}
.card:active{transform:translateY(-2px)}
.card:focus-visible{outline:2px solid rgba(204,164,59,0.22);outline-offset:3px}

.thumb{position:relative;aspect-ratio:16/10;background:linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.22));overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.card:hover .thumb img{transform:scale(1.03)}

/* Hint to the browser that thumbnails will be transformed (improves animation smoothness) */
.thumb img{will-change:transform}

.pill{
  position:absolute;
  right:12px;
  bottom:08px;
  font-size:13px; /* slightly larger for readability */
  color:var(--white);
  font-weight:700;
  letter-spacing:0.3px;
  z-index:6;
  pointer-events:none; /* non-interactive overlay text */
  /* Plain text (no box) — strong "black light" shadow to keep legible on bright photos */
  background: transparent;
  padding: 0;
  border: 0;
  border-radius: 0;
  text-shadow:
    0 2px 0 rgba(0,0,0,0.98),
    0 0px 14px rgba(0,0,0,0.90),
    0 0px 4px rgba(0,0,0,0.80),
    0 0px 2px rgba(0,0,0,0.65);
}

/* Title overlay directly on the thumbnail image (no box) */
.thumb .title-overlay{position:absolute;left:12px;top:12px;color:var(--white);font-size:16px;font-weight:700;line-height:1.05;z-index:6;pointer-events:none}
.thumb .title-overlay{ /* very strong "black light" shadow for high-contrast on white yachts */
  text-shadow:
    0 2px 0 rgba(0,0,0,0.98),
    0 0px 14px rgba(0,0,0,0.90),
    0 0px 4px rgba(0,0,0,0.80),
    0 0px 2px rgba(0,0,0,0.65);
}

/* Build overlay (bottom-left) - text only with strong shadow */
.thumb .build-overlay{position:absolute;left:12px;bottom:12px;color:var(--white);font-size:13px;font-weight:700;line-height:1;z-index:6;pointer-events:none}
.thumb .build-overlay{ /* very strong "black light" shadow for high-contrast on white yachts */
  text-shadow:
    0 2px 0 rgba(0,0,0,0.98),
    0 0px 14px rgba(0,0,0,0.90),
    0 0px 4px rgba(0,0,0,0.80),
    0 0px 2px rgba(0,0,0,0.65);
}

.content{padding:16px 16px 18px;flex:1;display:flex;flex-direction:column;justify-content:space-between}
.meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:13px}
.title{font-size:17px;font-weight:600;margin:0 0 6px;color:var(--white)}

.divider{height:1px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.06), rgba(255,255,255,0.02));margin:12px 0}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--text);cursor:pointer;font-weight:600}
.btn:hover{background:rgba(255,255,255,0.02)}
.btn-primary{background:linear-gradient(180deg, rgba(204,164,59,0.12), rgba(204,164,59,0.06));border:1px solid rgba(204,164,59,0.18);color:var(--white);box-shadow:0 6px 18px rgba(204,164,59,0.06)}
.btn-grey{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);color:var(--muted);padding:6px 10px;border-radius:8px;font-weight:700;cursor:pointer}
.btn-grey:hover{background:rgba(255,255,255,0.06)}
.ov-availability{margin-left:10px;font-size:14px}
.ov-info-availability{
  display:block;
  width:100%;
  padding:4px !important;
  text-align:center;
  border-radius:10px;
  font-weight:800;
  /* blue high-contrast style */
  background: linear-gradient(180deg, #1677ff, #0f62d6);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 26px rgba(16,103,255,0.09);
}

/* Center the availability button text and style to match overlay (blue, white text).
   Keep the original vertical size from .btn-sm (padding kept at 6px 10px). */
.avail-btn{
  justify-content:center;
  align-items:center;
  text-align:center;
  /* keep btn-sm vertical padding */
  padding:6px 10px;
  /* slightly brighter blue than the page background (#242F3F) for visibility */
  background: linear-gradient(180deg, #2b4260, #274a6f);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius:8px;
  font-weight:700;
}
.avail-btn:hover{ background: linear-gradient(180deg, #335a88, #2a5fb0); }

/* Overlay / detail */
.overlay-root{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:999}
.overlay-root.active{display:flex}
.overlay-backdrop{position:absolute;inset:0;background:var(--overlay-bg);backdrop-filter:blur(4px)}

.overlay-panel{position:relative;width:min(1100px,96vw);height:min(88vh,900px);background:linear-gradient(180deg, rgba(54,54,54,0.98), rgba(25,27,30,0.98));border-radius:calc(var(--radius)+6px);border:1px solid rgba(255,255,255,0.04);box-shadow:0 30px 80px rgba(2,6,23,0.7);overflow:hidden;display:grid;grid-template-rows:60% 40%;animation:pop .16s ease-out}
@keyframes pop{from{transform:translateY(8px) scale(.98);opacity:.6}to{transform:translateY(0) scale(1);opacity:1}}

.overlay-close{font-size: 25px;position:absolute;top:14px;right:14px;z-index:5;background:rgba(0,0,0,0.35);border:1px solid rgba(255, 255, 255, 0.185);color:var(--white);width:45px;height:45px;display:grid;place-items:center;border-radius:10px;cursor:pointer;}
.overlay-close:hover{background:rgba(0,0,0,0.5)}

/* Minimal overlay mode used by boat.html: hide title/panes/close button to show only the image, arrows and zoom */
#overlay.minimal .overlay-panel{grid-template-rows:1fr}
#overlay.minimal .pane{display:none}
#overlay.minimal .titlebar{display:none}
#overlay.minimal .kv{display:none}
#overlay.minimal .price-table{display:none}
#overlay.minimal .ov-info-availability{display:none}

.gallery { position: relative; background: #0a0b10; touch-action: pan-y; }
/* stack of two images for animated sliding */
.image-stack { position: relative; width: 100%; height: 100%; overflow: hidden; }
.image-stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center center; display: block; will-change: transform, opacity; transition: transform .32s cubic-bezier(.2,.9,.25,1), opacity .2s ease; -webkit-user-drag: none; }
.image-stack img.back { transform: translateX(100%); z-index: 1; }
.image-stack img.front { transform: translateX(0); z-index: 2; }

/* classes applied during animated navigation */
.slide-in-from-right { transform: translateX(0) !important; }
.slide-in-from-left { transform: translateX(0) !important; }
.slide-out-to-left { transform: translateX(-100%) !important; }
.slide-out-to-right { transform: translateX(100%) !important; }

/* ensure dots and nav appear above the images */
.gallery .nav { z-index: 4; }
.dots { z-index: 3; }

.gallery .nav { position: absolute; top: 50%; transform: translateY(-50%); display: flex; width: 100%; justify-content: space-between; padding: 0 10px; pointer-events: none; }
.gallery button { pointer-events: auto; width: 42px; height: 42px; border-radius: 12px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.18); color: var(--white); cursor: pointer; font-size: 20px; }
.gallery button:hover { background: rgba(0,0,0,0.75); }

/* Overlay video indicator (centered play icon over the image) */
.ov-video-indicator{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;padding:12px 14px;border-radius:999px;background:rgba(0,0,0,0.45);color:var(--white);font-size:18px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,0.6);pointer-events:none}

/* Make select option text readable in both themes */
.filter-select option{color:var(--text);background:var(--surface)}

.dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:4px}
.dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.28);border:1px solid rgba(0,0,0,0.4)}
.dot.active{background:var(--accent);box-shadow:0 6px 18px rgba(204,164,59,0.12)}

/* Zoom overlay (created dynamically) */
.zoom-overlay {
  position: absolute; inset: 0; /* keep inside overlay panel */
  /* Place the zoom overlay above the image stack but below the close button
     so the close control remains visible while zoomed. The overlay-panel's
     close button uses z-index:5, so a value lower than that is appropriate. */
  z-index: 4; display: flex; align-items: center; justify-content: center; overflow: auto; background: rgba(0,0,0,0.0); touch-action: auto;
}
.zoom-overlay img {
  display: block; max-width: none; max-height: none; width: auto; height: auto; user-select: none;
}

/* Info pane */
.pane{display:grid;grid-template-columns:1.4fr 1fr;gap:4px;padding:4px}
.pane{grid-template-columns:1fr}
.pane .col{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));border-radius:6px;padding: 7px;border:1px solid rgba(255,255,255,0.03);overflow:auto}

/* Pricing column visibility controlled by JavaScript based on availability */
.overlay-panel .pane .col:nth-child(1){border-radius:6px;padding:9px}
.pane .titlebar{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:2px}
.pane h2{font-size:16px;margin:0;color:var(--white)}
.pane .subtle{color:var(--muted);font-size:13px}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:0px 0px;font-size:14px;margin-top:0px;margin-bottom:0px}
.kv div{display:contents}
.kv div span:first-child{color:var(--muted)}

.price-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px}
.price-table th,.price-table td{border-bottom:1px solid rgba(255,255,255,0.04);padding:2px 2px;text-align:left}
.price-table th{color:var(--muted);font-weight:700;letter-spacing:.3px;font-size:12px;text-transform:uppercase}
.price-badge{display:inline-block;padding:2px 6px;border-radius:10px;background:linear-gradient(180deg, rgba(204,164,59,0.95), rgba(204,164,59,0.9));color:#141414;font-weight:800;font-size:12px; width: 45px;text-align: center;}

.notes{margin-top:8px;color:var(--muted);font-size:13px;line-height:1.6}

/* Compact view tweaks (less dense) */
body.compact-view .card{border-radius:11px}
body.compact-view .thumb{aspect-ratio:4/3}
body.compact-view .content{padding:14px}
body.compact-view .title{font-size:15px}

/* Compact mode animations: fade/collapse marina and price details */
.meta-marina{display:inline-block;max-width:100%;overflow:hidden;white-space:nowrap;transition:max-width .28s ease, opacity .28s ease, margin .28s ease}
.price-row{transition:max-height .32s ease, opacity .28s ease, margin .28s ease, padding .28s ease;max-height:200px;overflow:hidden}

/* Collapsed state applied in compact view */
/* body.compact-view .meta-marina{opacity:0;max-width:0;margin:0;padding:0;pointer-events:none} */
body.compact-view .price-row{opacity:0;max-height:0;margin:0;padding:0;pointer-events:none}

/* shrink divider slightly when compact to remove extra spacing */
.divider{transition:margin .28s ease, opacity .28s ease}
body.compact-view .divider{margin:6px 0;opacity:0.85}

/* Ensure the remaining meta items align nicely */
body.compact-view .meta { gap:8px }

/* Responsive tweaks */
@media (max-width:980px){
  .pane{grid-template-columns:1fr}
  .catalog{gap:18px;padding:24px 16px 0px}
  .ov-hourly div, .ov-totals div {
    flex: 0;
  }
  .ov-hourly, .ov-totals, .hourly-editor{flex-direction:column}
  .input-number{max-width:100%}
  /* pane stacks into a single column on small screens */
}
@media (max-width:560px){
  .wrap-sbar{padding:14px; padding-top: 2px; padding-bottom: 2px}
  .wrap{padding:6px 14px 6px 14px;}
  .brand h1{font-size:16px}
  .catalog{grid-template-columns:repeat(2,minmax(120px,1fr));gap:14px;padding:18px 12px 0px}
  .title{font-size:16px}
  .header-actions{gap:4px}
  .brand{align-items:flex-start}
  .brand-left{flex:1;min-width:0;}
}

/* REVIEW: purge scan
  Candidates reported by baseline/tools/purge-runtime.ps1 -> baseline/tools/purge-report.json
  These token-like names were heuristically extracted from the CSS but may be false
  positives (for example, unit-like tokens inside values). No matching class-rule
  blocks were found for the listed items; this comment is a non-destructive marker
  for future cleanup: 16s, 26s, 28s, 2s, 32s, 3px, 4fr, 6s
*/
/* Broker Banner */
.broker-banner {
  background: linear-gradient(135deg, rgba(15,98,254,0.08), rgba(8,40,80,0.06));
  border-bottom: 1px solid rgba(15,98,254,0.22);
  padding: 8px 0;
  animation: bannerSlide 0.3s ease-out;
}

/* Broker Disclaimer: similar sizing to the banner but highlighted in red */
.broker-disclaimer {
  background: linear-gradient(135deg, rgba(255,65,54,0.04), rgba(80,8,8,0.02));
  border-bottom: 1px solid rgba(255,65,54,0.22);
  padding: 8px 0;
  animation: bannerSlide 0.3s ease-out;
}
.broker-disclaimer .banner-content { color: var(--blue-text); }
.broker-disclaimer #bannerDisclaimerText { color: #ff4444; font-weight:600; }

/* Intro modal (one-time shown) */
.intro-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 1200; }
.intro-modal.visible { display: flex; }
.intro-backdrop { position: absolute; inset: 0; background: rgba(4,8,12,0.6); backdrop-filter: blur(4px); }
.intro-content { position: relative; z-index: 2; max-width: 720px; width: calc(100% - 40px); background: linear-gradient(180deg, rgba(25,25,25,0.9), rgba(0,0,0,0.9)) !important; border-radius: 12px; padding: 22px; color: var(--white); box-shadow: 0 20px 60px rgba(2,6,23,0.7); border: 1px solid rgba(255,255,255,0.04); }
.intro-content h3 { margin: 0 0 8px 0; font-size: 20px; }
.intro-body p { margin: 0 0 12px 0; color: var(--muted); line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.intro-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.intro-actions .btn { min-width: 96px; margin-left: auto; }

/* small layout for dont-show checkbox */
.intro-dontshow { display: inline-flex; align-items: center; gap: 8px; margin-right: 12px; color: var(--muted); }
.intro-dontshow input[type="checkbox"] { width: 16px; height: 16px; }

/* Pricing Info Banner */
.pricing-info-banner {
  background: linear-gradient(135deg, rgba(54,54,54,0.8), rgba(25,27,30,0.8));
  border-bottom: 1px solid rgba(255,255,255,0.04);
  padding: 6px 0;
}

.pricing-info-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.pricing-info-content span {
  color: var(--white);
  font-weight: 600;
  font-size: 13px;
}

.pricing-info-content small {
  color: var(--muted);
  font-size: 11px;
}

@keyframes bannerSlide {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.banner-content span {
  color: var(--blue-text);
  font-weight: 700;
  font-size: 14px;
  text-shadow: 0 2px 6px rgba(6,30,60,0.45);
}

/* Small toast for feedback (copy/share) */
.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 24px;
  background: rgba(0,0,0,0.7);
  color: var(--white);
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 600;
  z-index: 2200;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}

/* Admin functionality moved to separate admin.html page */

/* Utility classes */
.u-gap-16{gap:16px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.col{flex:1;min-width:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.btn-sm{padding:6px 10px;font-size:12px;border-radius:8px}

/* Stronger selector to ensure share buttons are solid (override .btn background) */
.btn.btn-share{
  background: #194b0c !important;
  color: var(--white) !important;
  border-color: transparent !important;
}