/*
 * Property-profile brand overrides.
 *
 * The [sot_property_profile] shortcode lives in the
 * sot-property-dashboard plugin and ships ~1300 lines of inline CSS
 * that pre-dates the SOT brand system. It uses:
 *   - Manrope + Playfair Display (we standardised on Inter Tight + Fraunces)
 *   - A gold CTA (#f7c453) that clashes with the ocean/forest palette
 *   - A dark navy gradient on the booking panel (#0d2336 → #1a4466)
 *
 * Rewriting the plugin CSS would mean touching every release of the
 * plugin. Instead we override here — this file loads AFTER the plugin's
 * inline `wp_register_style('sot-property-profile', false)` registration
 * so our rules win without needing !important everywhere.
 *
 * Loaded conditionally by functions.php only when the property-detail
 * page template is in use.
 */

/* ─── Typography ─────────────────────────────────────────────────── */
.sot-profile-wrap,
.sot-profile-wrap p,
.sot-profile-wrap a,
.sot-prop-list-grid,
.sot-prop-list-grid p,
.sot-booking-form,
.sot-booking-form label,
.sot-booking-form input,
.sot-booking-form textarea,
.sot-booking-form select,
.sot-cat-option-name,
.sot-cat-option-price,
.sot-cat-option-note,
.sot-cat-option-avail {
  font-family: var(--sans, 'Inter Tight', 'Inter', system-ui, sans-serif) !important;
}

.sot-profile-hero-panel h2,
.sot-profile-hero-panel h1,
.sot-card h3,
.sot-room-card h4,
.sot-room-categories h3,
.sot-prop-card h3,
.sot-booking-header h3,
.sot-booking-success h3 {
  font-family: var(--serif, 'Fraunces', Georgia, serif) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
}

/* Restrain bulky hero title — was 2.05rem Playfair. Match the rest of
   the brand at ~28-32px Fraunces. */
.sot-profile-hero-panel h2 {
  font-size: clamp(1.45rem, 2.2vw, 1.85rem) !important;
  line-height: 1.15 !important;
}

.sot-booking-header h3 {
  font-size: clamp(1.3rem, 1.8vw, 1.55rem) !important;
}

