/* ============================================================================
   GotTickets component layer — the shared primitives, and the compatibility
   block that makes the existing ones agree.
   ============================================================================

   THE PROBLEM THIS SOLVES

   A sweep of every button rule on the site found 72 of them across 16 different
   corner radii and 8 font weights. Nobody chose that either: each page brought
   its own button because there was nothing to reuse. The audit's words were
   "same button radius and height, same form input styling" — this is that.

   TWO HALVES

   1. NEW WORK uses .gt-btn / .gt-field / .gt-note / .gt-empty below. One class
      set, documented, built on the tokens in gt-tokens.css.

   2. EXISTING WORK is not rewritten. The compatibility block at the bottom
      normalises what the old classes already render — corner radius, minimum
      touch target, focus ring — WITHOUT touching a single blade file. Colour and
      padding are left alone: those carry intent (a hero action is meant to be
      bigger) and rewriting them blind would be redesigning, not unifying.

   LOADED LAST, deliberately, so the compatibility block can override the page
   stylesheets it is correcting.
   ============================================================================ */

/* ---------------------------------------------------------------- buttons */

.gt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--gt-control-h);
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--gt-radius);
    font-weight: 800;
    font-size: 14.5px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: filter .15s, background .15s, border-color .15s, transform .15s;
}
.gt-btn:hover      { text-decoration: none; transform: translateY(-1px); }
.gt-btn:active     { transform: translateY(0); }
.gt-btn:disabled,
.gt-btn.is-disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Focus must be visible for anyone navigating by keyboard, and must NOT fire on
   a mouse click, which is why this is :focus-visible rather than :focus. */
.gt-btn:focus-visible { outline: none; box-shadow: var(--gt-focus-ring); }

.gt-btn--primary   { background: var(--gt-brand); color: #fff; }
.gt-btn--primary:hover { filter: brightness(1.08); color: #fff; }

.gt-btn--secondary { background: rgba(255,255,255,.06); border-color: var(--gt-line-strong); color: var(--gt-ink); }
.gt-btn--secondary:hover { background: rgba(255,255,255,.10); color: var(--gt-ink); }

.gt-btn--quiet     { background: none; border-color: transparent; color: var(--gt-ink-muted); }
.gt-btn--quiet:hover { color: var(--gt-ink); }

.gt-btn--danger    { background: var(--gt-danger); color: #fff; }

.gt-btn--sm { min-height: var(--gt-control-h-sm); padding: 0 14px; font-size: 13px; border-radius: var(--gt-radius-sm); }
.gt-btn--lg { min-height: var(--gt-control-h-lg); padding: 0 28px; font-size: 16px; }
.gt-btn--block { width: 100%; }

/* ----------------------------------------------------------------- fields */

.gt-field       { display: block; margin-bottom: 18px; }
.gt-field label { display: block; margin-bottom: 7px; font-weight: 650; font-size: 13.5px; color: var(--gt-ink-muted); }

.gt-field input,
.gt-field select,
.gt-field textarea {
    width: 100%;
    min-height: var(--gt-control-h);
    padding: 11px 14px;
    background: rgba(0,0,0,.25);
    border: 1px solid var(--gt-line-strong);
    border-radius: var(--gt-radius-sm);
    color: var(--gt-ink);
    font-size: 15px;   /* 16px or above on iOS avoids the zoom-on-focus jump */
}
.gt-field input:focus,
.gt-field select:focus,
.gt-field textarea:focus { outline: none; border-color: var(--gt-brand); box-shadow: var(--gt-focus-ring); }

/* The message belongs under the field it is about, not floating at the top of
   the form where it is read out of context. */
.gt-field .gt-help  { display: block; margin-top: 6px; font-size: 12.5px; color: var(--gt-ink-soft); }
.gt-field .gt-error { display: block; margin-top: 6px; font-size: 12.5px; color: var(--gt-danger); font-weight: 700; }
.gt-field.is-invalid input,
.gt-field.is-invalid select,
.gt-field.is-invalid textarea { border-color: var(--gt-danger); }

/* ------------------------------------------------------- notices & states */

.gt-note {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    padding: 14px 16px;
    margin: 0 0 16px;
    border-radius: var(--gt-radius);
    background: rgba(255,255,255,.04);
    border: 1px solid var(--gt-line-strong);
}
.gt-note b    { display: block; color: var(--gt-ink); margin-bottom: 2px; }
.gt-note span { display: block; color: var(--gt-ink-muted); font-size: 13px; }
.gt-note--ok     { background: rgba(52,211,153,.10); border-color: rgba(52,211,153,.34); }
.gt-note--warn   { background: rgba(245,165,36,.10); border-color: rgba(245,165,36,.32); }
.gt-note--danger { background: rgba(255,77,110,.10); border-color: rgba(255,77,110,.34); }

/* Empty states say what is missing AND what to do about it — a blank panel
   reads as broken, which is how "no results" gets reported as a bug. */
.gt-empty        { text-align: center; padding: 34px 18px; color: var(--gt-ink-soft); }
.gt-empty b      { display: block; color: var(--gt-ink); font-size: 15.5px; margin-bottom: 5px; }
.gt-empty span   { display: block; font-size: 13.5px; margin-bottom: 14px; }

/* Loading: a skeleton where content will appear, not a spinner over the page. */
.gt-skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.10) 37%, rgba(255,255,255,.05) 63%);
    background-size: 400% 100%;
    animation: gt-shimmer 1.4s ease infinite;
    border-radius: var(--gt-radius-sm);
    min-height: 14px;
}
@keyframes gt-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Somebody who has asked their system not to animate things means it. */
@media (prefers-reduced-motion: reduce) {
    .gt-skeleton { animation: none; }
    .gt-btn:hover { transform: none; }
}

/* =========================================================================
   COMPATIBILITY — the existing classes, made to agree.

   Geometry only: radius, minimum height, focus ring. No colour and no padding,
   because those carry intent that a blind rewrite would destroy. Deleting this
   block reverts the site to its previous geometry with no other consequence.
   ========================================================================= */

.gto-btn, .primary-cta, .ghost-cta, .evx-buy, .gtc-od-btn, .gt-role-card,
.btn-primary, .btn-secondary, .btn-success, .btn-danger, .evx-save-btn {
    min-height: var(--gt-control-h);
}

/* A button that has already been asked to be small stays small. Bootstrap's
   .btn-sm lives in table rows and toolbars, where 44px is not a touch target
   but a broken row. */
.btn-sm, .btn-xs,
.btn-sm.btn-primary, .btn-sm.btn-secondary, .btn-sm.btn-success, .btn-sm.btn-danger {
    min-height: var(--gt-control-h-sm);
}

/* Pill shapes are a deliberate look and stay pills; everything else lands on
   the radius scale instead of the sixteen values found in the sweep. */
.evx-buy, .gtc-od-btn, .evx-save-btn, .gt-role-card,
.btn-primary, .btn-secondary, .btn-success, .btn-danger {
    border-radius: var(--gt-radius);
}

/* One focus treatment everywhere, keyboard-only. Several of these had none at
   all, which makes a form impossible to follow without a mouse. */
.gto-btn:focus-visible, .primary-cta:focus-visible, .ghost-cta:focus-visible,
.evx-buy:focus-visible, .gtc-od-btn:focus-visible, .evx-save-btn:focus-visible,
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible {
    outline: none;
    box-shadow: var(--gt-focus-ring);
}