/* ==========================================================================
   BIX PAYMENT PLUGIN — checkout styles (Surface A)
   Implemented from the BIX design handoff. Brand: navy → blue → cyan.
   Scoped under .bix so it never leaks into the host theme.
   ========================================================================== */

:root {
  /* ---- BIX BRAND ---- */
  --bix-navy:      #142a6b;
  --bix-navy-700:  #1b3a86;
  --bix-blue:      #2f6bed;
  --bix-blue-600:  #2358d6;
  --bix-blue-700:  #1c47b0;
  --bix-cyan:      #18b9ec;
  --bix-grad:      linear-gradient(108deg, #142a6b 0%, #2f6bed 54%, #18b9ec 100%);
  --bix-grad-soft: linear-gradient(108deg, #1b3a86 0%, #2f6bed 60%, #3fc4f0 100%);
  --bix-blue-050:  #eef4fe;
  --bix-blue-100:  #dbe7fd;

  /* ---- INK / NEUTRALS ---- */
  --ink:        #16224a;
  --ink-2:      #4d5870;
  --ink-3:      #8893a5;
  --line:       #d7dde6;
  --line-2:     #c6cdd9;
  --field-bg:   #ffffff;
  --surface:    #f4f6fa;
  --surface-2:  #eaeef4;
  --white:      #ffffff;

  /* ---- SEMANTIC ---- */
  --error:        #e2401c;
  --error-bg:     #fff5f5;
  --error-border: #f1b3a6;
  --success:      #1f9d57;
  --success-bg:   #ecf9f1;
  --success-border:#a9e0c0;
  --info:         #2f6bed;
  --info-bg:      #eef4fe;
  --warning:      #b7791f;
  --warning-bg:   #fff8ec;

  /* ---- RADII ---- */
  --r-input: 4px;
  --r-pill:  6px;
  --r-card:  12px;
  --r-chip:  4px;

  /* ---- ELEVATION ---- */
  --sh-sm:   0 1px 2px rgba(20,42,107,.06);
  --sh-card: 0 6px 24px rgba(20,42,107,.10);
  --focus:   0 0 0 3px rgba(47,107,237,.35);
  --focus-err: 0 0 0 3px rgba(226,64,28,.28);

  /* ---- TYPE ---- */
  --font-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui:   'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ==========================================================================
   FORM SHELL — fluid, lives inside the theme's checkout column
   ========================================================================== */
.bix {
  --fg:    var(--ink);
  --fg-2:  var(--ink-2);
  --fg-3:  var(--ink-3);
  --bd:    var(--line);
  --bd-2:  var(--line-2);
  --fld:   var(--field-bg);
  --panel: var(--white);
  --sel:   var(--bix-blue-050);
  font-family: var(--font-ui);
  color: var(--fg);
  width: 100%;
  font-size: 15px;
  line-height: 1.45;
}
.bix * { box-sizing: border-box; }
.bix button { font-family: inherit; cursor: pointer; }
.bix input { font-family: inherit; }

/* dark adaptation (merchant theme may be dark) */
.bix[data-theme="dark"] {
  --fg:   #eaf0fb;
  --fg-2: #aab6cf;
  --fg-3: #7f8bab;
  --bd:   #2b3656;
  --bd-2: #3a466a;
  --fld:  #131a30;
  --panel:#171f38;
  --sel:  #1a294f;
}

/* ---- section label row ---- */
.bix-label {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 0 0 10px;
}
.bix-label__t {
  font-family: var(--font-head);
  font-weight: 600; font-size: 13px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--fg-2);
}
.bix-label__hint {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--fg-3);
}

/* ---- method pills ---- */
.bix-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.bix-pill {
  flex: 1 1 auto; min-width: 96px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 14px;
  background: var(--fld);
  border: 1px solid var(--bd-2);
  border-radius: var(--r-pill);
  color: var(--fg-2);
  font-size: 13.5px; font-weight: 600; letter-spacing: -.1px;
  transition: border-color .14s, background .14s, box-shadow .14s, color .14s;
  position: relative; user-select: none;
}
.bix-pill .bix-pill__ic { flex: 0 0 auto; display: inline-flex; opacity: .9; }
.bix-pill:hover:not([aria-disabled="true"]):not([aria-checked="true"]) {
  border-color: var(--bix-blue);
  color: var(--fg);
  background: color-mix(in srgb, var(--bix-blue-050) 60%, var(--fld));
}
.bix-pill[aria-checked="true"] {
  border-color: var(--bix-blue);
  background: var(--sel);
  color: var(--bix-blue);
  box-shadow: inset 0 0 0 1px var(--bix-blue);
}
.bix[data-theme="dark"] .bix-pill[aria-checked="true"] { color: #cfe0ff; }
.bix-pill[aria-checked="true"] .bix-pill__ic { opacity: 1; }
.bix-pill:focus-visible { outline: none; box-shadow: var(--focus); border-color: var(--bix-blue); z-index: 1; }
.bix-pill[aria-checked="true"]:focus-visible { box-shadow: var(--focus), inset 0 0 0 1px var(--bix-blue); }
.bix-pill[aria-disabled="true"] { opacity: .5; cursor: not-allowed; background: var(--surface-2); border-style: dashed; }
.bix-pill__check {
  position: absolute; top: -7px; right: -7px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bix-blue); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--panel);
}

