/* ============ TGS Contact Us popup ============
   GENERATED by scripts/build-contact-popup.mjs. DO NOT EDIT: change the website, then rebuild.
   Master: TGS-Game/thegoldstandard-main @ 4088a5cab6f65c6067f5d9e2db794e35ddd74e96 (public/css/site.css).
   Every rule is the website's own, prefixed with #tgs-ocp (the wrapper the
   popup is injected into) so nothing else on the host page changes.
   ================================================ */

/* ---- ISOLATION (C2): the popup starts from the browser's defaults, exactly as
   on the website, whatever the host page styles. The wrapper draws nothing itself.
   The icon drawings inside the sprite's <symbol>s are left alone (round 7 batch D:
   "all: revert" on a <path> reverts its shape in Chrome 131). ---- */
#tgs-ocp { all: initial; display: contents; }
#tgs-ocp *:where(:not(symbol *)) { all: revert; }
/* "all: revert" also undoes the hidden attribute (Chrome draws [hidden] as an author-level presentational hint, which
   revert rolls back): the status line and the thank-you view were drawn while hidden. The website's own page hides
   them by that same attribute, so it is put back here, at a weight the reset above cannot reach. */
#tgs-ocp [hidden]:where(:not(symbol *)) { display: none; }

/* ---- MASTER: public/css/site.css ---- */
@font-face { font-family: 'TGS Contact Spartan'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/shared/league-spartan-latin.woff2?v=7c5cfcbd82) format('woff2'); }
@font-face { font-family: 'TGS Contact Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/shared/inter-latin.woff2?v=f052ee44c3) format('woff2'); }
#tgs-ocp { --navy: #183965; --gold: #AA8355; --text: #414141; --sans: 'TGS Contact Spartan', 'League Spartan', sans-serif; }
#tgs-ocp *, #tgs-ocp *::before, #tgs-ocp *::after { box-sizing: border-box; }
@media (max-width: 1024px) {
  html:has(#tgs-ocp dialog[open]) { overflow: hidden; }
}
#tgs-ocp { color: var(--text); font-family: var(--sans); font-size: 15px; font-weight: 400; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
#tgs-ocp img { max-width: 100%; height: auto; display: block; }
#tgs-ocp h1, #tgs-ocp h2, #tgs-ocp h3, #tgs-ocp h4, #tgs-ocp h5, #tgs-ocp h6 { margin: 0; font-weight: inherit; }
#tgs-ocp p { margin: 0; }
#tgs-ocp a { color: inherit; text-decoration: none; }
#tgs-ocp button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
#tgs-ocp hr { border: 0; margin: 0; }
#tgs-ocp .icon { width: 1em; height: 1em; fill: currentColor; display: inline-block; flex: none; }
#tgs-ocp .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 1025px) {
  #tgs-ocp a:focus-visible, #tgs-ocp button:focus-visible, #tgs-ocp input:focus-visible, #tgs-ocp select:focus-visible, #tgs-ocp textarea:focus-visible, #tgs-ocp [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid #000; outline-offset: 2px; }
  #tgs-ocp button:focus-visible, #tgs-ocp [tabindex]:not([tabindex="-1"]):not(a):focus-visible { box-shadow: 0 0 0 4px #fff; }
  #tgs-ocp a:focus:not(:focus-visible), #tgs-ocp button:focus:not(:focus-visible), #tgs-ocp input:focus:not(:focus-visible), #tgs-ocp select:focus:not(:focus-visible), #tgs-ocp textarea:focus:not(:focus-visible), #tgs-ocp [tabindex]:not([tabindex="-1"]):focus:not(:focus-visible) { outline: none; box-shadow: none; }
}
#tgs-ocp .btn { display: inline-flex; align-items: center; justify-content: center; padding: 18px 30px 15px; border: 1px solid var(--gold); border-radius: 12px; background: var(--gold); color: #fff; font-family: var(--sans); font-size: 16px; font-weight: 200; line-height: 1.1; letter-spacing: 1px; text-transform: uppercase; text-align: center; transition: all .3s; }
@media (hover: hover) and (pointer: fine) {
  :where(html:not(.is-touch)) #tgs-ocp .btn:hover, :where(html:not(.is-touch)) #tgs-ocp .btn:focus { background-color: #183965E0; }
}
#tgs-ocp .btn:focus-visible { background-color: #183965E0; }
#tgs-ocp .btn.is-pressed { background-color: var(--navy); }
#tgs-ocp .btn { -webkit-tap-highlight-color: transparent; }
html.is-touch #tgs-ocp .btn { transition: none; }
#tgs-ocp .popup { border: 0; padding: 30px; width: 495px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); border-radius: 20px; background: #fff; color: var(--text); box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, .2); overflow: auto; overscroll-behavior: contain; }
#tgs-ocp .popup::backdrop { background: rgba(0, 0, 0, .8); }
#tgs-ocp .popup:focus { outline: none; }
@media (max-width: 1024px) {
  #tgs-ocp .popup[open] { animation: popup-in .3s ease; }
}
@keyframes popup-in { from { opacity: 0; } }
#tgs-ocp .popup__close { position: absolute; top: 20px; right: 20px; display: flex; color: var(--navy); }
#tgs-ocp .popup__close .icon { width: 24px; height: 24px; }
#tgs-ocp .popup--form { text-align: center; }
#tgs-ocp .popup__badge { margin: 0 auto 10px; }
#tgs-ocp .popup__badge--question { width: 67px; }
#tgs-ocp .popup__title { color: var(--navy); font-size: 31px; font-weight: 600; line-height: 1.1; }
#tgs-ocp .popup__intro { margin: 10px 10px 30px; font-size: 18px; line-height: 1.5; }
#tgs-ocp .popup--contact .popup__intro { margin: 5px 0 20px; }
#tgs-ocp .popup__note { margin: 20px 39px 0; font-size: 15px; line-height: 1.4; }
#tgs-ocp .popup__note .icon { width: 13px; height: 15px; vertical-align: -2px; }
#tgs-ocp .popup__rule { width: 30px; height: 2px; margin: 15px auto 10px; background: #BDBDBD; }
#tgs-ocp .popup--contact .popup__note { margin-top: 0; margin-bottom: 10px; }
#tgs-ocp .form { display: grid; gap: 15px; text-align: left; }
#tgs-ocp .field { position: relative; min-width: 0; }
#tgs-ocp .field input:not([type=checkbox]), #tgs-ocp .field select, #tgs-ocp .field textarea { display: block; width: 100%; min-width: 0; margin: 0; padding: 13px 18px; border: 2px solid #DFDFDF; border-radius: 3px; background: #fff; color: var(--text); font: 400 17px/1.7 var(--sans); appearance: none; -webkit-appearance: none; }
#tgs-ocp .field select { padding-right: 40px; line-height: 1.5; height: 56px; }
#tgs-ocp .field textarea { height: 88px; resize: vertical; }
#tgs-ocp .field ::placeholder { color: #757575; opacity: 1; }
#tgs-ocp .field input:focus, #tgs-ocp .field select:focus, #tgs-ocp .field textarea:focus { outline: none; border-color: var(--gold); }
#tgs-ocp .field__caret { position: absolute; right: 11px; top: 50%; width: 11px !important; height: 11px !important; transform: translateY(-50%); pointer-events: none; color: var(--text); }
#tgs-ocp .field--trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#tgs-ocp .form__submit { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 54px; margin-top: 1px; }
#tgs-ocp .form__submit .icon { width: 20px; height: 20px; }
#tgs-ocp .popup--contact .form__submit { margin-top: 0; }
#tgs-ocp .form__status { color: var(--navy); font-size: 15px; line-height: 1.4; text-align: center; }
#tgs-ocp .form__status.is-error { color: #b3261e; }
#tgs-ocp .field.is-invalid input:not([type=checkbox]), #tgs-ocp .field.is-invalid select, #tgs-ocp .field.is-invalid textarea { border-color: #b3261e; }
#tgs-ocp .field__error { margin: -10px 0 0; color: #b3261e; font: 500 14px/1.4 var(--sans); text-align: left; }
@media (max-width: 1024px) {
  #tgs-ocp .popup--form .popup__title { margin-top: -8px; }
  #tgs-ocp .popup--contact .popup__title { margin-top: 0; }
}
@media (max-width: 767px) {
  #tgs-ocp .popup--form { width: 92vw; padding: 25px; }
  #tgs-ocp .popup--contact { width: 90vw; padding: 20px; }
  #tgs-ocp .popup__badge { width: 50px !important; margin-bottom: 10px; }
  #tgs-ocp .popup__title, #tgs-ocp .popup--form .popup__title, #tgs-ocp .popup--contact .popup__title { margin-top: 0; font-size: 30px; }
  #tgs-ocp .popup__note { margin-inline: 0; }
  #tgs-ocp .popup__intro { font-size: 17.56px; line-height: 1.5; }
  #tgs-ocp .field input:not([type=checkbox]), #tgs-ocp .field textarea { font-size: 17px; }
  #tgs-ocp .popup--contact .field input:not([type=checkbox]), #tgs-ocp .popup--contact .field select, #tgs-ocp .popup--contact .field textarea { font-size: 17px; }
  #tgs-ocp .form__submit { height: 50px; font-size: 17px; border-radius: 12.25px; }
  #tgs-ocp .form__submit .icon { width: 17px; height: 17px; }
}
@media (max-width: 767px) {
  #tgs-ocp.phone-design .popup__close::before { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
}
@media (max-width: 767px) {
  div#tgs-ocp.phone-design .btn, div#tgs-ocp.phone-design .form__submit { font-family: var(--sans); font-weight: 100; letter-spacing: 1px; text-transform: uppercase; text-shadow: none; box-shadow: none; }
  div#tgs-ocp.phone-design main .btn, div#tgs-ocp.phone-design .form__submit { font-size: 17.97px; }
}
@media (min-width: 431px) and (max-width: 767px) {
  #tgs-ocp { --phone-col: 430px; }
  #tgs-ocp .popup--form { width: min(92vw, var(--phone-col)); }
  #tgs-ocp .popup--contact { width: min(90vw, var(--phone-col)); }
}
#tgs-ocp { --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); }
#tgs-ocp .popup:not(.popup--menu) { max-width: calc(100vw - 32px - var(--safe-left) - var(--safe-right)); }
@media (min-width: 1025px) {
  #tgs-ocp .popup__intro, #tgs-ocp .popup__note { color: #383A3C; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  #tgs-ocp .popup__close::before { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
}
@media (max-width: 1024px) {
  #tgs-ocp .popup__intro, #tgs-ocp .popup__note { color: #000; font-weight: 300; }
}
@media (min-width: 768px) {
  #tgs-ocp .form__submit { font-size: 16px; }
  #tgs-ocp .form__submit .icon { width: 16px; height: 16px; }
}
#tgs-ocp .popup--contact .form .popup__note { margin-top: 0; margin-bottom: 0; text-align: center; }
#tgs-ocp .contact__done:focus { outline: none; }
