/* VUELING · LIGHT — minimal single-card checkout (Seamless). Vueling brand. */
*{ box-sizing:border-box; }
:root{ --ink:#1d1d1f; --muted:#6b7280; --line:#e4e7ec; --yellow:#FFF000; --yellow-press:#E6D800; }
html,body{ margin:0; min-height:100%; }
body{
  font-family:'Archivo',system-ui,sans-serif; color:var(--ink);
  background:
    radial-gradient(820px 460px at 14% -8%, #e9f3ff 0%, transparent 55%),
    radial-gradient(700px 460px at 100% 0%, #fffbe0 0%, transparent 50%),
    #eef2f6;
  display:flex; align-items:center; justify-content:center; padding:40px 18px; min-height:100vh;
}
.vlogo{ display:inline-flex; align-items:flex-end; font-weight:800; letter-spacing:-.6px; line-height:1; color:var(--ink); }
.vlogo i{ width:.32em; height:.32em; border-radius:50%; background:var(--yellow); margin-left:.12em; margin-bottom:.1em; }

.back{ position:fixed; top:18px; left:20px; text-decoration:none; color:var(--muted); font-size:13px; font-weight:700; }
.back:hover{ color:var(--ink); }
.tag{ position:fixed; top:18px; right:20px; font-size:11px; font-weight:800; letter-spacing:.4px; color:var(--ink); background:var(--yellow); padding:6px 12px; border-radius:20px; }

.card{ width:100%; max-width:432px; background:#fff; border:1px solid var(--line); border-radius:22px; padding:30px 30px 26px; box-shadow:0 24px 70px rgba(20,40,80,.12); }
.brand .vlogo{ font-size:26px; }
h1{ font-size:22px; margin:22px 0 4px; letter-spacing:-.4px; }
.sub{ color:var(--muted); font-size:13.5px; margin:0 0 20px; }

.order{ display:flex; align-items:center; gap:13px; padding:14px; border:1px solid var(--line); border-radius:14px; background:#fafbfc; margin-bottom:22px; }
.order .ic{ width:40px; height:40px; border-radius:10px; background:var(--yellow); display:flex; align-items:center; justify-content:center; color:var(--ink); flex:0 0 auto; }
.order .ic svg{ width:21px; height:21px; }
.order .t{ flex:1; } .order .t b{ display:block; font-size:14.5px; } .order .t span{ font-size:12.5px; color:var(--muted); }
.order .amt{ font-weight:800; font-size:16px; }

#fields-host{ min-height:54px; margin-bottom:6px; }
.lbl{ font-size:12px; font-weight:700; color:var(--muted); margin:0 0 8px; }

.ph-note{ font-size:11.5px; color:#8a93a0; margin:0 0 10px; display:flex; align-items:center; gap:6px; }
.ph-note::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--yellow); flex:0 0 auto; }
.ph-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ph-field{ border:1px solid var(--line); border-radius:12px; padding:9px 13px; background:#fafbfc; }
.ph-field.ph-wide{ grid-column:1 / -1; }
.ph-field label{ display:block; font-size:10.5px; font-weight:700; color:var(--muted); margin-bottom:3px; }
.ph-field .ph-val{ font-size:14.5px; font-weight:600; color:#c3c9d2; letter-spacing:.3px; }

.terms{ display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:var(--muted); margin:16px 0 4px; cursor:pointer; }
.terms input{ width:16px; height:16px; margin-top:1px; accent-color:var(--ink); }
.terms a{ color:#1F7AE0; }
#card-banner{ margin:12px 0 0; padding:10px 12px; border-radius:10px; background:#fbe9e7; color:#b3402a; font-size:12.5px; font-weight:600; }

#paybtn{ margin-top:18px; width:100%; border:0; border-radius:30px; padding:15px; cursor:pointer; background:var(--yellow); color:var(--ink); font:800 15.5px 'Archivo',sans-serif; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 8px 22px rgba(255,224,0,.5); transition:transform .12s, background .12s; }
#paybtn:hover{ transform:translateY(-1px); background:var(--yellow-press); }
.secure{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:16px; font-size:11.5px; color:#9aa3ae; }
.secure svg{ width:13px; height:13px; } .secure b{ color:var(--ink); }