/* ──────────────────────────────────────────────────────────────────────────
 *  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;
    height: 36px !important;
    min-height: 36px !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;
  padding: 0.42rem 0.88rem !important;
  font-size: 0.78rem !important;
}

body.home-page .hero-social-row-wrap .gp-feedback-trigger.gp-feedback-home svg {
  width: 14px !important;
  height: 14px !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.34rem 0.72rem !important;
    font-size: 0.72rem !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; }

@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 var(--gpf-border-green);
  background:
    radial-gradient(circle at top left, rgba(55, 190, 105, 0.18), transparent 38%),
    linear-gradient(145deg, rgba(3, 38, 24, 0.96), rgba(1, 21, 14, 0.98));
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.55),
    0 0 38px rgba(36, 188, 94, 0.18);
  color: var(--gpf-text);
  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(94, 225, 132, 0.4) 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" + static hero button get the full course-button
   size (padding / min-height / font-size). The compact home social-row button
   keeps its smaller footprint so the hero social row still fits on phones, but
   shares the same solid-green look. */
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.
   ===================================================================== */
.gp-cookie-banner {
  position: fixed;
  left: 50%;
  bottom: max(0.9rem, env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 140%);
  width: min(960px, calc(100vw - 1.6rem));
  z-index: 2147483000; /* above site chrome; below nothing else we own */
  background: rgba(10, 26, 20, 0.97);
  color: #eaf6ee;
  border: 1px solid rgba(76, 174, 103, 0.45);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  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%, 0);
  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 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.gp-cookie-banner-title {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.2px;
}
.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 - 1rem);
    max-height: min(42vh, 320px);
    bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
  }
  .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-title { font-size: 0.92rem; }
  .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;
  }
}