/* =========================================================
   WIZARD — CORE LAYOUT
   ========================================================= */

.wiz-plan-title {
	display: block;
    text-align: center;
    width: 100%;
	text-transform:uppercase; font-weight:700; letter-spacing:.3px;
	line-height: 30px;
}

.wiz-wrap{
  width:100%;
  max-width:none;
  margin:0;
  padding:clamp(12px,3vw,24px);
  box-sizing:border-box;
  overflow-x:hidden;
}
.wiz-left{ width:100%; }

.wiz-topbar{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.wiz-topbar h2{ margin:0; font-size:clamp(1.25rem,2.2vw,2rem); }
.wiz-topbar .wiz-back[disabled]{ opacity:.5; cursor:not-allowed; }

.wiz-row{ display:flex; flex-direction:column; gap:6px; margin:10px 0; }

/* Back button */
.wiz-back{
  -webkit-appearance:none; appearance:none;
  border:1px solid rgba(0,0,0,.14);
  background:#fff; color:#111;
  padding:10px 14px 10px 38px;
  border-radius:999px;
  font-size:14px; font-weight:600; line-height:1;
  display:inline-flex; align-items:center; gap:8px;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  position:relative;
  transition:background .15s,border-color .15s,box-shadow .15s,transform .04s;
}
.wiz-back::before{
  content:"←";
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  font-size:16px; line-height:1; opacity:.9;
}
.wiz-back:hover{ background:#fafafa; border-color:rgba(0,0,0,.2); box-shadow:0 2px 6px rgba(0,0,0,.06); }
.wiz-back:active{ transform:translateY(1px); }
.wiz-back:focus-visible{ outline:2px solid #111; outline-offset:2px; }
.wiz-back[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; box-shadow:none; }
.wiz-back.wiz-back--ghost{ background:transparent; border-color:transparent; box-shadow:none; }
.wiz-back.wiz-back--ghost:hover{ background:rgba(0,0,0,.04); }

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .wiz-back{ transition:none; }
}

/* Compact back button */
@media (max-width:400px){
  .wiz-back{ padding:9px 12px 9px 34px; font-size:13px; }
  .wiz-back::before{ left:12px; font-size:15px; }
}

/* =========================================================
   STEP 1 — CARRIERS
   ========================================================= */
.wiz-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:50px;
  justify-content:center;
  max-width:1000px;
  margin:0 auto;
}
.wiz-card{
  padding-top:10px;
  max-width:110px;
  width:100%;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-align:center;
  background:transparent !important;
  color:#000 !important;
  text-transform:uppercase; font-weight:600;
  border:0;
}
button.wiz-card.wiz-carrier{ transition:transform .3s ease; }
button.wiz-card.wiz-carrier:hover{ transform:scale(1.1); cursor:pointer; }
.wiz-card:hover{ box-shadow:0 2px 10px rgba(0,0,0,.06); }
.wiz-card:active{ transform:scale(.99); }

.wiz-card strong{ display:block; font-size:1rem; line-height:1.2; }

.wiz-actions{ margin-top:16px; display:flex; gap:12px; flex-wrap:wrap; }
.wiz-actions .wiz-next:disabled{ opacity:.4; cursor:not-allowed; }

/* Elevated tile look on step 1 */
.wiz-cards--elevated .wiz-carrier .wiz-card-face{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:4px;
  padding:10px 0px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  transition:transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.wiz-cards--elevated .wiz-carrier:hover .wiz-card-face{
  transform:translateY(-2px);
  box-shadow:0 12px 36px rgba(0,0,0,.12);
}
.wiz-carrier.active .wiz-card-face{ border-color:#111; box-shadow:0 12px 36px rgba(0,0,0,.16); }

/* Carrier search */
.wiz-searchbar{ margin:10px 0 16px; }
#wiz-carrier-search{
  width:100%; max-width:20%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  color:#fff; border-radius:12px; padding:12px 14px; outline:none;
}
#wiz-carrier-search::placeholder{ color:rgba(255,255,255,.8); }

/* =========================================================
   STEP 2 — PICKER (Brand + Phone + Tabs + Plans)
   ========================================================= */
/* Shell gradient for steps 1 & 2 */
.wiz-step--onramp,
.wiz-step--picker{
  --bg:#0f1220;
  background:
    radial-gradient(1200px 600px at 80% -10%, #2a2f5a 0%, transparent 60%),
    radial-gradient(900px 400px at -10% 20%, #5c5f92 0%, transparent 55%),
    var(--bg);
  border-radius:16px;
  padding:12px;
}
.wiz-step--onramp .wiz-topbar h2,
.wiz-step--picker .wiz-topbar h2{ color:#fff; }

/* Progress */
.wiz-progress{ display:flex; align-items:center; gap:10px; margin:6px 0 16px; color:#dfe3f0; }
.wiz-progress-bar{ flex:1; height:6px; background:rgba(255,255,255,.15); border-radius:999px; overflow:hidden; }
.wiz-progress-bar span{ display:block; height:100%; background:#ffd54a; }

/* Force gradient to show (theme-proof) */
.wiz-wrap .wiz-step--onramp,
.wiz-wrap .wiz-step--picker{
  position:relative; isolation:isolate;
  background:transparent !important;
  overflow:visible;
  margin:12px 0; min-height:220px;
}
.wiz-wrap .wiz-step--onramp::before,
.wiz-wrap .wiz-step--picker::before{
  content:"";
  position:absolute; z-index:-1; inset:-12px; border-radius:22px;
  background:
    radial-gradient(1200px 600px at 80% -10%, #2a2f5a 0%, transparent 60%),
    radial-gradient(900px 400px at -10% 20%, #5c5f92 0%, transparent 55%),
    #0f1220;
}

/* Sticky brand pane + grid */
.wiz-brand-card{ min-height:240px; }
:root{ --sticky-offset:64px; }
.wiz-brand{ top:var(--sticky-offset); }
#wiz-carrier-logo{ display:block; width:100%; max-height:220px; object-fit:contain; }

.wiz-wrap,
.wiz-left,
.wiz-step[data-step="2"],
.wiz-step2-grid{ overflow:visible !important; }
.wiz-step[data-step="2"] *{ transform:none !important; filter:none !important; perspective:none !important; contain:initial !important; }

/* Brand card */
.wiz-brand-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  display:flex; flex-direction:column; gap:10px;
}
.wiz-brand-meta{ margin-top:auto; }
.wiz-brand-name{ font-weight:800; font-size:1.1rem; }

/* Fields */
.wiz-fieldgrid{ display:grid; grid-template-columns:1fr 180px; gap:12px; }
.wiz-field label{ font-weight:600; margin-bottom:6px; display:block; }
.wiz-step--picker .wiz-field label{ color:#fff; } /* readable over dark shell */
.wiz-field input{
  border:1px solid rgba(0,0,0,.15);
  border-radius:12px; padding:12px 14px; outline:none;
  transition: box-shadow .15s, border-color .15s;
}
.wiz-field input:focus{ border-color:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08); }

/* Tabs */
.wiz-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 14px; text-transform:uppercase; }
.wiz-tab{
  background:#fff; border:1px solid rgba(0,0,0,.12);
  border-radius:20px; padding:8px 14px; cursor:pointer; font-weight:600;
}
.wiz-tab.active{ outline:2px solid #111; background:#ffd54a; border-color:#111; }

/* Plan grid */
#wiz-plan-list{ display:grid; grid-template-columns:1fr; gap:14px;color:white; }
@media (min-width:640px){ #wiz-plan-list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:992px){ #wiz-plan-list{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* Plan card — default (closed = dark); selected (open) = light */
.wiz-plan{
  border:none; border-radius:12px; overflow:hidden;
  transition: background-color .24s, box-shadow .24s, border-color .24s;
}
.wiz-plan-head {
  display: flex;
  justify-content: center; /* centers horizontally */
  align-items: center;     /* centers vertically if needed */
  width: 100%;             /* make button span full width */
  text-align: center;      /* ensures text inside is centered */
}

.wiz-plan-head:focus{ outline:0 !important; }

.wiz-plan-desc[hidden]{ display:none !important; }
.wiz-plan-desc{ display:none; padding:12px 16px 16px; }

/* Closed cards (dark) */
.wiz-plan-list--cards .wiz-plan{
  background:#0f1220 !important;
  color:#fff !important;
  border-radius:30px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
/* Selected (open) card (light) */
.wiz-plan.selected{
  background:#fff !important; color:#111 !important;
  border-color:#111 !important;
  box-shadow:0 8px 24px rgba(0,0,0,.12) !important;
}
/* Description always readable on white */
.wiz-plan .wiz-plan-desc{ background:#fff !important; color:#111 !important; }

/* Action button in plan */
.wiz-actions .wiz-next{
  width:100%; border:none; border-radius:10px; padding:10px 12px;
  background:#111; color:#fff; cursor:pointer;
  transition: transform .06s, box-shadow .15s;
}
.wiz-actions .wiz-next:hover{ box-shadow:0 6px 18px rgba(0,0,0,.18); transform:translateY(-1px); }

/* Make body text in step 2 readable where needed */
.wiz-step--onramp .wiz-cards,
.wiz-step--picker .wiz-step2-main{ color:#000; }

/* =========================================================
   STEP 3 — SUMMARY & CHECKOUT
   ========================================================= */
.wiz-step--pay{
  --bg:#0f1220; --card:#ffffff; --muted:rgba(0,0,0,.55); --ring:#111; --brand:#111;
  background:
    radial-gradient(1200px 600px at 80% -10%, #2a2f5a 0%, transparent 60%),
    radial-gradient(900px 400px at -10% 20%, #5c5f92 0%, transparent 55%),
    var(--bg);
  border-radius:16px; padding:12px;
}
.wiz-step--pay .wiz-topbar h2{ color:#fff; }

/* Progress (reuse) */
.wiz-review-grid{ display:grid; grid-template-columns:1fr; gap:20px; align-items:start; }
.wiz-review-grid--fancy{ gap:28px; }

.wiz-summary, .wiz-checkout{
  background:#fff; border:1px solid rgba(0,0,0,.12);
  border-radius:12px; padding:14px;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  min-width:0; color:#000;
}
.wiz-sum-head{ display:flex; align-items:center; justify-content:space-between; color:#000; }
.wiz-sum-body div{ margin:6px 0; }

.wiz-summary--receipt{
  background:var(--card);
  border:1px solid rgba(0,0,0,.06);
  backdrop-filter:saturate(120%) blur(2px);
}
.wiz-sum-head h3{ margin:0; }
.wiz-sum-head button{
  border-radius:999px; padding:8px 12px; background:#f6f6f6;
  border:1px solid rgba(0,0,0,.08); cursor:pointer;
}
.wiz-rowline,.wiz-totalline{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 0; font-size:15px;
}
.wiz-total{ font-size:1.25rem; letter-spacing:.3px; }
.wiz-div{ border:0; height:1px; background:rgba(0,0,0,.08); margin:8px 0; }
.wiz-perks{ margin-top:12px; padding-left:18px; color:#222; }
.wiz-perks li{ margin:6px 0; }

/* Checkout card */
.wiz-checkout--card{
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:16px; padding:18px;
  box-shadow:0 6px 24px rgba(0,0,0,.08);
}
.wiz-trust{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.wiz-lock{ font-size:20px; }

.wiz-row input[type="text"],
.wiz-row input[type="email"]{
  border:1px solid rgba(0,0,0,.15);
  border-radius:12px; padding:12px 14px; outline:none;
  transition: box-shadow .15s, border-color .15s;
}
.wiz-row input:focus{ border-color:#111; box-shadow:0 0 0 4px rgba(17,17,17,.08); }
.wiz-hint{ color:var(--muted); }

.wiz-payments--cards{ display:flex; gap:10px; flex-wrap:wrap; }
.wiz-pay-card{ user-select:none; cursor:pointer; }
.wiz-pay-card input{ display:none; }
.wiz-pay-face{
  display:inline-flex; align-items:center; gap:8px; min-width:120px; justify-content:center;
  border:1px solid rgba(0,0,0,.15); background:#fff; color:#111;
  padding:10px 14px; border-radius:10px;
  transition: transform .06s, box-shadow .15s, border-color .15s;
}
.wiz-pay-card input:checked + .wiz-pay-face{
  border-color:#111; box-shadow:0 4px 16px rgba(0,0,0,.08); transform:translateY(-1px);
}

/* Triple inputs */
.wiz-row--triple{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }

/* Card brand chip */
.wiz-ccwrap{ position:relative; }
.wiz-card-brand{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  padding:6px 10px; border-radius:999px; font-size:12px;
  border:1px solid rgba(0,0,0,.1); background:#f6f7f9; color:#333;
}

/* Pay button */
.wiz-paybtn{
  width:100%; border:none; border-radius:12px; padding:14px;
  background:#111; color:#fff; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  transition: transform .06s, box-shadow .15s, opacity .15s;
  margin-top:6px;
}
.wiz-paybtn:hover{ box-shadow:0 10px 28px rgba(0,0,0,.18); transform:translateY(-1px); }
.wiz-paybtn[disabled]{ opacity:.65; cursor:not-allowed; }
.wiz-paybtn__spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  animation:wizspin .8s linear infinite; display:none;
}
.wiz-paybtn.is-loading .wiz-paybtn__spinner{ display:inline-block; }
.wiz-paybtn.is-loading .wiz-paybtn__label{ opacity:.8; }
@keyframes wizspin{ to{ transform:rotate(360deg); } }

.wiz-terms{ margin-top:8px; color:#555; text-align:center; }
.wiz-terms a{ color:#111; text-decoration:underline; }
.wiz-step--pay .wiz-summary,
.wiz-step--pay .wiz-checkout{ color:#000; }

/* =========================================================
   RESPONSIVE / MISC
   ========================================================= */
/* Step 2 grid columns + Step 3 columns */
@media (min-width:768px){
  .wiz-step2-grid{
    display:grid;
    grid-template-columns:minmax(260px,360px) minmax(0,1fr);
    gap:24px; align-items:start;
  }
  #wiz-carrier-logo{ max-height:240px; }
  .wiz-review-grid{ grid-template-columns:1fr 1fr; gap:24px; }
  .wiz-brand{ position:sticky; align-self:start; z-index:0; }
}
@media (min-width:1100px){
  .wiz-step2-grid{
    grid-template-columns:minmax(300px,420px) minmax(0,1fr);
    gap:28px;
  }
  #wiz-carrier-logo{ max-height:260px; }
  .wiz-review-grid{ 
      grid-template-columns: 1fr 1fr; /* summary left, checkout right */
    gap: 28px;
  }
}

/* Mobile specifics */
@media (max-width:767px){
  .wiz-brand{ position:static; top:auto; z-index:auto; }
  #wiz-carrier-logo{ max-height:200px; width:100%; }
}
@media (max-width:640px){
  .wiz-fieldgrid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .wiz-row--triple{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .wiz-step--pay .wiz-row--triple{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:400px){
  .wiz-wrap{ padding:12px; }
  #wiz-carrier-logo{ max-height:180px; }
}

/* Tighten header and cart layouts on small screens (optional theme guards) */
@media (max-width:768px){
  .wp-block-group.is-nowrap.wp-block-group-is-layout-flex,
  .wp-block-navigation.is-layout-flex,
  .wp-block-group.is-layout-flex{ flex-wrap:wrap !important; gap:8px; }
  .wp-block-group.alignwide.is-layout-flex{ align-items:center; }
  .wp-block-navigation{ margin-left:auto; min-width:0; }
  .wp-block-woocommerce-mini-cart,
  [data-block-name="woocommerce/customer-account"]{ min-width:0; max-width:100%; }
}
@media (max-width:420px){
  .wp-block-woocommerce-mini-cart,
  [data-block-name="woocommerce/customer-account"]{ display:none !important; }
  .wp-block-woocommerce-mini-cart .wc-block-mini-cart__button{ transform:scale(0.9); }
  [data-block-name="woocommerce/customer-account"] .wc-block-customer-account__account-icon{ width:20px; height:20px; }
}

/* Step 3 overflow safety */
.wiz-step--pay .wiz-row--triple{ min-width:0; }
.wiz-step--pay .wiz-row--triple input,
.wiz-step--pay .wiz-row input{ width:100%; max-width:100%; box-sizing:border-box; }
.wiz-step--pay .wiz-checkout{ min-width:0; overflow-x:hidden; }
.wiz-step--pay .wiz-ccwrap{ position:relative; min-width:0; }
.wiz-step--pay .wiz-card-brand{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  white-space:nowrap; max-width:40%; overflow:hidden; text-overflow:ellipsis; pointer-events:none;
}

/* =========================================================
   END
   ========================================================= */

/* ===== Payment Card Preview (Step 3) ===== */
.wiz-card-preview{
  display:flex; justify-content:center; align-items:center;
  margin-bottom:14px;
}
.wiz-card-preview__stage{
  perspective: 1000px;   /* 3D depth for the spin */
}
.wiz-card-preview__stage img{
  width: clamp(200px, 40vw, 280px);
  height: auto;
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
  transition: transform .6s ease, box-shadow .3s ease, opacity .2s ease;
  will-change: transform;
}

/* One-shot spin animation when brand changes */
.wiz-card-preview__stage img.is-spinning{
  transform: rotateY(360deg);
}

/* Optional: subtle hover lift (desktop nicety) */
@media (hover:hover){
  .wiz-card-preview__stage img:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 48px rgba(0,0,0,.2);
  }
}

/* Dark background contexts */
.wiz-step--pay .wiz-card-preview__stage img{
  background: #fff;      /* so transparent PNGs look crisp */
}

/* If you want brand-tinted rims (optional) */
.wiz-card-preview__stage img.brand-visa{ outline: 3px solid rgba(0, 80, 220, .15); }
.wiz-card-preview__stage img.brand-mastercard{ outline: 3px solid rgba(230, 0, 30, .15); }
.wiz-card-preview__stage img.brand-amex{ outline: 3px solid rgba(0, 150, 190, .15); }

/* Overlay container */
.wiz-card-preview__stage {
  position: relative;
  display: inline-block;
}
.wiz-card-preview__stage > img {
  display: block;
  width: clamp(220px, 40vw, 280px); /* scales nicely */
  height: auto;
  border-radius: 16px;
}
.wiz-card-preview__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Card number */
.wiz-card-txt--number {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 58%;
  transform: translateY(-50%);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-weight: 600;
  font-size: 80%;           /* scale relative to container */
  letter-spacing: 0.12em;
  white-space: nowrap;
  text-align: center;
}

/* Cardholder name */
.wiz-card-txt--name {
  position: absolute;
  left: 12%;
  bottom: 18%;
  max-width: 70%;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-weight: 700;
  font-size: 60%;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Expiry date */
.wiz-card-txt--exp {
  position: absolute;
  left: 12%;
  bottom: 10%;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-weight: 600;
  font-size: 60%;
  opacity: .9;
}

/* Default colors */
.wiz-card-txt { color: #111; text-shadow: 0 1px 2px rgba(0,0,0,.12); }
/* Flip to white if brand background is dark */
.wiz-card-preview__stage.wiz-card--lighttext .wiz-card-txt {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,.35);
}

/* Default text for light cards */
.wiz-card-txt { color:#111; text-shadow:0 1px 2px rgba(0,0,0,.12); }

.wiz-field-error {
  color: #c62828;       /* red tone */
  font-size: 0.8rem;
  margin-top: 4px;
  display: none;        /* hidden by default */
}

/* Tiny validation badges shown on the card overlay */
.wiz-badge{
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .25em .5em;
  border-radius: 999px;
  background: #d32f2f;        /* red */
  color: #fff;
  font-size: 60%;              /* scales with card width */
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

/* Place near number (slightly above/right) */
.wiz-badge--num{
  top: 50%;
  right: 10%;
  transform: translateY(-120%);
}

/* Place near expiry (just to the right) */
.wiz-badge--exp{
  bottom: 11%;
  left: 46%;
}

/* Optional: gentle wiggle when first shown */
@keyframes wiz-warn {
  0% { transform: translateY(-120%) rotate(0deg); }
  35% { transform: translateY(-120%) rotate(-3deg); }
  70% { transform: translateY(-120%) rotate(3deg); }
  100% { transform: translateY(-120%) rotate(0deg); }
}
.wiz-badge--num.wiz-wiggle { animation: wiz-warn .35s ease; }

/* === Carrier grid: pack horizontally, no odd gaps === */
/* Carrier grid with tighter spacing */
.wiz-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 30px;                 /* smaller gap than before */
  justify-content: stretch;
  align-items: start;
  padding: 4px;              /* breathing room at container edges */
}

.wiz-card {
  max-width: none;
  width: 100%;
  padding: 8px;              /* minor internal padding */
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: transparent !important;
  border: 0;
}


/* Make the face stretch nicely inside the cell */
.wiz-cards--elevated .wiz-carrier .wiz-card-face{
  width: 100%;
  height: 100%;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Image should scale to the card width without overflow */
.wiz-card img{
  width: 100%;
  max-width: 140px;          /* visual cap if cell is wide */
  max-height: 140px;
  height: auto;
  object-fit: contain;
  display:block;
}

/* Optional: tidy the title so it wraps but doesn’t cause height jumps */
.wiz-card-title{
  display:block;
  text-align:center;
  word-break: break-word;
}

.wiz-pay-face {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wiz-pay-card input {
  display: none; /* hide radio buttons */
}

.wiz-pay-logo {
  height: 28px;     /* consistent logo size */
  width: auto;
  display: block;
}

.wiz-pay-card input:checked + .wiz-pay-face {
  border-color: #111;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transform: translateY(-1px);
}

.wiz-card-preview__stage img.brand-discover { outline: 3px solid rgba(255, 120, 0, .15); }

/* Pretty select (native, accessible) */
.wiz-select {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  width: 100%;
  max-width: 260px;                 /* adjust to your layout */
  height: 44px;
  padding: 0 40px 0 14px;           /* room for arrow on the right */
  border: 1px solid #e2e8f0;        /* slate-200 */
  border-radius: 10px;
  background-color: #fff;

  /* subtle inner shadow for depth */
  box-shadow: inset 0 1px 0 rgba(0,0,0,.02);
  font: 600 14px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #0f172a;                   /* slate-900 */

  /* Custom arrow (SVG data URI) */
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%235b6b7b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;

  transition: border-color .15s ease, box-shadow .15s ease, transform .02s ease;
}

.wiz-select:hover {
  border-color: #cbd5e1;            /* slate-300 */
}

.wiz-select:focus {
  outline: none;
  border-color: #6366f1;            /* indigo-500 */
  box-shadow: 0 0 0 3px rgba(99,102,241,.25);
}

.wiz-select:active {
  transform: translateY(0.5px);
}

/* Slightly smaller on narrow screens */
@media (max-width: 480px) {
  .wiz-select {
    max-width: 100%;
    height: 42px;
    font-size: 15px;
  }
}

/* Disabled options show muted tone inside the open list (supported by most modern browsers) */
.wiz-select option:disabled {
  color: #9ca3af;                   /* gray-400 */
}

/* Optional: label + helper alignment if you have them */
#wiz-months-help {
  display: inline-block;
  margin-left: 10px;
  color: #64748b;                    /* slate-500 */
  font-size: 12px;
  vertical-align: middle;
}

/* Dark-mode friendly defaults if your site has dark sections */
@media (prefers-color-scheme: dark) {
  .wiz-select {
    background-color: #0b0f14;
    color: #e5e7eb;
    border-color: #1f2937;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  }
  .wiz-select:hover { border-color: #334155; }
  .wiz-select:focus { box-shadow: 0 0 0 3px rgba(99,102,241,.35); }
}