/* ─── Brand-aligned hero panel ───────────────────────────────────── */
.sot-profile-hero-panel {
  background: linear-gradient(165deg,
      var(--ocean-deep, #07344B) 0%,
      var(--ocean,      #0A4D6E) 100%) !important;
  border-radius: 14px !important;
}

/* ─── Booking section — ocean gradient instead of navy ───────────── */
.sot-booking-section {
  background: linear-gradient(160deg,
      var(--ocean-deep, #07344B) 0%,
      var(--ocean,      #0A4D6E) 100%) !important;
  border-radius: 14px !important;
}

/* ─── Primary CTA: ocean instead of gold ─────────────────────────── */
.sot-btn-solid,
.sot-btn-book,
.sot-profile-wrap .sot-btn-solid,
.sot-profile-wrap .sot-btn-book {
  background: var(--ocean, #0A4D6E) !important;
  color: var(--paper, #FBF8F2) !important;
  border-radius: 10px !important;
  padding: 12px 18px !important;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  transition: background 0.15s ease, transform 0.1s ease !important;
}
.sot-btn-solid:hover,
.sot-btn-book:hover,
.sot-profile-wrap .sot-btn-solid:hover,
.sot-profile-wrap .sot-btn-book:hover {
  background: var(--ocean-deep, #07344B) !important;
}
.sot-btn-big {
  padding: 14px 28px !important;
  font-size: 1rem !important;
}

/* Outline buttons */
.sot-btn-outline {
  border-radius: 10px !important;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important;
}
.sot-btn-outline-dark {
  border-radius: 10px !important;
  border-color: rgba(15, 31, 36, 0.15) !important;
  color: var(--ink, #0F1F24) !important;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important;
}

/* ─── Booking form fields — match SOT search hero rounding ───────── */
.sot-booking-field input,
.sot-booking-field textarea,
.sot-booking-field select {
  border-radius: 10px !important;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important;
}

.sot-booking-field input:focus,
.sot-booking-field textarea:focus,
.sot-booking-field select:focus {
  border-color: var(--paper-2, #F3EFE6) !important;
  box-shadow: 0 0 0 3px rgba(251, 248, 242, 0.18) !important;
}

/* Room-category selection: ocean accent instead of gold */
.sot-cat-option input[type=radio]:checked + .sot-cat-option-body {
  background: linear-gradient(180deg, rgba(251, 248, 242, 0.18), rgba(251, 248, 242, 0.08)) !important;
  border-color: var(--paper, #FBF8F2) !important;
}
.sot-cat-option:hover {
  border-color: rgba(251, 248, 242, 0.55) !important;
}
.sot-cat-option-price { color: var(--paper, #FBF8F2) !important; }
.sot-booking-account-note a { color: var(--paper, #FBF8F2) !important; text-decoration: underline; }

/* ─── Cards — match SOT 14px radius and softer border ────────────── */
.sot-card,
.sot-prop-card,
.sot-room-card,
.sot-profile-hero-main {
  border-radius: 14px !important;
  border-color: rgba(15, 31, 36, 0.08) !important;
}

/* ─── Property card kicker uses brand ocean ──────────────────────── */
.sot-prop-card-kicker,
.sot-profile-kicker {
  color: var(--ocean, #0A4D6E) !important;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important;
  letter-spacing: 0.1em !important;
}

/* Verified ribbon — use forest green for trust, not blue */
.sot-verified-ribbon,
.sot-verified-badge-inline {
  background: var(--forest-deep, #143A22) !important;
  color: var(--paper, #FBF8F2) !important;
}

/* Available-rooms badge — same forest treatment */
.sot-room-avail-badge {
  background: var(--forest-deep, #143A22) !important;
  color: var(--paper, #FBF8F2) !important;
}

/* ─── Sticky right column — make sure it works with the new sticky
       header. Was top: 24px which can collide with the 80-90 px sticky
       header. Bump to 100 px so the booking widget sits *below* the
       site header on scroll. */
.sot-profile-main-right {
  top: 100px !important;
  max-height: calc(100vh - 120px) !important;
}

/* ─── Editorial body copy — match the rest of the site ───────────── */
.sot-card p,
.sot-card li {
  color: var(--ink-2, #2C4751) !important;
  line-height: 1.6 !important;
}

/* ─── Pill tags on cards (features/amenities) — switch to paper-2 ── */
.sot-room-amenities span,
.sot-prop-card-features span {
  background: var(--paper-2, #F3EFE6) !important;
  color: var(--ink, #0F1F24) !important;
}

/* ─── "No gallery yet" placeholder — branded camera icon ───────────
   The plugin emits .sot-profile-placeholder + .sot-profile-placeholder-lg
   with plain text on a dashed border. We layer a camera icon above the
   text and switch to brand colours so a fresh-listing property doesn't
   look broken. */
.sot-profile-placeholder-lg {
  background:
    radial-gradient(circle at center, var(--paper-2, #F3EFE6) 0%, var(--paper, #FBF8F2) 70%) !important;
  border: 1px dashed var(--paper-3, #E7E0D2) !important;
  border-radius: 14px !important;
  position: relative;
  color: var(--ink-3, #546870) !important;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important;
  font-size: 0.95rem !important;
  padding-top: 96px !important;
  min-height: 240px !important;
}
.sot-profile-placeholder-lg::before {
  content: "";
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  background-color: var(--ocean-soft, #D3E3EC);
  border-radius: 50%;
  /* Camera icon (inline SVG, ocean colour) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A4D6E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/><circle cx='12' cy='13' r='4'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px 28px;
}

/* Restaurant variant of the mobile book bar — title sits where price
   normally is; we truncate long restaurant names. */
.sot-prop-book-bar--restaurant .sot-prop-book-bar__amount {
  font-size: 1.1rem !important;
  font-family: var(--serif, 'Fraunces', Georgia, serif);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
  display: block;
}

/* Restaurant back-link — brand-pass the bare anchor in the template */
.stot-restaurant-back {
  margin: 0 0 1rem;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
  font-size: 0.95rem;
}
.stot-restaurant-back a {
  color: var(--ocean, #0A4D6E);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0;
  font-weight: 600;
  transition: color 0.15s ease;
}
.stot-restaurant-back a:hover {
  color: var(--ocean-deep, #063349);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.stot-restaurant-back a:focus-visible {
  outline: 2px solid var(--ocean, #0A4D6E);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ════════════════════════════════════════════════════════════════════
 *  MOBILE BOOKING BAR  (round 7)
 *
 *  On mobile the .sot-profile-main-right sticky column collapses to a
 *  static block at the bottom of the page. That leaves the visitor
 *  with no way to book without scrolling — exactly when we lose
 *  conversions. We add a fixed-bottom price + "Book stay" bar that
 *  stays in view while the visitor reads the profile. The bar is
 *  printed by page-property-detail.php (round 7) and only shows on
 *  ≤ 760 px viewports.
 * ════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  body.sot-prop-mobile-bar main {
    padding-bottom: calc(var(--stot-bottom-nav-height, 60px) + 76px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.sot-prop-mobile-bar .stot-app-tab {
    bottom: calc(var(--stot-bottom-nav-height, 60px) + 84px + env(safe-area-inset-bottom, 0px));
  }
  .sot-prop-book-bar {
    position: fixed;
    left: 0; right: 0;
    bottom: var(--stot-bottom-nav-height, 60px);
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
    background: var(--paper, #FBF8F2);
    border-top: 1px solid rgba(15, 31, 36, 0.08);
    box-shadow: 0 -8px 24px rgba(15, 31, 36, 0.10);
    font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
  }
  .sot-prop-book-bar__price {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .sot-prop-book-bar__from {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3, #546870);
  }
  .sot-prop-book-bar__amount {
    font-family: var(--serif, 'Fraunces', Georgia, serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink, #0F1F24);
    line-height: 1.1;
  }
  .sot-prop-book-bar__unit {
    font-size: 0.78rem;
    color: var(--ink-2, #2B3D44);
    font-weight: 500;
    margin-top: 0.1rem;
  }
  .sot-prop-book-bar__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.8rem 1.25rem;
    border-radius: 10px;
    background: var(--ocean, #0A4D6E);
    color: var(--paper, #FBF8F2);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    flex-shrink: 0;
    min-height: 44px;
    box-shadow: 0 4px 12px rgba(10, 77, 110, 0.22);
  }
  .sot-prop-book-bar__cta:hover { background: var(--ocean-deep, #063349); }
}
@media (min-width: 761px) {
  .sot-prop-book-bar { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
 *  REVIEWS SECTION  (round 7)
 *
 *  The sot-reviews-* classes live in sot-property-dashboard's
 *  class-sot-reviews.php which doesn't bundle a stylesheet. Without
 *  these rules the section renders unstyled below the property profile.
 *  Aligns to the SOT brand: Fraunces for the average score, Inter Tight
 *  for the rest, ocean accents on stars, 14 px card radius.
 * ════════════════════════════════════════════════════════════════════ */
.sot-reviews-section {
  margin-top: 1.5rem;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important;
}
.sot-reviews-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--paper, #FBF8F2);
  border: 1px solid var(--line, #DDD3BE);
  border-radius: 14px;
  margin-bottom: 1rem;
}
.sot-reviews-avg {
  font-family: var(--serif, 'Fraunces', Georgia, serif);
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--ink, #0F1F24);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.sot-reviews-avg-detail {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.sot-reviews-stars {
  font-size: 1.05rem;
  color: #C28E1B; /* warm gold — readable on paper, contrast 5.7:1 */
  letter-spacing: 0.06em;
}
.sot-reviews-count {
  font-size: 0.85rem;
  color: var(--ink-2, #2B3D44);
  font-weight: 500;
}
.sot-reviews-list {
  display: grid;
  gap: 0.85rem;
}
.sot-review-card {
  background: #fff !important;
  border: 1px solid rgba(15, 31, 36, 0.08) !important;
  border-radius: 14px !important;
  padding: 1rem 1.25rem !important;
}
.sot-review-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.6rem;
}
.sot-review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ocean-soft, #D3E3EC) !important;
  color: var(--ocean-deep, #063349) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.sot-review-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.sot-review-author {
  font-family: var(--serif, 'Fraunces', Georgia, serif) !important;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink, #0F1F24) !important;
}
.sot-review-date {
  font-size: 0.78rem;
  color: var(--ink-3, #546870);
}
.sot-review-rating,
.sot-review-stars {
  color: #C28E1B;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}
.sot-review-body,
.sot-review-text {
  color: var(--ink-2, #2B3D44) !important;
  line-height: 1.6 !important;
  font-size: 0.95rem;
  max-width: 68ch;
}

/* Review form (host-side response or guest-write) — match the search
   form input chrome we already standardised. */
.sot-review-form input,
.sot-review-form textarea,
.sot-review-form select {
  border-radius: 10px !important;
  border: 1px solid var(--line, #DDD3BE) !important;
  background: #fff !important;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important;
  font-size: 0.95rem !important;
  padding: 0.6rem 0.85rem !important;
  min-height: 48px;
}
.sot-review-form input:focus,
.sot-review-form textarea:focus,
.sot-review-form select:focus {
  outline: none;
  border-color: var(--ocean, #0A4D6E) !important;
  box-shadow: 0 0 0 3px rgba(10, 77, 110, 0.18) !important;
}
.sot-review-form button[type="submit"] {
  background: var(--ocean, #0A4D6E) !important;
  color: var(--paper, #FBF8F2) !important;
  border-radius: 10px !important;
  padding: 0.7rem 1.4rem !important;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important;
  font-weight: 700 !important;
}
.sot-review-form button[type="submit"]:hover {
  background: var(--ocean-deep, #063349) !important;
}

/* ════════════════════════════════════════════════════════════════════
 *  PROPERTY GALLERY LIGHTBOX  (round 9)
 *
 *  Brand-pass override for the lightbox emitted by sot-property-dashboard
 *  → includes/class-public-profile.php (line ~1232–1238).
 *  Plugin markup is left untouched; we just upgrade the chrome here.
 *
 *  Hooks the existing classes:
 *    .sot-gallery-lightbox       — modal container (toggles .is-open)
 *    .sot-gallery-backdrop       — full-screen scrim
 *    .sot-gallery-stage          — wraps the active <img>
 *    #sot-gallery-image          — current photo
 *    #sot-gallery-caption        — re-purposed as the "3 / 12" counter
 *    .sot-gallery-close          — top-right close (×)
 *    .sot-gallery-nav (.prev/.next) — left/right arrows
 *  Body gets .sot-modal-open while the lightbox is visible (existing JS).
 * ════════════════════════════════════════════════════════════════════ */

/* Lock scroll while open */
body.sot-modal-open {
  overflow: hidden !important;
}

/* Container — fixed full-viewport flex centre */
.sot-gallery-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: scale(0.985) !important;
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0.28s !important;
  pointer-events: none !important;
  background: transparent !important;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important;
}
.sot-gallery-lightbox.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1) !important;
  pointer-events: auto !important;
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0s !important;
}

/* Backdrop — ink wash with frosted blur */
.sot-gallery-lightbox .sot-gallery-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(15, 31, 36, 0.92) !important;
  -webkit-backdrop-filter: blur(13px) saturate(115%) !important;
  backdrop-filter: blur(13px) saturate(115%) !important;
  cursor: zoom-out !important;
  z-index: 0 !important;
}

/* Stage — holds the image; sits above backdrop */
.sot-gallery-lightbox .sot-gallery-stage {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1rem !important;
  max-width: 92vw !important;
  max-height: 92vh !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Active image */
.sot-gallery-lightbox #sot-gallery-image {
  display: block !important;
  max-width: 92vw !important;
  max-height: 88vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 14px !important;
  background: var(--ink, #0F1F24) !important;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45) !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
}
.sot-gallery-lightbox #sot-gallery-image.is-swapping {
  opacity: 0 !important;
  transform: scale(0.985) !important;
}

/* Counter pill (re-uses #sot-gallery-caption which already shows "X / Y") */
.sot-gallery-lightbox #sot-gallery-caption,
.sot-gallery-lightbox .sot-gallery-counter {
  position: absolute !important;
  bottom: 1.4rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  padding: 0.45rem 0.95rem !important;
  background: var(--paper, #FBF8F2) !important;
  color: var(--ink, #0F1F24) !important;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
  z-index: 2 !important;
  user-select: none !important;
  pointer-events: none !important;
}

/* Optional source-attribution caption — Fraunces, low-key */
.sot-gallery-lightbox .sot-gallery-caption {
  position: absolute !important;
  bottom: 4.2rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  max-width: 70vw !important;
  margin: 0 !important;
  color: var(--paper, #FBF8F2) !important;
  opacity: 0.7 !important;
  font-family: var(--serif, 'Fraunces', Georgia, serif) !important;
  font-style: italic !important;
  font-size: 0.95rem !important;
  text-align: center !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Close button (top-right) */
.sot-gallery-lightbox .sot-gallery-close {
  position: absolute !important;
  top: 1.2rem !important;
  right: 1.2rem !important;
  z-index: 3 !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: var(--paper, #FBF8F2) !important;
  color: var(--ink, #0F1F24) !important;
  border: 1px solid rgba(15, 31, 36, 0.08) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important;
  font-size: 1.6rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32) !important;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
}
.sot-gallery-lightbox .sot-gallery-close:hover,
.sot-gallery-lightbox .sot-gallery-close:focus-visible {
  background: var(--ocean-soft, #D3E3EC) !important;
  color: var(--ocean-deep, #063349) !important;
  outline: none !important;
  transform: scale(1.06) !important;
}
.sot-gallery-lightbox .sot-gallery-close:focus-visible {
  box-shadow: 0 0 0 3px rgba(10, 77, 110, 0.4), 0 6px 18px rgba(0, 0, 0, 0.32) !important;
}

/* Prev / Next nav buttons */
.sot-gallery-lightbox .sot-gallery-nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
  width: 52px !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: var(--paper, #FBF8F2) !important;
  color: var(--ink, #0F1F24) !important;
  border: 1px solid rgba(15, 31, 36, 0.08) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important;
  font-size: 2rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32) !important;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
}
.sot-gallery-lightbox .sot-gallery-nav.sot-gallery-prev {
  left: 1.4rem !important;
}
.sot-gallery-lightbox .sot-gallery-nav.sot-gallery-next {
  right: 1.4rem !important;
}
.sot-gallery-lightbox .sot-gallery-nav:hover,
.sot-gallery-lightbox .sot-gallery-nav:focus-visible {
  background: var(--ocean-soft, #D3E3EC) !important;
  color: var(--ocean-deep, #063349) !important;
  outline: none !important;
  transform: translateY(-50%) scale(1.06) !important;
}
.sot-gallery-lightbox .sot-gallery-nav:focus-visible {
  box-shadow: 0 0 0 3px rgba(10, 77, 110, 0.4), 0 6px 18px rgba(0, 0, 0, 0.32) !important;
}

/* Mobile — full-height tap zones on left/right thirds for nav, close stays top-right */
@media (max-width: 640px) {
  .sot-gallery-lightbox #sot-gallery-image {
    max-width: 96vw !important;
    max-height: 78vh !important;
    border-radius: 10px !important;
  }
  .sot-gallery-lightbox .sot-gallery-close {
    top: 0.75rem !important;
    right: 0.75rem !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 1.4rem !important;
  }
  .sot-gallery-lightbox .sot-gallery-nav {
    top: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    width: 33.333vw !important;
    height: 100% !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: rgba(251, 248, 242, 0.85) !important;
    font-size: 2.4rem !important;
  }
  .sot-gallery-lightbox .sot-gallery-nav.sot-gallery-prev {
    left: 0 !important;
    justify-content: flex-start !important;
    padding-left: 0.6rem !important;
  }
  .sot-gallery-lightbox .sot-gallery-nav.sot-gallery-next {
    right: 0 !important;
    justify-content: flex-end !important;
    padding-right: 0.6rem !important;
  }
  .sot-gallery-lightbox .sot-gallery-nav:hover,
  .sot-gallery-lightbox .sot-gallery-nav:focus-visible {
    background: rgba(10, 77, 110, 0.18) !important;
    color: var(--paper, #FBF8F2) !important;
    transform: none !important;
  }
  .sot-gallery-lightbox #sot-gallery-caption,
  .sot-gallery-lightbox .sot-gallery-counter {
    bottom: 1rem !important;
    font-size: 0.78rem !important;
    padding: 0.35rem 0.8rem !important;
  }
}

/* Reduced motion — strip the transitions */
@media (prefers-reduced-motion: reduce) {
  .sot-gallery-lightbox,
  .sot-gallery-lightbox #sot-gallery-image,
  .sot-gallery-lightbox .sot-gallery-close,
  .sot-gallery-lightbox .sot-gallery-nav {
    transition: none !important;
  }
  .sot-gallery-lightbox {
    transform: none !important;
  }
}