/* ============ TGS Open Account popup ============ */
/* Shared partial dropped into host pages that carry their own global control
   styles. The login front door (index.html) is an Elementor page whose
   `.elementor-kit-16 button` rule (specificity 0,1,1) and reset.css `button`/
   `input` rules would otherwise repaint this popup's buttons with the site
   accent and collapse the close icon. To render IDENTICALLY everywhere, the
   interactive controls below are scoped under `.tgs-overlay` (0,2,x) so the
   partial's own values win over host globals. Values are unchanged from the
   scorecard-results original — only the selectors are hardened. */

/* Popup triggers are <a> elements without an href (they open the modal via JS),
   so browsers give them the text cursor. Restore the hand cursor a clickable
   control should have. */
[data-tgs-open]{ cursor:pointer; }

/* Keyboard focus ring (ported from scorecard-results). The triggers are
   role="button" tabindex="0", so keyboard and screen-reader users can reach
   them; :focus-visible shows the ring for keyboard/AT focus only (not on mouse
   click), so the resting appearance is unchanged. Light-gold ring + navy halo
   so it stays visible on the navy account band, the cream boxes and the gold
   buttons alike. Also applied to the modal's own close/submit buttons. */
[data-tgs-open]:focus-visible,
.tgs-overlay .tgs-close:focus-visible,
.tgs-overlay .tgs-submit:focus-visible{
  outline:3px solid #fed48a;
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(24,57,101,.55);
}

/* Scroll container (ported from scorecard-results). NB: no `align-items:center`
   — centering the modal that way pushes its top (and the close button) above
   the scroll area on short viewports, making it unreachable. Instead the modal
   centres with margin:auto, which keeps its top reachable and lets the overlay
   scroll when the modal is taller than the viewport (e.g. landscape phones). */
.tgs-overlay{
  position:fixed; inset:0; z-index:9999;
  background:rgba(10,14,20,.72);
  display:flex; justify-content:center;
  padding:24px; overflow-y:auto;
  opacity:0; transition:opacity .18s ease;
  font-family:"League Spartan", sans-serif;
}
.tgs-overlay.is-open{opacity:1;}
.tgs-overlay[hidden]{display:none;}

.tgs-modal{
  position:relative;
  width:400px; max-width:100%;
  margin:auto;                 /* centres when it fits; top stays reachable + overlay scrolls when it doesn't */
  background:#fff;
  border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  padding:36px 38px 30px;
  box-sizing:border-box;
  text-align:center;
  transform:translateY(8px);
  transition:transform .18s ease;
}
.tgs-overlay.is-open .tgs-modal{transform:none;}

.tgs-overlay .tgs-close{
  appearance:none; -webkit-appearance:none;
  position:absolute; top:16px; right:18px;
  width:26px; height:26px; min-width:0;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; border-radius:0; padding:0; margin:0; cursor:pointer;
  color:#1B3A66;
}
.tgs-overlay .tgs-close svg{width:17px; height:17px; stroke:currentColor; stroke-width:2.2; fill:none;}
.tgs-overlay .tgs-close:hover{opacity:.65;}

.tgs-icon{width:52px; height:auto; margin:0 auto 16px; display:block;}

/* Title/intro scoped under .tgs-overlay: the front door's Elementor kit types
   headings via `.elementor-kit-16 h2` (0,1,1), which beats a bare class —
   unscoped, the title painted 50px there. Explicit font-family for the same
   reason (a declared kit h2 family beats our inherited one). */
.tgs-overlay .tgs-title{
  margin:0 0 12px;
  font-family:"League Spartan", sans-serif;
  font-size:27px; font-weight:700;
  letter-spacing:-.01em; line-height:1.15;
  color:#1B3A66;
}
.tgs-overlay .tgs-intro{
  margin:0 auto 26px; max-width:330px;
  font-size:15px; font-weight:300; line-height:1.55;
  color:#6E7076;
}

/* Fields at (0,4,0): the kit's `.elementor-kit-16 input:not([type="button"])
   :not([type="submit"])` is (0,3,1) — the :not() arguments count — and was
   repainting the inputs cream on the front door. The full DOM path outranks it
   everywhere without !important. The media-query field/select selectors below
   MUST keep this same form or this base rule would beat them. */
