/* ──────────────────────────────────────────────────────────────────────────
 *  gp-shared-ui.css
 *
 *  ONE shared visual layer used by EVERY Golfapedia static page (index,
 *  search, news, contact, about, partners, directory) and the 3D tour.
 *
 *  Loaded after every other site stylesheet so it always wins the cascade.
 *
 *  Owns:
 *    1. Colored social icons (header + hero + footer + TikTok placeholder).
 *    2. Shared "Send Feedback" hero button.
 *    3. Shared feedback dialog (modal + form + 5-star rating).
 *    4. Static-page typography normalisation (News / About / Partners / Contact).
 *    5. Contact page: centered Get-In-Touch / Founder block + button.
 *    6. Hides legacy "Find a course" footer CTA blocks.
 *    7. Google Translate label width tweaks for "Translate from English".
 *    8. Tour3D top-left "Send Feedback" button (under Google Map).
 *
 *  The goal is: change ANY of the above in ONE place and all pages update.
 *  ────────────────────────────────────────────────────────────────────── */


/* ══════════════════════════════════════════════════════════════════════════
   1. SHARED SOCIAL ICONS  (.gp-social-links)
   Replaces the previous outline / mismatched SVG sets that were duplicated
   on every static page.  Each icon is a circular pill in the brand's
   official accent colour with a clean white glyph.
   ══════════════════════════════════════════════════════════════════════════ */

/* Container — used inside hero, footer, anywhere */
.gp-social-links {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.6rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Stack-on-tiny-screens fallback so 5 icons never overlap on a 320px Galaxy Fold */
@media (max-width: 360px) {
  .gp-social-links { gap: 0.45rem; }
}

/* Override legacy `.hero-social-media { display:none !important }` rule that
   used to hide the hero icon row on phones. We want a consistent colored
   icon row on EVERY breakpoint, on EVERY page (Task 3). */
@media (max-width: 767px) {
  .hero-social-media,
  .gp-social-links {
    display: flex !important;
  }
  .hero-social-media .gp-social-link,
  .gp-social-links .gp-social-link {
    display: inline-flex !important;
  }
  .hero-social-media .gp-social-link svg,
  .gp-social-links .gp-social-link svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Use !important on size/colour so we always beat older rules in
   components.css / style.css / index-cinematic.css that target
   `.hero-social-media a` with !important.  The shared icons must look
   identical no matter which page renders them. */
.gp-social-link,
.hero-social-media .gp-social-link,
.gp-footer-social .gp-social-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) !important;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease,
    background-color 0.18s ease !important;
  -webkit-tap-highlight-color: transparent;
  margin: 0 !important;
  padding: 0 !important;
  transform: none;
}

.gp-social-link svg,
.hero-social-media .gp-social-link svg,
.gp-footer-social .gp-social-link svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  fill: currentColor !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.gp-social-link:hover,
.gp-social-link:focus-visible {
  transform: translateY(-1px) scale(1.05) !important;
  filter: brightness(1.08);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32) !important;
  outline: none;
}

.gp-social-link:focus-visible {
  outline: 2px solid #4ade80 !important;
  outline-offset: 2px;
}

