/* ═══════════════════════════════════════════════════════════════════════════
   TNC Geo Restriction — v1.2.0
   Button colour system (v1.2.0):
     --geo-btn-dismiss   #fcb040  amber  — modal dismiss button (Button 1)
     --geo-btn-redirect  #060928  navy   — modal + banner redirect button (Button 2)
     --geo-btn-close-bg  #c0392b  red    — banner × close button
   All buttons: border-radius 5px
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── CSS Custom Properties ──────────────────────────────────────────────────
   --geo-font       overridden by JS (computed body font-family)
   --geo-primary    overridden by JS (site's CSS primary variable) — fallback only
   --geo-danger     red — modal card background, banner background
   --geo-btn-*      specific button colours (v1.2.0)
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --geo-font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --geo-primary:      #2c3e50;
  --geo-danger:       #c0392b;
  --geo-radius:       8px;         /* Card corner radius */
  --geo-btn-radius:   5px;         /* Button corner radius (v1.2.0 spec) */
  --geo-speed:        0.25s;
  --geo-shadow:       0 4px 24px rgba(0, 0, 0, 0.28), 0 1px 6px rgba(0, 0, 0, 0.14);

  /* v1.2.0 button palette */
  --geo-btn-dismiss:       #fcb040;   /* Amber — dismiss/continue button */
  --geo-btn-dismiss-text:  #060928;   /* Navy text on amber bg for max contrast */
  --geo-btn-redirect:      #060928;   /* Navy — redirect-to-.com button */
  --geo-btn-redirect-text: #ffffff;   /* White text on navy */
  --geo-btn-close-bg:      #c0392b;   /* Red — banner × close button */
  --geo-btn-close-text:    #ffffff;   /* White × on red */
}


/* ══════════════════════════════════════════════════════════════════════════
   MODAL OVERLAY
   ══════════════════════════════════════════════════════════════════════════ */

#geo-restriction-overlay {
  position:         fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index:          999999;
  background-color: rgba(0, 0, 0, 0.62);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  padding:          16px;
  box-sizing:       border-box;
  font-family:      var(--geo-font);

  opacity:        0;
  pointer-events: none;
  transition:     opacity var(--geo-speed) ease;
}

#geo-restriction-overlay.geo-restriction-overlay--visible {
  opacity:        1;
  pointer-events: auto;
}


/* ── Modal Card ─────────────────────────────────────────────────────────────
   ─────────────────────────────────────────────────────────────────────────── */
.geo-restriction-card {
  background:    #ffffff;
  border-radius: var(--geo-radius);
  box-shadow:    var(--geo-shadow);
  padding:       32px;
  max-width:     520px;
  width:         100%;
  box-sizing:    border-box;

  transform:   translateY(20px);
  transition:  transform var(--geo-speed) ease;
}

#geo-restriction-overlay.geo-restriction-overlay--visible .geo-restriction-card {
  transform: translateY(0);
}

/* Red card variant */
.geo-restriction-card--danger {
  background-color: var(--geo-danger);
  color:            #ffffff;
}


/* ── Modal Heading ───────────────────────────────────────────────────────────
   ─────────────────────────────────────────────────────────────────────────── */
.geo-modal-heading {
  font-family:    var(--geo-font);
  font-size:      1.25rem;
  font-weight:    700;
  line-height:    1.3;
  color:          #ffffff;
  margin:         0 0 12px 0;
  padding:        0;
  text-transform: none;
  letter-spacing: normal;
  border:         none;
  background:     none;
}

.geo-restriction-card:not(.geo-restriction-card--danger) .geo-modal-heading {
  color: var(--geo-primary);
}


/* ── Modal Body Text ─────────────────────────────────────────────────────────
   ─────────────────────────────────────────────────────────────────────────── */
.geo-modal-body {
  font-family: var(--geo-font);
  font-size:   0.9375rem;
  line-height: 1.65;
  color:       rgba(255, 255, 255, 0.90);
  margin:      0 0 24px 0;
  padding:     0;
}

.geo-restriction-card:not(.geo-restriction-card--danger) .geo-modal-body {
  color: #555555;
}


/* ── Modal Action Row ────────────────────────────────────────────────────────
   ─────────────────────────────────────────────────────────────────────────── */
.geo-modal-actions {
  display:   flex;
  gap:       12px;
  flex-wrap: wrap;
}


/* ══════════════════════════════════════════════════════════════════════════
   BUTTON BASE — shared geometry for all geo buttons
   border-radius: 5px per v1.2.0 spec
   ══════════════════════════════════════════════════════════════════════════ */