.tgs-overlay .tgs-modal .tgs-form .tgs-field{
  appearance:none; -webkit-appearance:none;
  display:block; width:100%; box-sizing:border-box;
  margin-bottom:12px;
  font-family:"League Spartan", sans-serif;
  font-size:15px; font-weight:300;
  color:#2C2F34; background:#fff;
  border:1px solid #E4E6E9; border-radius:8px;
  padding:15px 18px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.tgs-overlay .tgs-modal .tgs-form .tgs-field::placeholder{color:#A8ABB0; font-weight:300;}
.tgs-overlay .tgs-modal .tgs-form .tgs-field:focus{
  outline:none; border-color:#B08D5B;
  box-shadow:0 0 0 3px rgba(176,141,91,.12);
}

/* Country dropdown — styled to match .tgs-field. appearance:none removes the
   native control chrome (the native picker still opens on tap on mobile); the
   chevron is drawn with a background SVG. It reads grey like a placeholder
   until a real country is chosen. Inherits .tgs-field's border/radius/padding/
   font/focus (gold border) and the 16px mobile size (no iOS zoom-on-focus). */
.tgs-overlay .tgs-modal .tgs-form .tgs-select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  cursor:pointer; color:#A8ABB0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E7076' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:14px;
}
/* element+class beats .tgs-field's padding shorthand (base and mobile) so the
   chevron always has room */
.tgs-overlay .tgs-modal .tgs-form select.tgs-select{ padding-right:44px; }
.tgs-overlay .tgs-modal .tgs-form .tgs-select option{ color:#2C2F34; }             /* dark list items */
.tgs-overlay .tgs-modal .tgs-form .tgs-select:has(option:not([value=""]):checked){ color:#2C2F34; }  /* dark once a country is picked */

.tgs-sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.tgs-overlay .tgs-submit{
  appearance:none; -webkit-appearance:none;
  width:100%;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  margin-top:10px;
  font-family:"League Spartan", sans-serif;
  font-size:17px; font-weight:600;
  color:#fff; background:#B08D5B;
  border:0; border-radius:8px;
  padding:16px 20px; cursor:pointer;
  transition:background .15s ease;
}
.tgs-overlay .tgs-submit:hover{background:#9A7A4C;}
.tgs-overlay .tgs-submit:disabled{opacity:.6; cursor:not-allowed;}
.tgs-overlay .tgs-submit svg{width:16px; height:16px; fill:none; stroke:#fff; stroke-width:2.2;}

.tgs-footnote{
  margin:16px auto 0; max-width:300px;
  font-size:12.5px; font-weight:300; line-height:1.5;
  color:#6E7076;
}
.tgs-footnote svg{
  width:11px; height:11px;
  vertical-align:-1px; margin-right:3px;
  fill:#6E7076;
}
.tgs-footnote a{color:#6E7076; text-decoration:none; font-weight:400;}
.tgs-footnote a:hover{text-decoration:underline;}

.tgs-success{display:none; padding:14px 0 6px;}
.tgs-modal.is-success .tgs-form,
.tgs-modal.is-success .tgs-intro,
.tgs-modal.is-success .tgs-footnote{display:none;}
.tgs-modal.is-success .tgs-success{display:block;}

@media(max-width:479px){
  .tgs-overlay{padding:16px;}
  .tgs-modal{padding:30px 24px 24px; border-radius:12px;}
  .tgs-icon{width:46px;}
  .tgs-overlay .tgs-title{font-size:23px;}
  .tgs-overlay .tgs-intro{font-size:14px; margin-bottom:22px;}
  .tgs-overlay .tgs-modal .tgs-form .tgs-field{font-size:16px; padding:14px 16px;}
  .tgs-overlay .tgs-submit{font-size:16px; padding:15px;}
}

/* Short viewports, e.g. landscape phones (ported from scorecard-results):
   tighten the vertical rhythm so the modal is shorter, and rely on the
   overlay's scroll + modal margin:auto so the whole modal — close (X) at the
   top, submit at the bottom — is always reachable. */
@media(max-height:520px){
  .tgs-overlay{padding:12px;}
  .tgs-modal{padding:22px 30px 20px;}
  .tgs-icon{width:40px; margin-bottom:10px;}
  .tgs-overlay .tgs-title{font-size:22px; margin-bottom:8px;}
  .tgs-overlay .tgs-intro{margin-bottom:14px;}
  .tgs-overlay .tgs-modal .tgs-form .tgs-field{margin-bottom:9px; font-size:16px;}  /* >=16px keeps iOS from auto-zooming the field on focus in landscape */
  .tgs-overlay .tgs-submit{margin-top:6px;}
  .tgs-footnote{margin-top:10px;}
}