/* The number asked for before checkout, as a popup (site/local/checkout-gate.js). Mantaram's
   deep green, the site's own fonts (Arimo, Prompt) and its dark green button, as in the cart. A
   centred card on a wide screen, a sheet from the bottom on a phone. Every rule is under .gtg so
   the theme's own styles neither reach in nor are touched. */
.gtg { --g9: #062E30; --g8: #083B3D; --g7: #0A4A4D; --g6: #0E5E62; --g1: #E3F0EE; --gold: #D4A64A;
  --ink: #232323; --muted: #6B6B6B; --line: #D9D9D9;
  position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 16px;
  font: 14px/1.5 Arimo, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink); }
.gtg[hidden] { display: none; }
.gtg *, .gtg *::before, .gtg *::after { box-sizing: border-box; }
html.gtg-open, html.gtg-open body { overflow: hidden; }
/* The theme sizes and fills every svg its own way: the popup's icons keep their own size and line. */
.gtg svg { display: inline-block; flex: none; fill: none; stroke: currentColor; vertical-align: middle; }

/* The theme's own overlay colour (its menu and side cart: #232323cc). `.gtg .gtg__backdrop` and
   display: block so no theme rule for empty divs can hide it. */
.gtg .gtg__backdrop { display: block; position: absolute; inset: 0; background: rgba(35, 35, 35, .8); animation: gtg-fade .2s ease; }
.gtg__panel { position: relative; width: 100%; max-width: 400px; max-height: calc(100vh - 32px); overflow: auto; border-radius: 8px;
  background: #fff; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); animation: gtg-rise .25s ease; }

/* the same dark green band and gold line as the site's header */
.gtg__top { position: relative; display: flex; align-items: center; justify-content: center; height: 64px;
  background: var(--g8); border-bottom: 2px solid var(--gold); }
.gtg__top img { display: block; width: auto; height: 38px; }
.gtg__close { position: absolute; top: 50%; right: 12px; width: 34px; height: 34px; margin-top: -17px; padding: 0; border: 1px solid rgba(231, 183, 95, .5);
  border-radius: 50%; background: transparent; color: #E7B75F; font: 400 22px/1 Arimo, Arial, sans-serif; cursor: pointer; }
.gtg__close:hover, .gtg__close:focus-visible { background: rgba(231, 183, 95, .15); outline: 0; }

.gtg__body { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 22px 22px 18px; }
.gtg__head { text-align: center; }
.gtg__icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 50%; background: var(--g1); color: var(--g6); }
.gtg__icon svg { width: 24px; height: 24px; }
.gtg__head h2 { margin: 0 0 6px; padding: 0; border: 0; font: 600 21px/1.25 Prompt, Arimo, Arial, sans-serif; color: var(--g8);
  text-transform: none; letter-spacing: 0; }
.gtg__head p { margin: 0; font-size: 13.5px; color: var(--muted); }
.gtg__head strong { color: var(--ink); white-space: nowrap; }

.gtg__field { position: relative; display: block; margin: 0; }
.gtg__field input { display: block; width: 100%; height: 52px; margin: 0; padding: 20px 12px 6px; border: 1px solid var(--line); border-radius: 4px;
  background: #fff; color: var(--ink); font: 600 17px/1 Arimo, Arial, sans-serif; letter-spacing: .03em;
  box-shadow: none; -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s; }
.gtg__field input:focus { outline: 0; border-color: var(--g6); box-shadow: 0 0 0 3px rgba(14, 94, 98, .14); }
.gtg__field input::placeholder { color: #A3A3A3; font-weight: 400; letter-spacing: .02em; opacity: 1; }
/* the label always sits small at the top of the box, so it never covers what is typed */
.gtg__field span { position: absolute; left: 12px; top: 6px; font-size: 11px; font-weight: 700; color: var(--g6); pointer-events: none;
  text-transform: uppercase; letter-spacing: .04em; }
/* +91 sits inside the box, on the line of the number */
.gtg__cc { position: absolute; left: 12px; bottom: 9px; color: var(--ink); font: 600 17px/1 Arimo, Arial, sans-serif; }
.gtg__field .gtg__cc ~ input { padding-left: 46px; }
.gtg__field--code input { text-align: center; font-size: 24px; letter-spacing: .45em; padding-left: calc(12px + .45em); }
.gtg__field--code input::placeholder { font-size: 18px; letter-spacing: .4em; }
.gtg__field--code span { left: 0; right: 0; text-align: center; }
.gtg__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* the site's own button: dark green, white, small capitals, square corners */
.gtg__btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin: 0; padding: 0 16px;
  border: 1px solid var(--g6); border-radius: 4px; background: var(--g6); color: #fff;
  font: 700 13px/1 Arimo, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; box-shadow: none; transition: background-color .15s, border-color .15s, opacity .15s; }
.gtg__btn svg { width: 15px; height: 15px; }
.gtg__btn:hover { background: var(--g8); border-color: var(--g8); }
.gtg__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.gtg__btn[disabled] { opacity: .65; cursor: wait; }

.gtg__error, .gtg__notice { margin: 0; padding: 10px 12px; border-radius: 4px; font-size: 13.5px; }
.gtg__error { background: #FDECEA; color: #A12A1B; border: 1px solid #F5C6C0; }
.gtg__notice { background: #EAF6EC; color: #1E6B33; border: 1px solid #C5E6CD; }

.gtg__links { margin: -2px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.gtg__link { display: inline; margin: 0; padding: 0; border: 0; background: none; color: var(--g6); font: inherit; font-weight: 700;
  text-decoration: underline; text-transform: none; letter-spacing: 0; cursor: pointer; }
.gtg__link[disabled] { color: var(--muted); text-decoration: none; cursor: default; }
.gtg__safe { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px 0 0; padding-top: 12px;
  border-top: 1px solid #EEE; font-size: 12px; color: var(--muted); }
.gtg__safe svg { width: 12px; height: 12px; }

@keyframes gtg-fade { from { opacity: 0; } }
@keyframes gtg-rise { from { opacity: 0; transform: translateY(16px); } }

/* a phone: a sheet from the bottom of the screen, the keyboard pushing it up */
@media (max-width: 600px) {
  .gtg { align-items: flex-end; padding: 0; }
  .gtg__panel { max-width: none; max-height: 92vh; border-radius: 12px 12px 0 0; animation-name: gtg-sheet; }
  .gtg__top { height: 58px; }
  .gtg__top img { height: 34px; }
  .gtg__body { padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); gap: 12px; }
  .gtg__icon { width: 44px; height: 44px; margin-bottom: 8px; }
  .gtg__head h2 { font-size: 19px; }
}
@keyframes gtg-sheet { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .gtg__backdrop, .gtg__panel { animation: none; } }