/* ---- fields ---- */
.bix-form { display: grid; gap: 14px; }
.bix-row { display: grid; gap: 14px; }
.bix-row--expiry { grid-template-columns: 1fr 1fr 1.2fr; }

/* Ionia API-mode scaffold (reconstructed): the Verify library shows #card-plain-col
   as a plain block (inline display), so restore the form's vertical rhythm with
   sibling margins rather than relying on grid gap. #card-iframes-col stays hidden. */
#card-plain-col > * + * { margin-top: 14px; }
#card-expiration-detail-plain { min-width: 0; }

.bix-field { display: grid; gap: 6px; min-width: 0; }
.bix-field__label {
  font-size: 13px; font-weight: 600; color: var(--fg-2);
  display: flex; align-items: center; gap: 6px;
}
.bix-field__opt { font-weight: 400; color: var(--fg-3); font-size: 12px; }

/* ---- field row: all labels on one line, matching-width inputs below ----
   One grid, one explicit-pixel-width column per field (set inline from the
   measured label width) — label (row 1) and its input cell (row 2) share the
   same column, so the input starts at exactly the same x as its label. */
/* Sized to its own columns, not stretched full-width — same left-justified
   look as the BankForm / PointsForm rows. */
.bix-fieldrow { display: grid; column-gap: 16px; row-gap: 6px; align-items: start; width: max-content; max-width: 100%; }
.bix-fieldrow__cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bix-fieldrow__cell[data-error="true"] .bix-input { border-color: var(--error); background: var(--error-bg); }
.bix[data-theme="dark"] .bix-fieldrow__cell[data-error="true"] .bix-input { background: #2a1714; }
.bix-fieldrow__cell[data-error="true"] .bix-input:focus { box-shadow: var(--focus-err); }
.bix-fieldrow__cell[data-valid="true"] .bix-input { border-color: var(--success); }

.bix-input-wrap { position: relative; display: flex; align-items: center; }
.bix-input {
  width: 100%;
  padding: 11px 12px;
  font-size: 15px;
  color: var(--fg);
  background: var(--fld);
  border: 1px solid var(--bd-2);
  border-radius: var(--r-input);
  transition: border-color .14s, box-shadow .14s;
  font-variant-numeric: tabular-nums;
}
.bix-input::placeholder { color: var(--fg-3); }
.bix-input:hover:not(:disabled) { border-color: var(--bix-blue); }
.bix-input:focus { outline: none; border-color: var(--bix-blue); box-shadow: var(--focus); }
.bix-input[data-pad-right="true"] { padding-right: 46px; }
.bix-input:disabled { background: var(--surface-2); color: var(--fg-3); cursor: not-allowed; }

.bix-field[data-error="true"] .bix-input { border-color: var(--error); background: var(--error-bg); }
.bix[data-theme="dark"] .bix-field[data-error="true"] .bix-input { background: #2a1714; }
.bix-field[data-error="true"] .bix-input:focus { box-shadow: var(--focus-err); }
.bix-field[data-valid="true"] .bix-input { border-color: var(--success); }

.bix-adorn {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 6px; pointer-events: none;
}
.bix-adorn--btn { pointer-events: auto; }

.bix-err {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--error); font-weight: 500;
}
.bix[data-theme="dark"] .bix-err { color: #ff8a6e; }

/* ---- account-type radio buttons (no frame/box around them) ---- */
.bix-radio-group { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.bix-radio-opt {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  color: var(--fg-2); font-size: 14px; font-weight: 500;
}
.bix-radio-opt input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--bix-blue); cursor: pointer; }
.bix-radio-opt input[type="radio"]:disabled { cursor: not-allowed; }

/* ---- helper / description ---- */
.bix-desc {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 12.5px; color: var(--fg-3); line-height: 1.5;
  margin-top: 2px;
}
.bix-desc svg { flex: 0 0 auto; margin-top: 1px; }

/* ---- notice banners ---- */
.bix-notice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--r-input);
  border: 1px solid; font-size: 13.5px; line-height: 1.45; margin: 0 0 16px;
}
.bix-notice__ic { flex: 0 0 auto; margin-top: 1px; }
.bix-notice__t { font-weight: 700; }
.bix-notice--error   { background: var(--error-bg);   border-color: var(--error-border);   color: #8a2410; }
.bix-notice--info    { background: var(--info-bg);    border-color: var(--bix-blue-100);   color: #1c47b0; }
.bix-notice--success { background: var(--success-bg); border-color: var(--success-border); color: #16623b; }
.bix[data-theme="dark"] .bix-notice--error   { background:#2a1714; color:#ffb4a0; }
.bix[data-theme="dark"] .bix-notice--info    { background:#15244a; color:#bcd4ff; }
.bix[data-theme="dark"] .bix-notice--success { background:#11271c; color:#8fe3b3; }

/* ---- WooCommerce's OWN native notices (wc_add_notice() - Gateway.php's
   payment-result banners: 'Payment approved...' on Success, 'Payment
   declined...'/etc. on Error) - framed the same way as .bix-notice above
   (same padding/border-radius/border, same --success-bg/--error-bg color
   pairs) so a Success result gets an equally prominent green frame, not
   just whatever bare/unstyled look the active theme gives these by default.
   Covers both the classic-checkout markup (<ul class="woocommerce-error">/
   <ul class="woocommerce-message">, one <li> per message) and WC Blocks'
   own notice banner (<div class="wc-block-components-notice-banner is-*">). */
.woocommerce-error, .woocommerce-message, .woocommerce-info,
.wc-block-components-notice-banner {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px !important; border-radius: var(--r-input) !important;
  border: 1px solid !important; font-size: 13.5px; line-height: 1.45; margin: 0 0 16px !important;
  list-style: none !important;
}
.woocommerce-error, .wc-block-components-notice-banner.is-error {
  background: var(--error-bg) !important; border-color: var(--error-border) !important; color: #8a2410 !important;
}
.woocommerce-message, .wc-block-components-notice-banner.is-success {
  background: var(--success-bg) !important; border-color: var(--success-border) !important; color: #16623b !important;
}
.woocommerce-info, .wc-block-components-notice-banner.is-info {
  background: var(--info-bg) !important; border-color: var(--bix-blue-100) !important; color: #1c47b0 !important;
}

/* ---- security row ---- */
.bix-secure {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; font-size: 12px; color: var(--fg-3);
}
.bix-secure__brands { display: flex; gap: 5px; margin-left: auto; }

/* ---- spinner ---- */
.bix-spin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.45); border-top-color: #fff;
  animation: bix-rot .7s linear infinite;
}
.bix-spin--blue { border-color: rgba(47,107,237,.3); border-top-color: var(--bix-blue); }
@keyframes bix-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bix-spin { animation-duration: 1.6s; } }

/* ---- session-loading row (card fields locked until token reply) ---- */
.bix-loading {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 14px; font-size: 13px; font-weight: 500; color: var(--fg-2);
}

/* ---- empty state ---- */
.bix-empty {
  text-align: center; padding: 34px 20px;
  border: 1px dashed var(--bd-2); border-radius: var(--r-card);
  background: var(--fld); color: var(--fg-2);
}
.bix-empty__ic {
  width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 14px;
  display: grid; place-items: center; background: var(--surface-2); color: var(--fg-3);
}
.bix-empty__t { font-family: var(--font-head); font-weight: 600; font-size: 16px; color: var(--fg); margin: 0 0 6px; }
.bix-empty__d { font-size: 13px; max-width: 320px; margin: 0 auto; }

/* ---- card-brand chip ---- */
.bix-brand-chip {
  width: 34px; height: 22px; border-radius: var(--r-chip);
  display: inline-grid; place-items: center; background: #fff;
  border: 1px solid var(--line); overflow: hidden; flex: 0 0 auto;
}
.bix-brand-chip svg { display: block; }
.bix-brand-chip[data-dim="true"] { opacity: .32; filter: grayscale(1); }

/* ==========================================================================
   WooCommerce "Place Order" button — theme-owned slot, branded via CSS.
   Applies the BIX gradient to the checkout submit button.
   ========================================================================== */
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout-actions-block .wc-block-components-button,
#place_order {
  background: var(--bix-grad) !important;
  border: none !important;
  color: #fff !important;
  font-family: var(--font-head) !important;
  font-weight: 600 !important;
  letter-spacing: .2px;
  border-radius: var(--r-input) !important;
  box-shadow: 0 8px 20px rgba(47,107,237,.32);
  transition: filter .14s, box-shadow .14s, transform .06s;
}
.wc-block-components-checkout-place-order-button:hover:not(:disabled),
.wp-block-woocommerce-checkout-actions-block .wc-block-components-button:hover:not(:disabled),
#place_order:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: 0 10px 26px rgba(47,107,237,.40);
}
.wc-block-components-checkout-place-order-button:active:not(:disabled),
#place_order:active:not(:disabled) { transform: translateY(1px); }

/* ==========================================================================
   Hide WooCommerce Blocks core checkout elements not wanted on this store:
   the "Add a note to your order" step, and the "By proceeding with your
   purchase you agree to..." terms text under the Place Order button.
   ========================================================================== */
.wc-block-checkout__order-notes,
.wc-block-checkout__terms {
  display: none !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 480px) {
  .bix-row--expiry { grid-template-columns: 1fr 1fr 1fr; }
}