/* Player fields inherit the shop's THEME (WooCommerce form-row / input-text / woocommerce-input-wrapper).
   We impose no input/label styling of our own — only vertical spacing between fields, and the small
   coloured "Verify ID" result. Everything else follows whatever the theme styles its form fields with. */
.gamerhub-fields { margin: 0 0 16px; }
.gamerhub-field { margin: 0 0 12px; }

/* The result area reserves its height from the start. Without this the card grows 0 -> 59 -> 107px
   as the check runs, and everything below it — including Add to cart — slides down by that much
   while the buyer is reaching for it. Reserving costs a little blank space; a buy button that moves
   under a thumb mid-tap costs an order. min-height, not height, so a long error message can still
   grow rather than being clipped. */
.gamerhub-verify-wrap { margin: 10px 0; min-height: 4.25em; }
.gamerhub-verify-wrap .gamerhub-verify-note { margin: 0; }

/* The result card. Self-contained on purpose — see the note in gamerhub-frontend.js.
   The ONLY colours here are a green and a red on a 3px left border: universal, readable on light
   and dark grounds alike, and not a palette anyone has to match. Everything else — text colour,
   font, background — is inherited, so the card belongs to whatever theme it lands in. */
.gamerhub-verify-note {
    padding: .7em .9em;
    border: 1px solid;
    border-left-width: 4px;
    border-radius: 4px;
    line-height: 1.45;
    font-size: .9em;
    border-color: rgba(128, 128, 128, .35);
}
/* A tint as well as the edge. A 4px stripe alone was too quiet to notice next to a full-width
   input and an Add to cart button — the buyer is meant to READ this before paying. The tints are
   8% of the same two semantic colours, which stays legible on a white or a dark page. */
.gamerhub-verify-note.is-ok {
    border-color: rgba(46, 125, 50, .4);
    border-left-color: #2e7d32;
    background-color: rgba(46, 125, 50, .08);
}
.gamerhub-verify-note.is-bad {
    border-color: rgba(198, 40, 40, .4);
    border-left-color: #c62828;
    background-color: rgba(198, 40, 40, .08);
}
.gamerhub-verify-note.is-skip { border-left-color: currentColor; background-color: rgba(128, 128, 128, .08); }
.gamerhub-verify-note.is-busy { opacity: .7; }
/* The account name is the one thing the buyer must actually check — give it room to be read. */
.gamerhub-verify-note strong { font-size: 1.1em; }
/* The account name carries the weight; the region rides next to it as a quiet chip. */
.gamerhub-verify-region {
    display: inline-block;
    padding: 0 .45em;
    border: 1px solid currentColor;
    border-radius: 3px;
    font-size: .85em;
    opacity: .75;
}
.gamerhub-verify-note a { margin-left: .35em; }
.gamerhub-verify-result:empty { display: none; }
.gamerhub-verify-note { margin: 8px 0 0; }

/* The check button sits on its own row. Not inside the field: that needed one layout for text
   inputs and another for dropdowns, and anything placed inside .woocommerce-input-wrapper has its
   clicks swallowed by WooCommerce. */
.gamerhub-verify-actions { margin: 0 0 10px; }
/* form-row on the <p> gives it the same left edge and spacing as the buyer fields, so the column
   lines up instead of sitting a few px out. */
/* !important on these five, deliberately.
   The plan was to let the theme own the button and override three colours. It does not survive
   contact with real themes: this site's theme.json ships `border-width: 0` on .wp-element-button,
   so "outline" drew literally nothing and the button rendered as bare text. Theme button rules vary
   in specificity from :where() (zero) to long compound selectors, and there is no specificity we
   could pick that is right everywhere.
   So these five declarations — the ones that make it read as a button at all — are pinned, and
   everything else (radius, padding, font, weight, letter-spacing, transitions) is still left to the
   theme. No literal colour: currentColor and inherit follow whatever the shop uses for text, so it
   adapts to a dark theme for free. */
.gamerhub-verify-actions .gamerhub-verify-btn {
    min-height: 40px;
    cursor: pointer;
    background-color: transparent !important;
    color: inherit !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: currentColor !important;
}
.gamerhub-verify-actions .gamerhub-verify-btn:hover:not(:disabled) { opacity: .8; }
.gamerhub-verify-actions .gamerhub-verify-btn:disabled { opacity: .5; cursor: wait; }
@media (max-width: 600px) {
    .gamerhub-verify-actions .gamerhub-verify-btn { width: 100%; }
}