/* ============================================================================
   MPGS Hosted Session — Card Field  ·  SINGLE SOURCE OF TRUTH
   ----------------------------------------------------------------------------
   This file is the ONLY place the card field is styled. checkout.php,
   addon-checkout.php, dashboard/tabs/companyservices.php and update-card-mpgs.php
   all link this file — fix the look/border/focus ONCE here and every page
   updates together.

   Model (official MPGS Hosted Session): each field is a simple readonly <input>
   that the gateway REPLACES with a cross-origin iframe taking "the same look and
   feel as the replaced field". So the VISIBLE box (border / radius / height /
   padding) lives on .mpgs-box; the iframe fills the box 1:1 with no fixed-px
   sizing fight (that fight caused the old mount-time "blink").

   Text / placeholder styling INSIDE the iframe is applied with session.js
   setFocusStyle()/setPlaceholderStyle() from mpgs-card.js — configure() has NO
   `style` param. The CBC gateway draws its OWN orange focus ring inside the
   iframe and ignores setFocusStyle, so we MATCH it on .mpgs-box.mpgs-focus
   (toggled by onFocus/onBlur) → one clean, intentional brand-orange focus.

   Variables fall back to literals so the file is self-sufficient on any page.
   ========================================================================== */

.mpgs-card { display: flex; flex-direction: column; gap: 12px; }
.mpgs-row  { display: flex; gap: 12px; }

.mpgs-box {
    position: relative;
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 14px;
    background: var(--bg-white, #FFFFFF);
    border: 2px solid var(--border-light, #EAEAEA);
    border-radius: var(--radius-md, 10px);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mpgs-box--number { width: 100%; }              /* own row → EMBOSSED spacing never reflows */
.mpgs-box--exp    { flex: 1 1 50%; gap: 6px; }
.mpgs-box--cvc    { flex: 1 1 50%; }
.mpgs-box.has-error { border-color: #DC2626; }
.mpgs-box.is-valid  { border-color: var(--accent-green, #16A34A); }

/* FOCUS — toggled by MPGS onFocus/onBlur callbacks (NOT :focus-within, which
   does not fire reliably for focus inside a cross-origin iframe). Matches the
   gateway's own in-iframe orange focus so the two line up into ONE ring. */
.mpgs-box.mpgs-focus {
    border-color: var(--accent-orange, #FF6B35);
    box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.08);
}

/* Scaffold input — MPGS copies its look & feel onto the proxy iframe. Keep it
   borderless/transparent and let it fill its box. */
.mpgs-field {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 100%;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    font-family: inherit !important;
    font-size: 16px;
    font-weight: 400;
    color: #30313D;
    padding: 0 !important;
    -webkit-appearance: none;
    appearance: none;
}
/* font-size is 16px (not 15px) ON PURPOSE. MPGS copies this scaffold field's
   look & feel onto the proxy iframe at mount, and some CBC gateway versions
   IGNORE the setPlaceholderShownStyle() call from mpgs-card.js — so this
   scaffold value is the reliable one the card text ends up at. Below 16px, iOS
   Safari auto-zooms the whole page the moment the card box is focused (a jolt
   mid-payment). Keeping the scaffold at 16px makes the no-zoom behaviour hold
   even when the gateway drops our JS styling. */
.mpgs-field::placeholder { color: #ACACB7; opacity: 1; font-weight: 400; }
.mpgs-field--mm, .mpgs-field--yy { flex: 0 0 auto; width: 30px; text-align: center; }

/* The injected iframe fills its field box exactly — NO fixed px, so it never
   resizes after mount (the old width:100%/height:44px on tiny cells fought
   MPGS's own sizing and caused the blink). */
#mpgs-card-element iframe {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    pointer-events: auto !important;
}
.mpgs-box iframe { width: 100% !important; height: 100% !important; }
/* MM/YY iframes keep their natural narrow width inside the exp box. Same
   specificity as `.mpgs-box iframe`, declared after → wins. */
.mpgs-box--exp iframe { width: 30px !important; }

/* ROOT-CAUSE FIX (2026-06-11) — neutralise the GLOBAL brand focus styling
   inside the card widget. css/ux-enhancements.css applies a brand-orange
   :focus-visible outline (2px #FF6B35 + 2px offset) to ALL focusable elements,
   and an orange border/box-shadow to input:focus-visible. On mount, session.js
   auto-focuses the first hosted field, so that GLOBAL orange paints on the
   (empty, untouched) card-number box — NOT Stripe, not an error, and a layer the
   .mpgs-box.mpgs-focus JS gate did not cover. Page CSS cannot reach INSIDE the
   cross-origin iframe, but it CAN cancel the orange the global rules add to these
   proxy elements. The ONLY intentional focus ring stays .mpgs-box.mpgs-focus,
   applied by JS on a genuine user focus. */
#mpgs-card-element :focus,
#mpgs-card-element :focus-visible,
#mpgs-card-element iframe,
#mpgs-card-element iframe:focus,
#mpgs-card-element iframe:focus-visible,
.mpgs-field:focus,
.mpgs-field:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.mpgs-sep { color: #BDBDBD; font-size: 15px; user-select: none; line-height: 1; flex: 0 0 auto; }

/* Brand icon overlaid at the right of the number box. pointer-events:none so it
   NEVER interferes with the iframe's layout or interaction. */
.mpgs-brand {
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    display: inline-flex; align-items: center;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.mpgs-brand[data-brand="unknown"] svg { opacity: 0.45; }

/* Off-screen cardholder name — MPGS requires it in the DOM. Clip IN PLACE (no
   left:-10000px, which can scroll the page sideways when the gateway focuses it). */
.mpgs-cardholder-offscreen {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 480px) {
    .mpgs-box { height: 48px; padding: 0 12px; }
    .mpgs-row { gap: 10px; }
    /* 16px, NOT 14px: this media query fires on exactly the phones where iOS
       auto-zoom bites. 14px here was overriding the 16px base and forcing the
       card box to zoom on focus mid-payment. Kept at 16px to suppress it. */
    .mpgs-field { font-size: 16px; }
}

/* v32 (2026-06-11) — hosted-field mount loading overlay (paired with
   _mpgsShowLoading in mpgs-card.js). Spinner + label while configure() loads the
   gateway iframes, so the readonly scaffold fields never look frozen. Removed on reveal. */
.mpgs-card.mpgs-loading { position: relative; pointer-events: none; }
.mpgs-loading-overlay {
    position: absolute; inset: 0; z-index: 5;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: rgba(255, 255, 255, 0.82);
    border-radius: var(--radius-md, 10px);
    font-size: 13px; font-weight: 500; color: var(--text-secondary, #6B7280);
}
.mpgs-loading-spinner {
    width: 16px; height: 16px;
    border: 2px solid #E5E7EB; border-top-color: var(--accent-orange, #FF6B35);
    border-radius: 50%; animation: mpgs-card-spin 0.7s linear infinite;
}
@keyframes mpgs-card-spin { to { transform: rotate(360deg); } }