/* Brand colours — official */
.gp-social-link.gp-social-facebook,
.hero-social-media .gp-social-link.gp-social-facebook,
.gp-footer-social .gp-social-link.gp-social-facebook { background: #1877F2 !important; color: #ffffff !important; border: 1px solid #1877F2 !important; }

.gp-social-link.gp-social-x,
.hero-social-media .gp-social-link.gp-social-x,
.gp-footer-social .gp-social-link.gp-social-x { background: #000000 !important; color: #ffffff !important; border: 1px solid #1f2937 !important; }

.gp-social-link.gp-social-linkedin,
.hero-social-media .gp-social-link.gp-social-linkedin,
.gp-footer-social .gp-social-link.gp-social-linkedin { background: #0A66C2 !important; color: #ffffff !important; border: 1px solid #0A66C2 !important; }

.gp-social-link.gp-social-youtube,
.hero-social-media .gp-social-link.gp-social-youtube,
.gp-footer-social .gp-social-link.gp-social-youtube { background: #FF0000 !important; color: #ffffff !important; border: 1px solid #FF0000 !important; }

.gp-social-link.gp-social-tiktok,
.hero-social-media .gp-social-link.gp-social-tiktok,
.gp-footer-social .gp-social-link.gp-social-tiktok { background: #000000 !important; color: #ffffff !important; border: 1px solid #1f2937 !important; }

/* Hero icon row — slightly larger on the hero panel */
.gp-static-hero-panel .gp-social-links,
.hero-cin-left .gp-social-links {
  margin-top: 0.85rem;
}

@media (min-width: 768px) {
  .gp-social-link { width: 38px; height: 38px; }
  .gp-social-link svg { width: 19px; height: 19px; }
}

/* Override the previous outline-only homepage hero treatment so the
   homepage shares the same colored pill look as every other page. */
body.home-page .hero-cin-section .hero-social-media a,
body.home-page .hero-cin-section .gp-social-link,
body.home-page .hero-social-media a,
body.home-page .hero-social-media .gp-social-link {
  background: var(--gp-social-bg, #ffffff) !important;
  border: 1px solid var(--gp-social-bg, #ffffff) !important;
  color: var(--gp-social-fg, #ffffff) !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) !important;
}

body.home-page .hero-cin-section .gp-social-link.gp-social-facebook,
body.home-page .hero-social-media .gp-social-link.gp-social-facebook { --gp-social-bg: #1877F2; --gp-social-fg: #ffffff; }
body.home-page .hero-cin-section .gp-social-link.gp-social-x,
body.home-page .hero-social-media .gp-social-link.gp-social-x { --gp-social-bg: #000000; --gp-social-fg: #ffffff; }
body.home-page .hero-cin-section .gp-social-link.gp-social-linkedin,
body.home-page .hero-social-media .gp-social-link.gp-social-linkedin { --gp-social-bg: #0A66C2; --gp-social-fg: #ffffff; }
body.home-page .hero-cin-section .gp-social-link.gp-social-youtube,
body.home-page .hero-social-media .gp-social-link.gp-social-youtube { --gp-social-bg: #FF0000; --gp-social-fg: #ffffff; }
body.home-page .hero-cin-section .gp-social-link.gp-social-tiktok,
body.home-page .hero-social-media .gp-social-link.gp-social-tiktok { --gp-social-bg: #000000; --gp-social-fg: #ffffff; }

body.home-page .hero-cin-section .hero-social-media a svg,
body.home-page .hero-social-media .gp-social-link svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
}

/* Footer social row — keep colored pills there too */
.gp-footer-social .gp-social-link {
  width: 34px;
  height: 34px;
}
.gp-footer-social .gp-social-link svg { width: 16px; height: 16px; }

/* Hide unstyled legacy <a> children inside .gp-footer-social once the JS
   has injected the unified .gp-social-link list (the JS replaces the
   markup; this rule is a safety net during a brief flash). */
.gp-footer-social[data-gp-social-rendered="true"] > a:not(.gp-social-link) { display: none !important; }
.hero-social-media[data-gp-social-rendered="true"] > a:not(.gp-social-link) { display: none !important; }

/* ── ANTI-FLASH (Task 11): kill the white-circle placeholder on mobile ──────
   Before the shared JS swaps in the colored brand pills, the raw <a> icons in
   the home hero matched the white-background fallback rule above, rendering as
   white icons on a white circle (an ugly ~2s blank circle on slow phones).
   Until the JS upgrades them, render the inline SVG as a plain white icon on a
   transparent background (clearly visible on the dark hero) — no white circle,
   icons appear instantly. The footer row already uses a subtle dark chip, so
   it never flashed white. */
body.home-page .hero-social-media a:not(.gp-social-link) {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #ffffff !important;
}
body.home-page .hero-social-media a:not(.gp-social-link) svg {
  fill: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   2. "SEND FEEDBACK" HERO BUTTON (.gp-feedback-trigger)
   Sits at the bottom-left of every hero panel.  Uses absolute positioning
   on top of the existing hero so we never alter hero layout.
   ══════════════════════════════════════════════════════════════════════════ */

/* Make sure every hero acts as a positioning context so the
   bottom-left absolute "Send Feedback" button anchors to the hero card. */
body.gp-static-page .gp-static-hero-panel,
body.home-page .hero-cin-wrap.gp-cin-hero-panel {
  position: relative !important;
}

/* The Send Feedback trigger uses the Golfapedia green theme.  !important on
   the colour/shape props guards against the global
   `.btn { background:#2563eb !important }` rule in style.css and any UA
   button defaults, so it can never render as a harsh blue button. */
.gp-feedback-trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #ecfdf5 !important;
  background: linear-gradient(135deg, rgba(15, 46, 34, 0.96) 0%, rgba(26, 77, 56, 0.96) 100%) !important;
  border: 1px solid rgba(74, 222, 128, 0.45) !important;
  border-radius: 999px !important;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.gp-feedback-trigger:hover,
.gp-feedback-trigger:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(134, 239, 172, 0.7) !important;
  box-shadow: 0 10px 24px rgba(34, 197, 94, 0.32);
  background: linear-gradient(135deg, #0f2e22 0%, #1f6d58 100%) !important;
  outline: none;
}

.gp-feedback-trigger:focus-visible {
  outline: 2px solid #86efac;
  outline-offset: 3px;
}

.gp-feedback-trigger svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Hero placement (desktop/tablet) — absolute, bottom-left of the hero card. */
.gp-feedback-trigger.gp-feedback-hero {
  position: absolute;
  left: 1.25rem;
  bottom: 1rem;
  z-index: 4;
}

/* Static pages — feedback + social share one centered row under the title. */
body.gp-static-page .hero-social-row-wrap {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  width: 100% !important;
  max-width: 100% !important;
  position: static !important;
  margin-top: 0.85rem !important;
}

body.gp-static-page .hero-social-row-wrap .gp-feedback-trigger.gp-feedback-hero {
  position: static !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  order: 1 !important;
}

body.gp-static-page .hero-social-row-wrap .hero-social-media {
  position: static !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.65rem !important;
  flex-wrap: wrap !important;
  order: 2 !important;
}

/* On the home/search page the feedback button sits in the social row.
   Desktop (≥901px): centered under course pills in the left column.
   Tablet/phone: column stack — icons on top, feedback below. */
body.home-page .hero-social-row-wrap {
  flex-direction: column !important;
}

@media (min-width: 769px) and (max-width: 900px) {
  body.home-page .hero-social-row-wrap {
    flex-direction: column !important;
    align-items: center !important;
  }
}

@media (min-width: 901px) {
  body.home-page .hero-social-row-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.65rem !important;
  }

  body.home-page .hero-social-row-wrap .gp-feedback-trigger.gp-feedback-home {
    order: 1 !important;
    margin: 0 !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  body.home-page .hero-social-row-wrap .hero-social-media {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
  }
}

body.home-page .gp-feedback-trigger.gp-feedback-home {
  position: relative !important;
  display: inline-flex !important;
  margin: 0 !important;
  align-self: center !important;
  flex-shrink: 0 !important;
}

/* ── Phones only: elegant, overlap-proof Send Feedback button ─────────────
   Hero cards are short on phones, so the absolutely-positioned button used
   to collide with the hero subtitle and social-icon row.  At ≤768px we pull
   the button completely out of any absolute context (every offset reset) and
   render it as a centered, self-contained pill on its OWN row, with clear
   breathing room above it.  This covers both the static-page hero
   (.gp-feedback-hero) and the home/search hero (.gp-feedback-home).
   Desktop/tablet layout is intentionally left untouched. */
@media (max-width: 768px) {
  body.gp-static-page .hero-social-row-wrap {
    gap: 0.55rem 0.7rem !important;
    margin-top: 0.65rem !important;
    padding: 0 0.25rem !important;
  }

  body.gp-static-page .hero-social-row-wrap .gp-feedback-trigger.gp-feedback-hero {
    padding: 0.5rem 0.95rem !important;
    font-size: 0.82rem !important;
    line-height: 1 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
  }

  body.home-page .gp-feedback-trigger.gp-feedback-home {
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
    padding: 0.5rem 0.95rem !important;
    font-size: 0.82rem !important;
    line-height: 1 !important;
    align-self: center !important;
    flex-shrink: 0 !important;
    order: 2 !important;
  }

  body.home-page .hero-social-row-wrap {
    flex-direction: column !important;
    align-items: center !important;
  }

  body.gp-static-page .gp-feedback-trigger.gp-feedback-hero svg,
  body.home-page .gp-feedback-trigger.gp-feedback-home svg {
    width: 14px !important;
    height: 14px !important;
  }

}

/* Tour3D placement — under the Google Map button (top-left toolbar) */
.gp-feedback-trigger.gp-feedback-tour {
  display: inline-flex;
  /* The button is appended into .golf-top-buttons by gp-shared-ui.js, so
     the existing flex column layout (gap, alignment) takes over.  We
     keep the visual style consistent with golf-panel-btn but with a
     subtle accent treatment so users notice it. */
  margin-top: 0.45rem;
  align-self: stretch;
  justify-content: center;
  font-size: 0.82rem;
  padding: 0.5rem 0.85rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   3. SHARED FEEDBACK DIALOG (.gp-feedback-modal)
   ══════════════════════════════════════════════════════════════════════════ */

/* Golfapedia feedback palette (scoped tokens). */
.gp-feedback-overlay {
  --gpf-green: #2bbf66;
  --gpf-green-light: #5ee184;
  --gpf-border-green: rgba(94, 225, 132, 0.42);
  --gpf-text: #f4fff7;
  --gpf-muted: rgba(235, 255, 240, 0.72);
  --gpf-gold: #f5c95f;

  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 12, 8, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 100000;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

.gp-feedback-overlay.is-open {
  display: flex;
  animation: gpFeedbackOverlayIn 0.18s ease;
}

.gp-feedback-overlay[hidden] { display: none !important; }

/* Embed demo page (/demo/...) — support questions dialog (no star rating). */
.gp-feedback-overlay.gp-feedback-support-mode .gp-star-rating,
.gp-feedback-overlay.gp-feedback-support-mode .gp-rating-readout {
  display: none !important;
}
.gp-feedback-overlay.gp-feedback-support-mode .gp-feedback-rating-field {
  margin-bottom: 0;
}

@keyframes gpFeedbackOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.gp-feedback-dialog,
.gp-feedback-dialog * {
  box-sizing: border-box;
}

.gp-feedback-dialog {
  width: min(680px, calc(100vw - 40px));
  max-height: calc(100dvh - 40px);
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  padding: 32px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(212, 175, 55, 0.12), transparent 52%),
    radial-gradient(90% 70% at 0% 0%, rgba(46, 125, 90, 0.14), transparent 48%),
    linear-gradient(165deg, #f8faf9 0%, #eef3f0 48%, #e4ece7 100%);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.45),
    0 2px 0 rgba(255, 255, 255, 0.65) inset;
  color: #102018;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  animation: gpFeedbackDialogIn 0.22s cubic-bezier(0.21, 1, 0.4, 1);
  scrollbar-width: thin;
  scrollbar-color: rgba(16, 32, 24, 0.25) transparent;
}

.gp-feedback-dialog::-webkit-scrollbar { width: 8px; }
.gp-feedback-dialog::-webkit-scrollbar-thumb {
  background: rgba(94, 225, 132, 0.3);
  border-radius: 999px;
}

@keyframes gpFeedbackDialogIn {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Close button (top-right circular) ───────────────────────────────── */
.gp-feedback-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(235, 255, 240, 0.25) !important;
  background: rgba(0, 0, 0, 0.22) !important;
  background-image: none !important;
  color: var(--gpf-text) !important;
  box-shadow: none !important;
  margin: 0 !important;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  z-index: 2;
}

.gp-feedback-close svg { width: 20px; height: 20px; display: block; }

.gp-feedback-close:hover,
.gp-feedback-close:focus-visible {
  border-color: rgba(87, 230, 140, 0.75) !important;
  background: rgba(87, 230, 140, 0.12) !important;
  color: var(--gpf-text) !important;
  box-shadow: 0 0 0 3px rgba(87, 230, 140, 0.12) !important;
  transform: scale(1.05);
  outline: none;
}

/* ── Header (badge + title block) ────────────────────────────────────── */
.gp-feedback-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
  padding-right: 48px;
}

.gp-feedback-badge {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--gpf-border-green);
  background: rgba(43, 191, 102, 0.12);
  color: var(--gpf-green-light);
  box-shadow: 0 0 22px rgba(36, 188, 94, 0.18);
}

.gp-feedback-badge svg { width: 26px; height: 26px; display: block; }

.gp-feedback-heading {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.gp-feedback-title {
  margin: 0;
  font-size: clamp(1.55rem, 2vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--gpf-text);
  line-height: 1.1;
}

.gp-feedback-subtitle {
  margin: 0;
  color: var(--gpf-muted);
  font-size: 1rem;
  line-height: 1.45;
}

.gp-feedback-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.gp-feedback-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gp-feedback-label {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #f3fff6;
}

.gp-feedback-optional {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(235, 255, 240, 0.62);
  letter-spacing: 0.01em;
}

.gp-feedback-required {
  color: var(--gpf-gold);
  font-weight: 700;
}

/* ── Inputs with left icons ──────────────────────────────────────────── */
.gp-feedback-input-wrap,
.gp-feedback-textarea-wrap {
  position: relative;
  width: 100%;
}

.gp-feedback-input-icon,
.gp-feedback-textarea-icon {
  position: absolute;
  left: 14px;
  top: 14px;
  display: inline-flex;
  color: rgba(150, 220, 175, 0.7);
  pointer-events: none;
}

.gp-feedback-input-icon { top: 50%; transform: translateY(-50%); }
.gp-feedback-input-icon svg,
.gp-feedback-textarea-icon svg { width: 18px; height: 18px; display: block; }

.gp-feedback-input,
.gp-feedback-textarea {
  width: 100%;
  border-radius: 15px;
  border: 1px solid rgba(209, 255, 222, 0.22);
  background: rgba(0, 20, 13, 0.42);
  color: var(--gpf-text);
  font: inherit;
  font-size: 0.98rem;
  line-height: 1.45;
  padding: 14px 16px 14px 44px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.gp-feedback-input { min-height: 50px; }

.gp-feedback-textarea {
  min-height: 96px;
  resize: vertical;
  font-family: inherit;
  padding-top: 14px;
}

.gp-feedback-input::placeholder,
.gp-feedback-textarea::placeholder {
  color: rgba(235, 255, 240, 0.4);
}

.gp-feedback-input:focus,
.gp-feedback-textarea:focus {
  border-color: rgba(87, 230, 140, 0.8);
  background: rgba(0, 24, 16, 0.55);
  box-shadow:
    0 0 0 4px rgba(87, 230, 140, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.gp-feedback-counter {
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-size: 0.76rem;
  font-weight: 600;
  color: rgba(235, 255, 240, 0.45);
  pointer-events: none;
}

.gp-feedback-counter.is-near-limit { color: var(--gpf-gold); }

/* ── 5-star rating — clean standalone gold stars, never overflows ────── */
.gp-feedback-rating-field {
  align-items: center;
  gap: 6px;
  text-align: center;
}

.gp-feedback-rating-field .gp-feedback-actions {
  margin-top: 4px;
  width: 100%;
}

.gp-feedback-rating-field .gp-feedback-error,
.gp-feedback-rating-field .gp-feedback-status {
  width: 100%;
  text-align: center;
}

.gp-feedback-rating-field > .gp-feedback-label {
  justify-content: center;
  width: 100%;
}

.gp-star-rating-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 0;
  box-sizing: border-box;
}

.gp-star-rating-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 4px;
  box-sizing: border-box;
}

.gp-feedback-required-tag {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gpf-gold);
  padding: 3px 10px;
  border: 1px solid rgba(245, 201, 95, 0.45);
  border-radius: 999px;
  background: rgba(245, 201, 95, 0.1);
  white-space: nowrap;
}

.gp-star-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 4vw, 30px);
  max-width: 100%;
  box-sizing: border-box;
}

/* High-specificity + !important so it defeats any global nuclear
   `button { background:#1e40af; min-width:120px; border-radius:2rem }`
   rule that would otherwise turn these into blue pills. */
.gp-star-rating .gp-star-button {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 4px !important;
  margin: 0 !important;
  cursor: pointer;
  line-height: 1 !important;
  color: transparent !important;
  transition: transform 0.16s ease, filter 0.16s ease;
}

.gp-star-rating .gp-star-button .gp-star-glyph {
  display: block;
  line-height: 0;
}

.gp-star-rating .gp-star-button svg {
  width: clamp(2.1rem, 6vw, 2.85rem);
  height: clamp(2.1rem, 6vw, 2.85rem);
  display: block;
  fill: transparent;
  stroke: var(--gpf-gold);
  stroke-width: 1.4;
  transition: fill 0.16s ease, stroke 0.16s ease, filter 0.16s ease;
}

.gp-star-rating .gp-star-button:hover,
.gp-star-rating .gp-star-button:focus-visible {
  transform: translateY(-2px) scale(1.06);
  outline: none;
}

.gp-star-rating .gp-star-button:hover svg,
.gp-star-rating .gp-star-button:focus-visible svg {
  filter: drop-shadow(0 0 12px rgba(245, 201, 95, 0.35));
}

.gp-star-rating .gp-star-button:focus-visible svg {
  stroke: #ffe7a0;
}

/* Filled (selected or hover-previewed) — solid gold star. */
.gp-star-rating .gp-star-button.is-filled svg {
  fill: var(--gpf-gold);
  stroke: #ffe7a0;
  filter: drop-shadow(0 0 14px rgba(245, 201, 95, 0.28));
}

/* Live readout: "Tap a star to rate" → "Thanks — you rated…" */
.gp-rating-readout {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--gpf-muted);
  text-align: center;
  width: 100%;
}

.gp-rating-readout.is-selected {
  color: var(--gpf-gold);
  font-weight: 600;
}

.gp-feedback-error {
  margin: 0;
  padding: 0.6rem 0.85rem;
  background: rgba(252, 165, 165, 0.12);
  border: 1px solid rgba(252, 165, 165, 0.4);
  border-radius: 12px;
  color: #fca5a5;
  font-size: 0.88rem;
  line-height: 1.4;
}

.gp-feedback-error[hidden] { display: none; }

.gp-feedback-field-hint {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--gpf-muted);
}

.gp-feedback-input-invalid,
.gp-feedback-input[aria-invalid="true"] {
  border-color: rgba(252, 165, 165, 0.85) !important;
  box-shadow: 0 0 0 2px rgba(252, 165, 165, 0.2);
}

.gp-feedback-status {
  margin: 0;
  padding: 0.6rem 0.85rem;
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.35);
  border-radius: 12px;
  color: #86efac;
  font-size: 0.92rem;
  line-height: 1.4;
}

.gp-feedback-status[hidden] { display: none; }

.gp-feedback-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: 2px;
}

/* Name/email below Send/Cancel — 15% smaller type than the main fields. */
.gp-feedback-contact-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
}

.gp-feedback-contact-fields .gp-feedback-label {
  font-size: 0.782rem;
}

.gp-feedback-contact-fields .gp-feedback-input {
  font-size: 0.833rem;
}

.gp-feedback-contact-fields .gp-feedback-input::placeholder {
  font-size: inherit;
}

/* Dialog buttons — forced to the Golfapedia green theme with !important so
   any global blue `.btn` rule (and UA defaults) can never override them. */
.gp-feedback-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  min-width: 0 !important;
  padding: 0 28px !important;
  border-radius: 999px !important;
  font-size: 0.98rem;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid transparent !important;
  box-shadow: none;
  margin: 0 !important;
  font-family: inherit;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

.gp-feedback-btn svg { width: 18px; height: 18px; display: block; }

.gp-feedback-cancel {
  background: rgba(0, 18, 12, 0.28) !important;
  background-image: none !important;
  border-color: rgba(235, 255, 240, 0.25) !important;
  color: var(--gpf-text) !important;
}

.gp-feedback-cancel:hover,
.gp-feedback-cancel:focus-visible {
  background: rgba(235, 255, 240, 0.08) !important;
  border-color: rgba(235, 255, 240, 0.4) !important;
  color: var(--gpf-text) !important;
  outline: none;
}

.gp-feedback-submit {
  background: linear-gradient(180deg, #5ee184, #20984f) !important;
  background-image: linear-gradient(180deg, #5ee184, #20984f) !important;
  color: #07301c !important;
  border-color: rgba(184, 255, 199, 0.45) !important;
  box-shadow: 0 12px 28px rgba(34, 174, 83, 0.28) !important;
}

.gp-feedback-submit:hover:not(:disabled),
.gp-feedback-submit:focus-visible:not(:disabled) {
  background: linear-gradient(180deg, #6ef091, #23a957) !important;
  color: #07301c !important;
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(34, 174, 83, 0.34) !important;
  outline: none;
}

.gp-feedback-submit:focus-visible {
  outline: 2px solid #b8ffc7;
  outline-offset: 2px;
}

/* Disabled Send (no rating yet) — muted but still elegant. */
.gp-feedback-submit:disabled,
.gp-feedback-submit[disabled],
.gp-feedback-submit[aria-disabled="true"] {
  opacity: 0.48;
  box-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* ── Footer privacy note ─────────────────────────────────────────────── */
.gp-feedback-footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 14px 0 0;
  font-size: 0.82rem;
  color: rgba(235, 255, 240, 0.55);
}

.gp-feedback-footnote svg {
  width: 14px;
  height: 14px;
  display: block;
  flex: 0 0 auto;
  color: rgba(150, 220, 175, 0.7);
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .gp-feedback-overlay { padding: 12px; }
  .gp-feedback-dialog {
    width: calc(100vw - 24px);
    max-width: 390px;
    max-height: calc(100dvh - 24px);
    padding: 24px 20px;
    border-radius: 22px;
  }
  .gp-feedback-header { margin-bottom: 18px; padding-right: 40px; }
  .gp-feedback-badge { width: 46px; height: 46px; }
  .gp-feedback-badge svg { width: 22px; height: 22px; }
  .gp-feedback-subtitle { font-size: 0.94rem; }
  .gp-feedback-close { top: 14px; right: 14px; }
  .gp-feedback-textarea { min-height: 105px; }
}

@media (max-width: 420px) {
  .gp-star-rating { gap: 12px; justify-content: center; }
  .gp-star-rating .gp-star-button { padding: 2px !important; }
  .gp-star-rating .gp-star-button svg { width: 2.15rem; height: 2.15rem; }
  .gp-feedback-actions { gap: 12px; }
  .gp-feedback-btn { flex: 0 0 auto; padding: 0 14px !important; font-size: 0.95rem; }
}

/* Lock body scroll while dialog is open */
body.gp-feedback-open {
  overflow: hidden !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   4. STATIC PAGE TYPOGRAPHY (News / About / Partners / Contact)
   Unifies font, sizing, spacing on every static long-form page.
   ══════════════════════════════════════════════════════════════════════════ */

body.gp-static-page,
body.gp-static-page .content-section,
body.gp-static-page .content-container,
body.gp-static-page .about-content,
body.gp-static-page .news-content,
body.gp-static-page .contact-content,
body.gp-static-page .investment-content {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Common heading scale */
body.gp-static-page .about-content h2,
body.gp-static-page .news-content h2,
body.gp-static-page .contact-content h2,
body.gp-static-page .investment-content h2 {
  font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.75rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.005em !important;
  color: #ffffff !important;
  margin: 1.6rem 0 0.9rem !important;
}

body.gp-static-page .about-content h2:first-child,
body.gp-static-page .news-content h2:first-child,
body.gp-static-page .contact-content h2:first-child,
body.gp-static-page .investment-content h2:first-child {
  margin-top: 0 !important;
}

body.gp-static-page .about-content h3,
body.gp-static-page .news-content h3,
body.gp-static-page .contact-content h3,
body.gp-static-page .investment-content h3 {
  font-size: clamp(1.05rem, 0.95rem + 0.55vw, 1.25rem) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #ffffff !important;
  margin: 1.1rem 0 0.55rem !important;
}

/* Body copy */
body.gp-static-page .about-content p,
body.gp-static-page .about-content li,
body.gp-static-page .news-content p,
body.gp-static-page .contact-content p,
body.gp-static-page .investment-content p,
body.gp-static-page .investment-content li {
  font-size: 1.02rem !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.84) !important;
  margin: 0 0 0.8rem !important;
}

body.gp-static-page .about-content ul,
body.gp-static-page .about-content ol,
body.gp-static-page .investment-content ul,
body.gp-static-page .investment-content ol {
  margin: 0.5rem 0 1.1rem !important;
  padding-left: 1.5rem !important;
}

body.gp-static-page .about-content strong,
body.gp-static-page .news-content strong,
body.gp-static-page .contact-content strong,
body.gp-static-page .investment-content strong {
  color: #86efac !important;
  font-weight: 600 !important;
}

body.gp-static-page .about-content a,
body.gp-static-page .news-content a,
body.gp-static-page .contact-content a,
body.gp-static-page .investment-content a {
  color: #4ade80 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

body.gp-static-page .about-content a:hover,
body.gp-static-page .news-content a:hover,
body.gp-static-page .contact-content a:hover,
body.gp-static-page .investment-content a:hover {
  color: #86efac !important;
  text-decoration: underline !important;
}

/* Mobile spacing tighten-up */
@media (max-width: 600px) {
  body.gp-static-page .about-content,
  body.gp-static-page .news-content,
  body.gp-static-page .contact-content,
  body.gp-static-page .investment-content {
    padding: 1.25rem 1rem !important;
  }
  body.gp-static-page .about-content p,
  body.gp-static-page .about-content li,
  body.gp-static-page .news-content p,
  body.gp-static-page .contact-content p,
  body.gp-static-page .investment-content p,
  body.gp-static-page .investment-content li {
    font-size: 0.97rem !important;
    line-height: 1.6 !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   5. CONTACT PAGE — center the Get-In-Touch / name / Founder block.
   The "Send Feedback" button is the shared hero button injected by
   gp-shared-ui.js (identical to every other static page).
   ══════════════════════════════════════════════════════════════════════════ */

body.gp-static-page .contact-content .contact-info {
  text-align: center !important;
  max-width: 640px;
  margin: 0 auto;
}

body.gp-static-page .contact-content .contact-info > h2,
body.gp-static-page .contact-content .contact-info > .contact-founder,
body.gp-static-page .contact-content .contact-info > p {
  text-align: center !important;
}

body.gp-static-page .contact-content .contact-info > h2 {
  margin-bottom: 0.4rem !important;
}

body.gp-static-page .contact-content .contact-info > .contact-founder {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin: 0 0 0.25rem !important;
}

body.gp-static-page .contact-content .contact-methods {
  max-width: 520px;
  margin: 0 auto;
  text-align: left;
  display: grid;
  gap: 0.6rem;
}

@media (max-width: 600px) {
  body.gp-static-page .contact-content .contact-info { padding: 0 0.5rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   6. HIDE LEGACY "FIND A COURSE" FOOTER CTA
   The footer CTA block .gp-footer-cta contained:
       <p>...</p><a href="/" class="gp-btn gp-btn-primary">Find a course</a>
   Per Task 8 the entire CTA panel is removed everywhere.  We hide via CSS
   rather than deleting the markup so we don't accidentally break footer
   layout in any embedded view, and the JS layer also unconditionally
   removes the node at runtime as a belt-and-braces guarantee.
   ══════════════════════════════════════════════════════════════════════════ */

.gp-footer .gp-footer-cta,
.gp-footer-inner .gp-footer-cta {
  display: none !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   7. GOOGLE TRANSLATE — ONE compact, fixed, polished control on every page.

   Every page now renders the VERTICAL layout (a native <select class=
   "goog-te-combo">).  The old rules used width:fit-content, so the long
   "Translate From English" label blew the box up wide on the search page.
   We pin a FIXED width here (overriding gp-site-shared.css with !important +
   later cascade position) so the control is byte-for-byte identical on every
   page and never resizes the header.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ANTI-FLASH / ANTI-SHIFT (desktop ≥769px) ─────────────────────────────
   The widget host starts life inside a display:none nav <li>, then JS moves
   it into the header AFTER first paint.  If it lived in the normal flow that
   move would shrink the flex nav and re-center the links (the "header moves"
   the user sees), and Google injecting the <select> would reflow again.

   Fix: pin the translate slot ABSOLUTELY to the right of the header so it is
   OUT of flow and can never push the nav, AND reserve the nav's right-hand
   space from first paint so the links are laid out once and never move.
   The widget then simply fades in (see .gp-translate-ready) at a fixed spot. */
@media (min-width: 769px) {
  body.home-page .header-container,
  body.gp-static-page .header-container {
    position: relative !important;
  }

  /* Reserve the right-hand space so the centered nav clears the translate
     slot from the very first paint (no reflow when the widget arrives). */
  body.home-page .header-container nav,
  body.gp-static-page .header-container nav {
    padding-right: 216px !important;
    box-sizing: border-box !important;
  }

  /* The translate slot — absolutely anchored at the header's right edge,
     vertically centered, fixed 200px.  Out of flow ⇒ zero layout impact. */
  body.home-page .header-container .gp-translate-widget,
  body.gp-static-page .header-container .gp-translate-widget,
  .header-container > #google_translate_element.gp-translate-widget {
    position: absolute !important;
    top: 50% !important;
    right: 1.5rem !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 38px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    /* Hidden until the <select> has rendered, then fade in — kills the
       flash of Google's momentarily-unstyled gadget. */
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
  }

  body.home-page .header-container .gp-translate-widget.gp-translate-ready,
  body.gp-static-page .header-container .gp-translate-widget.gp-translate-ready,
  .header-container > #google_translate_element.gp-translate-widget.gp-translate-ready {
    opacity: 1;
    pointer-events: auto;
  }
}

/* The native select itself — fixed width, dark themed, single line. */
body.home-page .header-container .gp-translate-widget select.goog-te-combo,
body.gp-static-page .header-container .gp-translate-widget select.goog-te-combo,
.header-container > #google_translate_element.gp-translate-widget select.goog-te-combo,
body.home-page .header-container .gp-translate-widget .goog-te-combo,
body.gp-static-page .header-container .gp-translate-widget .goog-te-combo,
.header-container > #google_translate_element.gp-translate-widget .goog-te-combo {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 1.9rem 0 0.7rem !important;
  box-sizing: border-box !important;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-size: 0.86rem !important;
  font-weight: 500 !important;
  line-height: 34px !important;
  color: #eafaf0 !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  /* chevron */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2386efac' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.6rem center !important;
  border: 1px solid rgba(134, 239, 172, 0.35) !important;
  border-radius: 8px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

body.home-page .header-container .gp-translate-widget .goog-te-combo:hover,
body.gp-static-page .header-container .gp-translate-widget .goog-te-combo:hover,
.header-container > #google_translate_element.gp-translate-widget .goog-te-combo:hover,
body.home-page .header-container .gp-translate-widget .goog-te-combo:focus,
body.gp-static-page .header-container .gp-translate-widget .goog-te-combo:focus,
.header-container > #google_translate_element.gp-translate-widget .goog-te-combo:focus {
  border-color: rgba(134, 239, 172, 0.7) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  outline: none !important;
}

/* The dropdown OPTIONS render in the native OS popup — force readable dark
   text so they aren't white-on-white on some platforms. */
body.home-page .header-container .gp-translate-widget .goog-te-combo option,
body.gp-static-page .header-container .gp-translate-widget .goog-te-combo option,
.header-container > #google_translate_element.gp-translate-widget .goog-te-combo option {
  color: #0c1f16 !important;
  background: #ffffff !important;
}

/* Hide Google's "Powered by" gadget chrome / icon so only the select shows. */
.gp-translate-widget .goog-te-gadget {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}
.gp-translate-widget .goog-te-gadget > span,
.gp-translate-widget .goog-te-gadget img,
.gp-translate-widget .goog-logo-link {
  display: none !important;
}

/* Mobile — the translate control sits inside the .gp-translate-mobile nav li.
   Keep it compact and consistent there too. */
@media (max-width: 768px) {
  .gp-translate-mobile #google_translate_element select.goog-te-combo,
  .gp-translate-mobile .goog-te-combo {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 200px !important;
    max-width: 70vw !important;
    height: 38px !important;
    padding: 0 1.9rem 0 0.7rem !important;
    font-size: 0.9rem !important;
    color: #eafaf0 !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2386efac' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.6rem center !important;
    border: 1px solid rgba(134, 239, 172, 0.35) !important;
    border-radius: 8px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .gp-translate-mobile .goog-te-combo option {
    color: #0c1f16 !important;
    background: #ffffff !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   8. TOUR3D — feedback button slot under Google Map
   ══════════════════════════════════════════════════════════════════════════ */

/* Tour3D — appears directly under the Google Map button.  Stretches to
   100% of the column on desktop/tablet so it lines up with the panel
   buttons above it; collapses to a compact icon+label pill on the
   mobile-premium chrome where the panel buttons are 48px squares. */
.golf-top-buttons .gp-feedback-trigger.gp-feedback-tour {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.45rem;
  padding: 0.55rem 0.8rem;
  background: linear-gradient(135deg, rgba(15, 46, 34, 0.92) 0%, rgba(31, 109, 88, 0.92) 100%);
  color: #ecfdf5;
  border: 1px solid rgba(74, 222, 128, 0.45);
  border-radius: 10px;
  font-family: var(--tour-font-ui, 'Inter', system-ui, -apple-system, sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: break-word;
}

.golf-top-buttons .gp-feedback-trigger.gp-feedback-tour .golf-panel-btn-label {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  text-align: center;
}

.golf-top-buttons .gp-feedback-trigger.gp-feedback-tour:hover,
.golf-top-buttons .gp-feedback-trigger.gp-feedback-tour:focus-visible {
  border-color: rgba(134, 239, 172, 0.8);
  background: linear-gradient(135deg, rgba(20, 62, 50, 0.95) 0%, rgba(26, 95, 77, 0.95) 100%);
  outline: none;
}

/* Mobile-premium chrome: panel buttons are tight icon squares.
   Force this button to fit into that column without overflowing. */
body.tour-mobile-premium .golf-top-buttons .gp-feedback-trigger.gp-feedback-tour {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  min-height: 44px !important;
  padding: 4px 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: #ffffff !important;
  flex-direction: column !important;
  gap: 3px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.tour-mobile-premium .golf-top-buttons .gp-feedback-trigger.gp-feedback-tour svg {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  fill: #d4af37 !important;
  color: #d4af37 !important;
}

/* Tour3D feedback dialog — light fields on the dark tour page only. */
body.gp-tour3d-page .gp-feedback-dialog .gp-feedback-input,
body.gp-tour3d-page .gp-feedback-dialog .gp-feedback-textarea {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid rgba(15, 23, 42, 0.2) !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06) !important;
  -webkit-text-fill-color: #111827 !important;
}

body.gp-tour3d-page .gp-feedback-dialog .gp-feedback-input::placeholder,
body.gp-tour3d-page .gp-feedback-dialog .gp-feedback-textarea::placeholder {
  color: rgba(15, 23, 42, 0.45) !important;
  -webkit-text-fill-color: rgba(15, 23, 42, 0.45) !important;
  opacity: 1 !important;
}

body.gp-tour3d-page .gp-feedback-dialog .gp-feedback-input:focus,
body.gp-tour3d-page .gp-feedback-dialog .gp-feedback-textarea:focus {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: rgba(43, 191, 102, 0.75) !important;
  box-shadow:
    0 0 0 4px rgba(43, 191, 102, 0.15),
    inset 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

body.gp-tour3d-page .gp-feedback-dialog .gp-feedback-input-icon,
body.gp-tour3d-page .gp-feedback-dialog .gp-feedback-textarea-icon {
  color: rgba(15, 23, 42, 0.45) !important;
}

body.gp-tour3d-page .gp-feedback-dialog .gp-feedback-counter {
  color: rgba(15, 23, 42, 0.45) !important;
}

body.gp-tour3d-page .gp-feedback-dialog .gp-feedback-input-invalid,
body.gp-tour3d-page .gp-feedback-dialog .gp-feedback-input[aria-invalid="true"] {
  border-color: #dc2626 !important;
  background: #ffffff !important;
  color: #111827 !important;
}

body.gp-tour3d-page .gp-feedback-dialog .gp-feedback-input:-webkit-autofill,
body.gp-tour3d-page .gp-feedback-dialog .gp-feedback-textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #111827 !important;
  caret-color: #111827 !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   9. HEADER CONSISTENCY LOCK  (search/home page  ==  every static page)

   This file is the LAST stylesheet on every page, so these rules win the
   cascade and guarantee the header above the hero is metrically IDENTICAL
   everywhere — no resize/bounce/shift when navigating between pages.

   The home/search page (body.home-page) previously used 1.25rem nav links
   while static pages used 1.1rem; that mismatch is the visible "resize"
   when moving between the search page and the rest of the site.  We pin a
   single canonical set of header metrics for BOTH body classes.
   ══════════════════════════════════════════════════════════════════════════ */

/* Header bar height — identical on every page (desktop). */
@media (min-width: 769px) {
  body.home-page .header-container,
  body.gp-static-page .header-container {
    height: 62px !important;
    min-height: 62px !important;
    box-sizing: border-box !important;
  }
}

/* Brand lockup — logo image + wordmark identical everywhere. */
body.home-page .header-container .logo,
body.gp-static-page .header-container .logo {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  font-weight: 800 !important;
  font-size: 2.46rem !important;
  text-decoration: none !important;
}

body.home-page .header-container .logo img,
body.gp-static-page .header-container .logo img {
  width: 47px !important;
  height: 47px !important;
}

body.home-page .header-container .logo .gp-brand-text,
body.gp-static-page .header-container .logo .gp-brand-text {
  font-size: 2.46rem !important;
  line-height: 1 !important;
}

/* Navigation — identical distribution on every page (desktop).  The home/
   search page previously stretched links across the full container while
   static pages capped the menu at 720px, so link positions jumped between
   pages.  Pin the SAME centered, 720px-capped, evenly-spaced menu for both. */
@media (min-width: 769px) {
  body.home-page .header-container nav,
  body.gp-static-page .header-container nav {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: center !important;
    min-width: 0 !important;
  }

  body.home-page .header-container .nav-menu,
  body.gp-static-page .header-container .nav-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: space-evenly !important;
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 0 !important;
    list-style: none !important;
  }

  /* ONE canonical type ramp so links never resize or shift between pages. */
  body.home-page .header-container .nav-menu > li > a,
  body.home-page .header-container .nav-menu > li > a:visited,
  body.gp-static-page .header-container .nav-menu > li > a,
  body.gp-static-page .header-container .nav-menu > li > a:visited {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    padding: 0.45rem 0.65rem !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    white-space: nowrap !important;
  }

  body.home-page .header-container .nav-menu > li > a:hover,
  body.home-page .header-container .nav-menu > li > a:focus,
  body.gp-static-page .header-container .nav-menu > li > a:hover,
  body.gp-static-page .header-container .nav-menu > li > a:focus {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.09) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   10. REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .gp-social-link,
  .gp-feedback-trigger,
  .gp-feedback-btn,
  .gp-star-button {
    transition: none !important;
  }
  .gp-feedback-trigger:hover,
  .gp-social-link:hover { transform: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   11. FEEDBACK / MESSAGE BUTTON CONSISTENCY (Task 6)
   The "Send us Feedback" (home + static hero) and "Send us a Message"
   (contact) buttons should match the solid-green golf-course buttons
   (.movie-course-btn): solid #1f6a4f fill, 10px radius, weight 700, white
   text — never a harsh blue. The separate 3D-tour feedback button
   (.gp-feedback-tour) is intentionally excluded; the tour page is reviewed
   separately.
   ══════════════════════════════════════════════════════════════════════════ */
body.home-page .gp-feedback-trigger.gp-feedback-home,
body.home-page .gp-feedback-trigger.gp-feedback-hero,
body.gp-static-page .gp-feedback-trigger.gp-feedback-hero,
body.gp-static-page .gp-feedback-trigger.gp-feedback-contact {
  background: #1f6a4f !important;
  background-image: none !important;
  border: none !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(31, 106, 79, 0.3) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.home-page .gp-feedback-trigger.gp-feedback-home:hover,
body.home-page .gp-feedback-trigger.gp-feedback-home:focus-visible,
body.home-page .gp-feedback-trigger.gp-feedback-hero:hover,
body.home-page .gp-feedback-trigger.gp-feedback-hero:focus-visible,
body.gp-static-page .gp-feedback-trigger.gp-feedback-hero:hover,
body.gp-static-page .gp-feedback-trigger.gp-feedback-hero:focus-visible,
body.gp-static-page .gp-feedback-trigger.gp-feedback-contact:hover,
body.gp-static-page .gp-feedback-trigger.gp-feedback-contact:focus-visible {
  background: #174d3a !important;
  background-image: none !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(31, 106, 79, 0.36) !important;
}

/* Contact "Send us a Message" + hero feedback buttons get the full course-button
   size (padding / min-height / font-size) on home and static pages. */
body.home-page .gp-feedback-trigger.gp-feedback-home,
body.gp-static-page .gp-feedback-trigger.gp-feedback-contact,
body.gp-static-page .gp-feedback-trigger.gp-feedback-hero {
  padding: 0.62rem 1.1rem !important;
  min-height: 46px !important;
  font-size: 0.9rem !important;
}

/* =====================================================================
   Item 6 — Cookie consent banner + "must allow cookies" feature gate
   (cb20260530b). Modern, on-theme (Golfapedia greens), responsive.
   ===================================================================== */
/* Dim/blur the rest of the page so the centered consent banner stands out. */
body.gp-cookie-banner-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147482999;
  background: rgba(2, 8, 6, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.gp-cookie-banner {
  position: fixed;
  left: 50%;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%) scale(0.96);
  width: min(620px, calc(100vw - 1.6rem));
  z-index: 2147483000; /* above site chrome; below nothing else we own */
  background: linear-gradient(180deg, #1a4a34, #0e2c20);
  color: #f3fbf6;
  border: 1px solid rgba(126, 224, 160, 0.7);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(126, 224, 160, 0.15), 0 0 38px rgba(46, 168, 105, 0.35);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease;
}
.gp-cookie-banner.is-visible {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.gp-cookie-banner-inner {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1rem 1.25rem;
  flex-wrap: wrap;
}
.gp-cookie-banner-text {
  flex: 1 1 280px;
  min-width: 0;
}
.gp-cookie-banner-body {
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(234, 246, 238, 0.85);
}
.gp-cookie-banner-link,
.gp-feedback-site-link {
  color: #7ee0a0;
  text-decoration: underline;
}
.gp-cookie-banner-link:hover,
.gp-feedback-site-link:hover {
  color: #aef0c4;
}
.gp-cookie-banner-actions {
  display: flex;
  gap: 0.6rem;
  flex: 0 0 auto;
  align-items: center;
}
.gp-cookie-btn {
  font: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 999px;
  padding: 0.6rem 1.15rem;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.gp-cookie-btn:active { transform: translateY(1px); }
.gp-cookie-btn-primary {
  background: #1f8a55;
  color: #fff;
  border-color: #2aa869;
}
.gp-cookie-btn-primary:hover { background: #25a064; }
.gp-cookie-btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: #eaf6ee;
  border-color: rgba(234, 246, 238, 0.35);
}
.gp-cookie-btn-secondary:hover { background: rgba(255, 255, 255, 0.14); }

/* Feature gate popup ("You must allow cookies to use this feature.") */
.gp-cookie-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483001;
  background: rgba(4, 12, 9, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.gp-cookie-gate {
  width: min(420px, 100%);
  background: #0d2018;
  color: #eaf6ee;
  border: 1px solid rgba(76, 174, 103, 0.5);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  padding: 1.4rem 1.4rem 1.2rem;
  text-align: center;
}
.gp-cookie-gate-title {
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 0.4rem;
}
.gp-cookie-gate-sub {
  font-size: 0.85rem;
  color: rgba(234, 246, 238, 0.8);
  margin: 0 0 1rem;
}
.gp-cookie-gate-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 0.9rem;
}

@media (max-width: 600px) {
  .gp-cookie-banner {
    width: calc(100vw - 1.5rem);
    max-height: min(80vh, 560px);
    overflow-y: auto;
  }
  .gp-cookie-banner-inner {
    flex-direction: column;
    align-items: stretch;
    padding: 0.72rem 0.85rem;
    gap: 0.6rem;
  }
  .gp-cookie-banner-text {
    flex: 0 1 auto;
    min-width: 0;
  }
  .gp-cookie-banner-body {
    font-size: 0.78rem;
    line-height: 1.35;
  }
  .gp-cookie-banner-actions {
    width: 100%;
    flex-direction: column;
    gap: 0.42rem;
  }
  .gp-cookie-banner-actions .gp-cookie-btn {
    flex: 1 1 auto;
    width: 100%;
    text-align: center;
    white-space: normal;
    font-size: 0.78rem;
    line-height: 1.25;
    padding: 0.52rem 0.7rem;
    min-height: 44px;
  }
}

/* Isolate cookie UI from index-page "nuclear" button/shadow overrides (style.css). */
.gp-cookie-banner {
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(126, 224, 160, 0.15), 0 0 38px rgba(46, 168, 105, 0.35) !important;
  border: 1px solid rgba(126, 224, 160, 0.7) !important;
  background: linear-gradient(180deg, #1a4a34, #0e2c20) !important;
  color: #f3fbf6 !important;
}
.gp-cookie-banner-body {
  font-size: 0.86rem !important;
  line-height: 1.45 !important;
  color: rgba(234, 246, 238, 0.85) !important;
}
.gp-cookie-banner-link {
  color: #7ee0a0 !important;
  text-decoration: underline !important;
}
.gp-cookie-banner-link:hover {
  color: #aef0c4 !important;
}
.gp-cookie-btn,
.gp-cookie-btn:hover,
.gp-cookie-btn:focus,
.gp-cookie-btn:active {
  font: inherit !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  border-radius: 999px !important;
  padding: 0.6rem 1.15rem !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  margin: 0 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  background-image: none !important;
  outline: none !important;
  box-shadow: none !important;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease !important;
}
.gp-cookie-btn-primary,
.gp-cookie-btn-primary:hover,
.gp-cookie-btn-primary:focus,
.gp-cookie-btn-primary:active {
  background: #1f8a55 !important;
  color: #fff !important;
  border-color: #2aa869 !important;
}
.gp-cookie-btn-primary:hover {
  background: #25a064 !important;
}
.gp-cookie-btn-secondary,
.gp-cookie-btn-secondary:hover,
.gp-cookie-btn-secondary:focus,
.gp-cookie-btn-secondary:active {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #eaf6ee !important;
  border-color: rgba(234, 246, 238, 0.35) !important;
}
.gp-cookie-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14) !important;
}
.gp-cookie-gate {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !important;
  background: #0d2018 !important;
  color: #eaf6ee !important;
  border: 1px solid rgba(76, 174, 103, 0.5) !important;
}
.gp-cookie-gate-title {
  color: #eaf6ee !important;
}
.gp-cookie-gate-sub {
  color: rgba(234, 246, 238, 0.8) !important;
}
@media (max-width: 600px) {
  .gp-cookie-banner-body {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
  }
  .gp-cookie-banner-actions .gp-cookie-btn {
    font-size: 0.78rem !important;
    line-height: 1.25 !important;
    padding: 0.52rem 0.7rem !important;
    white-space: normal !important;
  }
}

/* =====================================================================
   Elegant consent upgrade (cb20260622a):
   heading + cookie badge, equal-prominence Accept/Reject, "Cookie Settings"
   ghost button, granular preferences modal with on-brand toggle switches,
   and a persistent footer "Cookie Settings" link.
   ===================================================================== */
.gp-cookie-banner-inner { align-items: flex-start !important; }
.gp-cookie-banner-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(126, 224, 160, 0.14);
  color: #9ff0bf;
  box-shadow: inset 0 0 0 1px rgba(126, 224, 160, 0.25);
}
.gp-cookie-banner-badge svg { width: 25px; height: 25px; }
.gp-cookie-banner-title {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #f3fbf6;
}
.gp-cookie-banner-actions {
  flex: 1 1 100% !important;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}

/* Equal-prominence choice buttons (Reject must be as easy as Accept). */
.gp-cookie-btn-choice,
.gp-cookie-btn-choice:hover,
.gp-cookie-btn-choice:focus,
.gp-cookie-btn-choice:active {
  min-width: 122px !important;
  text-align: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #eaf6ee !important;
  border: 1px solid rgba(159, 240, 191, 0.5) !important;
}
.gp-cookie-btn-choice:hover { background: rgba(255, 255, 255, 0.2) !important; }
.gp-cookie-btn-choice.gp-cookie-btn-primary,
.gp-cookie-btn-choice.gp-cookie-btn-primary:focus,
.gp-cookie-btn-choice.gp-cookie-btn-primary:active {
  background: #1f8a55 !important;
  border-color: #2aa869 !important;
  color: #fff !important;
}
.gp-cookie-btn-choice.gp-cookie-btn-primary:hover { background: #25a064 !important; }

/* Low-emphasis "Cookie Settings" entry to the granular panel. */
.gp-cookie-btn-ghost,
.gp-cookie-btn-ghost:hover,
.gp-cookie-btn-ghost:focus,
.gp-cookie-btn-ghost:active {
  background: transparent !important;
  color: #bfe9cf !important;
  border: 1px solid transparent !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
.gp-cookie-btn-ghost:hover {
  color: #eafff2 !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.gp-cookie-btn:focus-visible {
  outline: 2px solid #9ff0bf !important;
  outline-offset: 2px !important;
}

/* ---- Preferences modal ---------------------------------------------- */
.gp-cookie-prefs-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(2, 8, 6, 0.66);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: gpCookieFade 0.18s ease-out;
}
.gp-cookie-prefs {
  position: relative;
  box-sizing: border-box;
  width: min(560px, 100%);
  max-height: min(86vh, 760px);
  overflow-y: auto;
  background: linear-gradient(180deg, #163f2d, #0c241a) !important;
  color: #f3fbf6;
  border: 1px solid rgba(126, 224, 160, 0.6);
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(126, 224, 160, 0.15), 0 0 42px rgba(46, 168, 105, 0.3);
  padding: 1.5rem 1.5rem 1.25rem;
  animation: gpCookiePop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.25);
}
.gp-cookie-prefs-close {
  position: absolute;
  top: 0.85rem;
  right: 0.9rem;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  color: #cdeedd;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.gp-cookie-prefs-close:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.gp-cookie-prefs-close svg { width: 18px; height: 18px; }
.gp-cookie-prefs-head {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  margin: 0 2rem 1.1rem 0;
}
.gp-cookie-prefs-badge {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(126, 224, 160, 0.14);
  color: #9ff0bf;
  box-shadow: inset 0 0 0 1px rgba(126, 224, 160, 0.25);
}
.gp-cookie-prefs-badge svg { width: 25px; height: 25px; }
.gp-cookie-prefs-title {
  margin: 0 0 0.3rem;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #f3fbf6;
}
.gp-cookie-prefs-sub {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(234, 246, 238, 0.82);
}
.gp-cookie-cat-list {
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.gp-cookie-cat {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.9rem 1rem;
}
.gp-cookie-cat-info { min-width: 0; }
.gp-cookie-cat-title {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.22rem;
  color: #f3fbf6;
}
.gp-cookie-cat-desc {
  display: block;
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(234, 246, 238, 0.72);
}

/* On-brand toggle switch */
.gp-cookie-switch {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.gp-cookie-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.gp-cookie-slider {
  position: relative;
  width: 48px;
  height: 27px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.gp-cookie-slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #f3fbf6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform 0.18s ease;
}
.gp-cookie-switch input:checked + .gp-cookie-slider {
  background: #1f8a55;
  border-color: #2aa869;
}
.gp-cookie-switch input:checked + .gp-cookie-slider::after { transform: translateX(21px); }
.gp-cookie-switch input:focus-visible + .gp-cookie-slider {
  box-shadow: 0 0 0 3px rgba(46, 168, 105, 0.5);
}
.gp-cookie-switch.is-locked { cursor: not-allowed; }
.gp-cookie-switch.is-locked .gp-cookie-slider { opacity: 0.65; }
.gp-cookie-switch-state {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9ff0bf;
}
.gp-cookie-prefs-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Persistent footer entry point */
.gp-cookie-settings-link { cursor: pointer; }

@keyframes gpCookieFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gpCookiePop {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
  .gp-cookie-banner-actions { justify-content: stretch; }
  .gp-cookie-btn-choice { min-width: 0 !important; }
  .gp-cookie-prefs { padding: 1.2rem 1.05rem 1rem; }
  .gp-cookie-prefs-actions { flex-direction: column; }
  .gp-cookie-prefs-actions .gp-cookie-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .gp-cookie-banner,
  .gp-cookie-prefs-overlay,
  .gp-cookie-prefs { animation: none !important; transition: none !important; }
}

/* Keep closed modals fully hidden (directory tour preview, etc.) */
.modal[hidden],
#golfModal[hidden],
.hero-preview-modal[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Mobile (≤768 px) hamburger / close button + centered drawer links.

   Authoritative final word (this file loads last on every page). Earlier
   sheets (index-cinematic.css) force `opacity:1` on every bar, which stops
   the icon from morphing into a clean X and left the bars looking blank.
   These rules guarantee:
     • a clearly visible 3-bar hamburger when the drawer is closed,
     • a clean X close button when the drawer is open,
     • nav hyperlinks centered horizontally inside the drawer.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body.home-page .header-container .hamburger,
  body.gp-static-page .header-container .hamburger {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0.4rem !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    z-index: 2200 !important;
  }

  /* The three bars — always visible, solid white. */
  body.home-page .header-container .hamburger span,
  body.gp-static-page .header-container .hamburger span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    margin: 3px 0 !important;
    background: #ffffff !important;
    border-radius: 2px !important;
    opacity: 1 !important;
    transition: transform 0.25s ease, opacity 0.25s ease !important;
    transform: none !important;
  }

  /* Open state → morph the bars into a clean X (the close button). */
  body.home-page .header-container .hamburger[aria-expanded="true"],
  body.home-page .header-container .hamburger.active,
  body.gp-static-page .header-container .hamburger[aria-expanded="true"],
  body.gp-static-page .header-container .hamburger.active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  body.home-page .header-container .hamburger[aria-expanded="true"] span:nth-child(1),
  body.home-page .header-container .hamburger.active span:nth-child(1),
  body.gp-static-page .header-container .hamburger[aria-expanded="true"] span:nth-child(1),
  body.gp-static-page .header-container .hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
    opacity: 1 !important;
  }

  body.home-page .header-container .hamburger[aria-expanded="true"] span:nth-child(2),
  body.home-page .header-container .hamburger.active span:nth-child(2),
  body.gp-static-page .header-container .hamburger[aria-expanded="true"] span:nth-child(2),
  body.gp-static-page .header-container .hamburger.active span:nth-child(2) {
    opacity: 0 !important;
  }

  body.home-page .header-container .hamburger[aria-expanded="true"] span:nth-child(3),
  body.home-page .header-container .hamburger.active span:nth-child(3),
  body.gp-static-page .header-container .hamburger[aria-expanded="true"] span:nth-child(3),
  body.gp-static-page .header-container .hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
    opacity: 1 !important;
  }

  /* Center every hyperlink (and the language row) horizontally in the drawer. */
  body.home-page .header-container .nav-menu,
  body.gp-static-page .header-container .nav-menu {
    align-items: center !important;
    text-align: center !important;
  }

  body.home-page .header-container .nav-menu > li,
  body.gp-static-page .header-container .nav-menu > li {
    width: 100% !important;
    text-align: center !important;
  }

  body.home-page .header-container .nav-menu > li > a,
  body.gp-static-page .header-container .nav-menu > li > a {
    text-align: center !important;
  }

  body.home-page .header-container .nav-menu .gp-translate-mobile,
  body.gp-static-page .header-container .nav-menu .gp-translate-mobile {
    align-items: center !important;
    text-align: center !important;
  }

  /* Mobile nav drawer — no outer border/outline on the rollup panel */
  body.home-page .header-container .nav-menu,
  body.home-page .header-container .nav-menu.open,
  body.gp-static-page .header-container .nav-menu,
  body.gp-static-page .header-container .nav-menu.open,
  body.ds-page.home-page .header-container .nav-menu,
  body.ds-page.home-page .header-container .nav-menu.open,
  body.ds-page.gp-static-page .header-container .nav-menu,
  body.ds-page.gp-static-page .header-container .nav-menu.open {
    border: none !important;
    outline: none !important;
  }

  body.ds-page.home-page .header-container .nav-menu > li > a,
  body.ds-page.home-page .header-container .nav-menu > li > a:visited,
  body.ds-page.gp-static-page .header-container .nav-menu > li > a,
  body.ds-page.gp-static-page .header-container .nav-menu > li > a:visited,
  body.home-page .header-container .nav-menu > li > a,
  body.home-page .header-container .nav-menu > li > a:visited,
  body.gp-static-page .header-container .nav-menu > li > a,
  body.gp-static-page .header-container .nav-menu > li > a:visited {
    border: none !important;
    border-bottom: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Hamburger / close GLYPH (final, authoritative — this sheet loads last).

   The old markup used three <span> bars whose white `background` failed to
   render in the live build, leaving the open/close control visually BLANK.
   We now use real Font Awesome glyph elements (color-based, immune to any
   stray `background` override) inside the button:
     <i class="fas fa-bars  gp-ham-icon gp-ham-open">   (closed → 3 bars)
     <i class="fas fa-xmark gp-ham-icon gp-ham-close">  (open   → X)
   Inline styles on those <i> tags guarantee a visible white glyph even if
   this stylesheet is served stale from cache.  These rules only handle the
   open/close swap.
   ══════════════════════════════════════════════════════════════════════════ */
.header-container .hamburger .gp-ham-icon {
  color: #fff !important;
  line-height: 1 !important;
}
.header-container .hamburger .gp-ham-open {
  display: inline-block !important;
}
.header-container .hamburger .gp-ham-close {
  display: none !important;
}
.header-container .hamburger[aria-expanded="true"] .gp-ham-open,
.header-container .hamburger.active .gp-ham-open {
  display: none !important;
}
.header-container .hamburger[aria-expanded="true"] .gp-ham-close,
.header-container .hamburger.active .gp-ham-close {
  display: inline-block !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Feedback dialog — light card refinements (readable on the new background)
   ══════════════════════════════════════════════════════════════════════════ */
.gp-feedback-dialog .gp-feedback-title { color: #0f2419 !important; }
.gp-feedback-dialog .gp-feedback-subtitle { color: rgba(16, 36, 25, 0.72) !important; }
.gp-feedback-dialog .gp-feedback-badge {
  border-color: rgba(31, 106, 79, 0.28) !important;
  background: rgba(31, 106, 79, 0.1) !important;
  color: #1f6a4f !important;
  box-shadow: none !important;
}
.gp-feedback-dialog .gp-feedback-close {
  border-color: rgba(16, 36, 25, 0.16) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: #102018 !important;
}
.gp-feedback-dialog .gp-feedback-label { color: #163526 !important; }
.gp-feedback-dialog .gp-feedback-optional { color: rgba(16, 36, 25, 0.55) !important; }
.gp-feedback-dialog .gp-feedback-input,
.gp-feedback-dialog .gp-feedback-textarea {
  border-color: rgba(16, 36, 25, 0.14) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: #102018 !important;
}
.gp-feedback-dialog .gp-feedback-input-icon,
.gp-feedback-dialog .gp-feedback-textarea-icon { color: rgba(31, 106, 79, 0.65) !important; }
.gp-feedback-dialog .gp-feedback-counter { color: rgba(16, 36, 25, 0.5) !important; }
.gp-feedback-dialog .gp-feedback-star { color: rgba(16, 36, 25, 0.28) !important; }
.gp-feedback-dialog .gp-feedback-star.is-active,
.gp-feedback-dialog .gp-feedback-star:hover { color: #c9972e !important; }

/* Placeholders — the old dark-theme near-white was invisible on white fields. */
.gp-feedback-dialog .gp-feedback-input::placeholder,
.gp-feedback-dialog .gp-feedback-textarea::placeholder {
  color: rgba(16, 36, 25, 0.45) !important;
  -webkit-text-fill-color: rgba(16, 36, 25, 0.45) !important;
  opacity: 1 !important;
}

/* Focus — keep the field light (the base rule flipped it to a dark green). */
.gp-feedback-dialog .gp-feedback-input:focus,
.gp-feedback-dialog .gp-feedback-textarea:focus {
  background: #ffffff !important;
  color: #102018 !important;
  border-color: rgba(31, 106, 79, 0.6) !important;
  box-shadow:
    0 0 0 4px rgba(31, 106, 79, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Star rating readout ("Tap a star…" / "Thanks — you rated…"). */
.gp-feedback-dialog .gp-rating-readout { color: rgba(16, 36, 25, 0.6) !important; }
.gp-feedback-dialog .gp-rating-readout.is-selected { color: #a16207 !important; }

/* Unselected star outline — darker gold so it reads on the light card. */
.gp-feedback-dialog .gp-star-rating .gp-star-button svg { stroke: #c9972e; }
.gp-feedback-dialog .gp-star-rating .gp-star-button.is-filled svg {
  fill: #e3b341;
  stroke: #b8860b;
}

/* "Required" gold pill + asterisk — darker gold on the light card. */
.gp-feedback-dialog .gp-feedback-required { color: #a16207 !important; }
.gp-feedback-dialog .gp-feedback-required-tag {
  color: #a16207 !important;
  border-color: rgba(161, 98, 7, 0.4) !important;
  background: rgba(245, 201, 95, 0.16) !important;
}

/* Success banner ("Thank you for your feedback") — brand green, readable. */
.gp-feedback-dialog .gp-feedback-status {
  background: rgba(31, 106, 79, 0.1) !important;
  border-color: rgba(31, 106, 79, 0.32) !important;
  color: #14532d !important;
  font-weight: 600 !important;
}

/* Error banner — dark red on light card. */
.gp-feedback-dialog .gp-feedback-error {
  background: rgba(220, 38, 38, 0.07) !important;
  border-color: rgba(220, 38, 38, 0.35) !important;
  color: #b91c1c !important;
}

.gp-feedback-dialog .gp-feedback-field-hint { color: rgba(16, 36, 25, 0.55) !important; }

/* Footer privacy note. */
.gp-feedback-dialog .gp-feedback-footnote { color: rgba(16, 36, 25, 0.55) !important; }
.gp-feedback-dialog .gp-feedback-footnote svg { color: rgba(31, 106, 79, 0.65) !important; }

/* Cancel — light neutral pill with dark text (was a dark translucent chip). */
.gp-feedback-dialog .gp-feedback-cancel {
  background: rgba(255, 255, 255, 0.85) !important;
  background-image: none !important;
  border-color: rgba(16, 36, 25, 0.22) !important;
  color: #163526 !important;
}

.gp-feedback-dialog .gp-feedback-cancel:hover,
.gp-feedback-dialog .gp-feedback-cancel:focus-visible {
  background: #ffffff !important;
  border-color: rgba(31, 106, 79, 0.45) !important;
  color: #102018 !important;
}

/* Send / Close — solid brand green like every other Golfapedia button,
   instead of the harsh lime gradient. */
.gp-feedback-dialog .gp-feedback-submit {
  background: #1f6a4f !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(31, 106, 79, 0.3) !important;
}

.gp-feedback-dialog .gp-feedback-submit:hover:not(:disabled),
.gp-feedback-dialog .gp-feedback-submit:focus-visible:not(:disabled) {
  background: #174d3a !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(31, 106, 79, 0.38) !important;
}

.gp-feedback-dialog .gp-feedback-submit:focus-visible {
  outline: 2px solid #1f6a4f;
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Share modal + trigger buttons
   ══════════════════════════════════════════════════════════════════════════ */
.gp-share-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 10, 8, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100001;
}
.gp-share-overlay.is-open { display: flex; animation: gpFeedbackOverlayIn 0.18s ease; }
.gp-share-overlay[hidden] { display: none !important; }

.gp-share-dialog,
.gp-share-dialog * {
  box-sizing: border-box;
}

.gp-share-dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  position: relative;
  padding: 26px 26px 22px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(212, 175, 55, 0.08), transparent 50%),
    linear-gradient(165deg, #f8faf9 0%, #eef3f0 100%);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
  color: #102018;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  animation: gpFeedbackDialogIn 0.22s cubic-bezier(0.21, 1, 0.4, 1);
}

.gp-share-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(16, 36, 25, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: #102018;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.gp-share-close:hover,
.gp-share-close:focus-visible {
  background: #ffffff;
  border-color: rgba(31, 106, 79, 0.4);
  color: #0f2419;
  outline: none;
}
.gp-share-close svg { width: 16px; height: 16px; display: block; }

.gp-share-header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-right: 40px;
}
.gp-share-badge {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(31, 106, 79, 0.1);
  border: 1px solid rgba(31, 106, 79, 0.2);
  color: #1f6a4f;
}
.gp-share-badge svg { width: 20px; height: 20px; display: block; }
.gp-share-title { margin: 0; font-size: 1.35rem; font-weight: 800; color: #0f2419; line-height: 1.15; letter-spacing: -0.02em; }
.gp-share-subtitle { margin: 4px 0 0; color: rgba(16, 36, 25, 0.65); font-size: 0.9rem; line-height: 1.4; }

.gp-share-message-wrap { margin-bottom: 16px; }
.gp-share-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: rgba(16, 36, 25, 0.72);
}
.gp-share-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.gp-share-label-row .gp-share-label { margin-bottom: 0; }
.gp-share-copy-message {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid rgba(31, 106, 79, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1f6a4f;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.gp-share-copy-message:hover,
.gp-share-copy-message:focus-visible {
  background: #ffffff;
  border-color: rgba(31, 106, 79, 0.5);
  color: #14532d;
  outline: none;
}
.gp-share-message {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(16, 36, 25, 0.14);
  background: #ffffff;
  color: #102018;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.45;
  padding: 11px 12px;
  resize: vertical;
  min-height: 80px;
}
.gp-share-message:focus {
  outline: none;
  border-color: rgba(31, 106, 79, 0.55);
  box-shadow: 0 0 0 3px rgba(31, 106, 79, 0.1);
}

/* Shareable hyperlink row: readonly URL field + Copy Link button. */
.gp-share-link-wrap { margin-bottom: 18px; }
.gp-share-link-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.gp-share-link {
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 10px;
  border: 1px solid rgba(16, 36, 25, 0.14);
  background: #ffffff;
  color: #1f6a4f;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 10px 12px;
  text-overflow: ellipsis;
}
.gp-share-link:focus {
  outline: none;
  border-color: rgba(31, 106, 79, 0.55);
  box-shadow: 0 0 0 3px rgba(31, 106, 79, 0.1);
}
.gp-share-copy-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  border: none;
  border-radius: 10px;
  background: #1f6a4f;
  color: #ffffff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 10px 14px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(31, 106, 79, 0.24);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.gp-share-copy-link:hover,
.gp-share-copy-link:focus-visible {
  background: #174d3a;
  box-shadow: 0 6px 16px rgba(31, 106, 79, 0.32);
  outline: none;
}
.gp-share-copy-link svg { width: 14px; height: 14px; flex: 0 0 auto; }

.gp-share-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.gp-share-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 72px;
  min-width: 0;
  margin: 0;
  padding: 10px 6px;
  border-radius: 10px;
  border: 1px solid rgba(16, 36, 25, 0.1);
  background: #ffffff;
  color: #163526;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.gp-share-action:hover,
.gp-share-action:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(31, 106, 79, 0.28);
  background: #f9fcfa;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  outline: none;
  color: #102018;
}
.gp-share-action:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.gp-share-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  line-height: 1;
  flex: 0 0 auto;
}
.gp-share-action-icon svg { width: 16px; height: 16px; display: block; }
.gp-share-action--facebook .gp-share-action-icon {
  background: #1877f2;
  color: #ffffff;
}
.gp-share-action--x .gp-share-action-icon {
  background: #0f1419;
  color: #ffffff;
}
.gp-share-action--linkedin .gp-share-action-icon {
  background: #0a66c2;
  color: #ffffff;
}
.gp-share-action--email .gp-share-action-icon {
  background: #1f6a4f;
  color: #ffffff;
}
.gp-share-action-text {
  line-height: 1.1;
  text-align: center;
}
.gp-share-status {
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.84rem;
  font-weight: 600;
  color: #1f6a4f;
}

/* Isolate share modal from the index-page nuclear `button { background:#1e40af }`
   rule in style.css — every control keeps the Golfapedia green/neutral theme. */
.gp-share-dialog button,
.gp-share-dialog button:hover,
.gp-share-dialog button:focus,
.gp-share-dialog button:active {
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  background-image: none !important;
  outline: none;
}
.gp-share-close,
.gp-share-close:hover,
.gp-share-close:focus,
.gp-share-close:active {
  display: inline-flex !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(16, 36, 25, 0.14) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #102018 !important;
  box-shadow: none !important;
}
.gp-share-close:hover,
.gp-share-close:focus-visible {
  background: #ffffff !important;
  border-color: rgba(31, 106, 79, 0.4) !important;
  color: #0f2419 !important;
}
.gp-share-copy-message,
.gp-share-copy-message:hover,
.gp-share-copy-message:focus,
.gp-share-copy-message:active {
  display: inline-flex !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 5px 10px !important;
  border: 1px solid rgba(31, 106, 79, 0.28) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: #1f6a4f !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.gp-share-copy-message:hover,
.gp-share-copy-message:focus-visible {
  background: #ffffff !important;
  border-color: rgba(31, 106, 79, 0.5) !important;
  color: #14532d !important;
}
.gp-share-copy-link,
.gp-share-copy-link:hover,
.gp-share-copy-link:focus,
.gp-share-copy-link:active {
  display: inline-flex !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border: none !important;
  border-radius: 10px !important;
  background: #1f6a4f !important;
  color: #ffffff !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(31, 106, 79, 0.24) !important;
}
.gp-share-copy-link:hover,
.gp-share-copy-link:focus-visible {
  background: #174d3a !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(31, 106, 79, 0.32) !important;
}
.gp-share-action.gp-share-action--email,
.gp-share-action.gp-share-action--email:hover,
.gp-share-action.gp-share-action--email:focus,
.gp-share-action.gp-share-action--email:active {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 72px !important;
  margin: 0 !important;
  padding: 10px 6px !important;
  border: 1px solid rgba(16, 36, 25, 0.1) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #163526 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
.gp-share-action.gp-share-action--email:hover,
.gp-share-action.gp-share-action--email:focus-visible {
  background: #f9fcfa !important;
  border-color: rgba(31, 106, 79, 0.28) !important;
  color: #102018 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}
.gp-share-action.gp-share-action--facebook,
.gp-share-action.gp-share-action--x,
.gp-share-action.gp-share-action--linkedin {
  background: #ffffff !important;
  color: #163526 !important;
  border: 1px solid rgba(16, 36, 25, 0.1) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* ── Nav-bar "Share" trigger (static pages — right of Contact) ──
   A subtle gold-trimmed pill so it reads as an action, not another page link,
   while staying inside the dark-green header theme. */
.nav-menu .gp-nav-share { display: flex; align-items: center; }
.gp-nav-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  border: 1px solid rgba(242, 193, 78, 0.55);
  border-radius: 999px;
  background: rgba(242, 193, 78, 0.1);
  color: #f2c14e;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.45rem 0.95rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.gp-nav-share-btn:hover,
.gp-nav-share-btn:focus-visible {
  background: rgba(242, 193, 78, 0.22);
  border-color: rgba(242, 193, 78, 0.85);
  color: #ffd970;
  outline: none;
}
.gp-nav-share-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Inside the mobile hamburger drawer the nav items stack full-width. */
@media (max-width: 768px) {
  .nav-menu .gp-nav-share {
    width: 100%;
    padding: 0.45rem 0.7rem;
    box-sizing: border-box;
  }
  .gp-nav-share-btn { width: auto; }
}

@media (max-width: 640px) {
  .gp-share-dialog { padding: 22px 18px 18px; border-radius: 16px; }
  .gp-share-header { margin-bottom: 16px; padding-right: 36px; }
  .gp-share-title { font-size: 1.2rem; }
  .gp-share-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gp-share-action { min-height: 68px; }
  .gp-share-link-row { flex-wrap: wrap; }
  .gp-share-copy-link { flex: 1 1 100%; justify-content: center; }
}

/* ── Google Translate widget — 25% smaller (desktop header), vertically
   centered with the nav hyperlinks. Loaded after style.css so these win. ── */
.gp-translate-widget {
  align-self: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.gp-translate-widget .goog-te-combo {
  min-height: 24px !important;
  font-size: 0.64rem !important;
  padding: 2px 6px !important;
}
.gp-translate-widget .goog-te-gadget-simple {
  padding: 3px 6px !important;
  font-size: 0.6rem !important;
}
.gp-translate-widget .goog-te-gadget-simple span,
.gp-translate-widget .goog-te-gadget-simple .goog-te-menu-value span {
  font-size: 0.6rem !important;
}