.geo-modal-close-btn,
.geo-modal-redirect-btn,
.geo-banner-redirect-btn,
.geo-banner-close {
  border-radius: var(--geo-btn-radius); /* 5px */
  font-family:   var(--geo-font);
  cursor:        pointer;
  border:        none;
  text-decoration: none;
  display:       inline-flex;
  box-sizing:    border-box;
  transition:    filter var(--geo-speed) ease,
                 opacity var(--geo-speed) ease;
}

.geo-modal-close-btn:hover,
.geo-modal-redirect-btn:hover,
.geo-banner-redirect-btn:hover {
  filter: brightness(1.10);
  text-decoration: none;
}

.geo-modal-close-btn:active,
.geo-modal-redirect-btn:active,
.geo-banner-redirect-btn:active {
  filter: brightness(0.92);
}

/* Focus rings */
.geo-modal-close-btn:focus-visible,
.geo-modal-redirect-btn:focus-visible,
.geo-banner-redirect-btn:focus-visible {
  outline:        3px solid rgba(255, 255, 255, 0.80);
  outline-offset: 3px;
}

.geo-modal-close-btn:focus:not(:focus-visible),
.geo-modal-redirect-btn:focus:not(:focus-visible),
.geo-banner-redirect-btn:focus:not(:focus-visible),
.geo-banner-close:focus:not(:focus-visible) {
  outline: none;
}


/* ══════════════════════════════════════════════════════════════════════════
   BUTTON 1 — MODAL DISMISS (amber #fcb040, navy text)
   "I understand — continue browsing"
   ══════════════════════════════════════════════════════════════════════════ */

.geo-modal-close-btn {
  /* Colour identity */
  background-color: var(--geo-btn-dismiss);   /* #fcb040 amber */
  color:            var(--geo-btn-dismiss-text); /* #060928 navy */

  /* Geometry */
  align-items:   center;
  justify-content: center;
  min-height:    44px;
  padding:       0 22px;
  flex:          1 1 auto;

  /* Typography */
  font-size:     0.9rem;
  font-weight:   700;
  line-height:   1.2;
  white-space:   normal;
  text-align:    center;
}


/* ══════════════════════════════════════════════════════════════════════════
   BUTTON 2 — MODAL REDIRECT (navy #060928) — TWO-LINE LAYOUT
   Line 1 (main):  "My pickup is outside US / CA / MX"
   Line 2 (sub):   "Continue on tracenchase.com →"
   ══════════════════════════════════════════════════════════════════════════ */

.geo-modal-redirect-btn {
  /* Colour identity */
  background-color: var(--geo-btn-redirect);        /* #060928 navy */
  color:            var(--geo-btn-redirect-text);   /* #ffffff white */

  /* Geometry — flex column to stack the two text lines */
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  min-height:     52px;        /* Taller than button 1 to accommodate two lines */
  padding:        10px 20px;
  flex:           1 1 auto;

  /* Typography */
  text-align:    center;
  white-space:   normal;
}


/* ── Two-line text spans ─────────────────────────────────────────────────────
   Shared by modal and banner redirect buttons.
   ─────────────────────────────────────────────────────────────────────────── */

.geo-btn-line {
  display:     block;
  line-height: 1.25;
}

.geo-btn-line--main {
  font-size:   0.875rem;   /* 14px */
  font-weight: 700;
  letter-spacing: 0.01em;
}

.geo-btn-line--sub {
  font-size:   0.75rem;    /* 12px */
  font-weight: 400;
  opacity:     0.80;
  margin-top:  3px;
}

/* Sub line on the amber dismiss button (if ever used there) */
.geo-modal-close-btn .geo-btn-line--sub {
  opacity: 0.72;
}


/* ══════════════════════════════════════════════════════════════════════════
   BANNER
   ══════════════════════════════════════════════════════════════════════════ */

#geo-restriction-banner {
  position:     fixed;
  bottom: 0; left: 0; right: 0;
  z-index:      99998;
  background-color: var(--geo-danger);
  color:        #ffffff;
  font-family:  var(--geo-font);
  font-size:    0.875rem;
  line-height:  1.5;
  padding:      10px 16px;
  box-sizing:   border-box;

  transform:  translateY(100%);
  transition: transform var(--geo-speed) ease;
}

#geo-restriction-banner.geo-restriction-banner--visible {
  transform: translateY(0);
}

/* Centred flex row */
.geo-banner-inner {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  flex-wrap:       wrap;
  text-align:      center;
}

.geo-banner-text {
  flex:       0 1 auto;
  text-align: center;
}


