/* The card checkout modal -- Grade A's (static/style.css, "automatic renewal: the card
   on file"), in red. Everything is tokens, so the light theme comes out right without
   a second ruleset. The card fields themselves are MyFatoorah's iframe inside .mf-card:
   we give it room and style nothing inside it, because we cannot (see js/card-checkout.js
   for the style object the component takes from us). */

.modal-overlay{position:fixed;inset:0;background:rgba(5,8,14,.62);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px}
.modal-overlay.hidden{display:none}
.modal-card{position:relative;width:100%;max-width:380px;background:var(--panel);
  border:1px solid var(--line2);border-radius:16px;padding:26px 24px;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.modal-close{position:absolute;top:10px;right:14px;background:transparent;border:0;color:var(--mut);
  font-size:24px;line-height:1;cursor:pointer}
.modal-close:hover{color:var(--ink)}

/* Taller than most modals (three card rows + trust footer), so it scrolls inside the
   viewport instead of being clipped by the centred overlay. */
.card-card{max-width:460px;padding:24px 24px 20px;max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
.card-top{margin-bottom:14px}
.card-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;
  letter-spacing:.7px;text-transform:uppercase;color:var(--ok)}
.card-eyebrow svg{width:12px;height:12px}
.card-h{margin:8px 0 0;font-size:19px;font-weight:800;letter-spacing:-.3px}
.card-price{display:flex;align-items:baseline;gap:7px;margin-top:2px}
.card-price #cardAmount{font-size:30px;font-weight:800;letter-spacing:-.8px;line-height:1.15}
.card-per{font-size:13px;font-weight:600;color:var(--mut)}
.card-summary{border:1px solid var(--line);border-radius:12px;background:var(--panel2);
  padding:12px 14px;margin-bottom:14px}
.card-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13.5px}
.card-row b{font-weight:700;white-space:nowrap}
.card-row-sub{margin-top:5px;font-size:12.5px;line-height:1.45;color:var(--mut)}
.mf-card{min-height:200px;border:0;padding:0;background:transparent}
.card-msg{margin:8px 0 0;font-size:13px;color:var(--warn);min-height:18px}
.card-trust{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--mut)}
.card-trust-item{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.card-trust-item svg{width:14px;height:14px;color:var(--ok);flex:none}
.card-brands{display:inline-flex;gap:6px;flex:none}
.brand-pill{font-size:10px;font-weight:800;letter-spacing:.5px;padding:3px 7px;
  border:1px solid var(--line2);border-radius:6px;color:var(--ink);background:var(--panel)}
.card-fine{margin:10px 0 0;font-size:11.5px;line-height:1.5;color:var(--faint)}
.card-fine a{color:var(--acc2);font-weight:700}
@media (max-width:480px){
  .card-card{padding:20px 16px 16px}
  .card-trust{flex-direction:column;align-items:flex-start;gap:8px}
}