/* ── Banner Redirect Button — mirrors modal Button 2 (navy #060928) ──────────
   Same two-line layout, slightly more compact for the banner.
   ─────────────────────────────────────────────────────────────────────────── */
.geo-banner-redirect-btn {
  background-color: var(--geo-btn-redirect);       /* #060928 */
  color:            var(--geo-btn-redirect-text);  /* #ffffff */

  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-height:      44px;
  padding:         7px 16px;
  flex-shrink:     0;

  text-align:  center;
  white-space: normal;
}


/* ── Banner Close Button — v1.2.4: amber #fcb040, "Close ×" text, border-radius 5px ──
   Changed from: small red square with × only
   Changed to:   amber pill button "Close ×" matching the modal dismiss button colour
   ─────────────────────────────────────────────────────────────────────────── */
.geo-banner-close {
  /* v1.2.4 colour — amber to match modal dismiss button */
  background-color: var(--geo-btn-dismiss);       /* #fcb040 amber */
  color:            var(--geo-btn-dismiss-text);  /* #060928 navy — high contrast on amber */

  /* Geometry — auto-width pill to accommodate the "Close ×" text */
  position:    static;
  transform:   none;
  width:       auto;
  height:      auto;
  min-height:  36px;
  flex-shrink: 0;

  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             5px;

  /* Typography */
  font-family:  var(--geo-font);
  font-size:    0.8125rem;   /* 13px — compact for the banner */
  font-weight:  700;
  line-height:  1;
  white-space:  nowrap;

  padding:      0 12px;

  transition:   filter var(--geo-speed) ease;
}

/* "Close" text label */
.geo-banner-close-label {
  display: inline;
}

/* × icon — slightly larger than the label for visual balance */
.geo-banner-close-icon {
  display:   inline;
  font-size: 1.1em;
  line-height: 1;
}

.geo-banner-close:hover {
  filter: brightness(1.08);
}

.geo-banner-close:focus-visible {
  outline:        3px solid rgba(255, 255, 255, 0.80);
  outline-offset: 2px;
}


/* ══════════════════════════════════════════════════════════════════════════
   CHECKOUT WARNING
   ══════════════════════════════════════════════════════════════════════════ */

.geo-checkout-warning {
  margin-bottom:    1.5em;
  padding:          1em 1.25em;
  background-color: #fff3f3;
  border-left:      4px solid var(--geo-danger);
  border-radius:    0 var(--geo-radius) var(--geo-radius) 0;
  font-family:      var(--geo-font);
  font-size:        0.9375rem;
  line-height:      1.6;
  color:            #444444;
}

.geo-checkout-warning p {
  margin: 0 0 0.75em 0;
  padding: 0;
}

.geo-checkout-warning p:last-of-type {
  margin-bottom: 0;
}

/* The redirect .button in checkout warning — styled by WooCommerce/WoodMart */
.geo-checkout-warning .button {
  margin-top: 0.75em;
}


/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  .geo-restriction-card {
    padding:   24px 20px;
    max-width: calc(100vw - 32px);
  }

  .geo-modal-heading { font-size: 1.0625rem; }
  .geo-modal-body    { font-size: 0.875rem; }

  /* Stack modal buttons full-width */
  .geo-modal-actions {
    flex-direction: column;
  }

  .geo-modal-close-btn,
  .geo-modal-redirect-btn {
    width:           100%;
    flex:            none;
    justify-content: center;
  }

  /* Stack banner inner on small screens */
  .geo-banner-inner {
    flex-direction: column;
    gap:            8px;
  }

  .geo-banner-redirect-btn {
    width: auto;
  }

  #geo-restriction-banner {
    font-size: 0.8125rem;
    padding:   10px 12px;
  }
}

@media (max-width: 400px) {
  .geo-restriction-card  { padding: 20px 16px; }
  .geo-modal-heading     { font-size: 1rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   CHECKOUT WARNING WRAPPER (v1.2.3)
   The wrapper div lives OUTSIDE #payment — before the order review column.
   It's always in the DOM (empty when not restricted) for reliable fragment targeting.
   ══════════════════════════════════════════════════════════════════════════ */

.geo-checkout-warning-wrapper {
  /* No visible styling on the outer wrapper — it's just the AJAX target. */
  /* Remove margin/padding that would create space when the wrapper is empty. */
}

.geo-checkout-warning-wrapper:empty {
  display: none; /* Collapse when no warning is present */
}

.geo-checkout-warning-wrapper .geo-checkout-warning {
  margin-bottom: 1.25em;
}