/* VUELING · BOLD — energetic dark app-style checkout (Headless). Vueling brand. */
*{ box-sizing:border-box; }
:root{ --yellow:#FFF000; --yellow-press:#E6D800; --ink:#1d1d1f; --txt:#f3f4f2; --muted:#9a9d96; }
html,body{ margin:0; min-height:100%; }
body{
  font-family:'Archivo',system-ui,sans-serif; color:var(--txt);
  background:
    radial-gradient(560px 420px at 12% 6%, rgba(255,240,0,.22), transparent 58%),
    radial-gradient(520px 420px at 92% 24%, rgba(255,240,0,.12), transparent 58%),
    radial-gradient(680px 520px at 70% 112%, rgba(255,240,0,.10), transparent 60%),
    #161618;
  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:#fff; }
.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:#fff; }
.tag{ position:fixed; top:18px; right:20px; font-size:11px; font-weight:800; letter-spacing:.5px; color:var(--ink); background:var(--yellow); padding:6px 12px; border-radius:20px; }

.card{
  width:100%; max-width:432px; border-radius:26px; padding:30px 28px 26px;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(14px); box-shadow:0 30px 90px rgba(0,0,0,.55);
}
.brand .vlogo{ font-size:26px; }
h1{ font-size:25px; margin:20px 0 4px; letter-spacing:-.6px; }
.sub{ color:var(--muted); font-size:13.5px; margin:0 0 22px; }

.trip{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:16px; margin-bottom:22px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); }
.trip .ic{ width:42px; height:42px; border-radius:12px; background:var(--yellow); display:flex; align-items:center; justify-content:center; color:var(--ink); flex:0 0 auto; }
.trip .ic svg{ width:22px; height:22px; }
.trip .t{ flex:1; } .trip .t b{ display:block; font-size:14.5px; } .trip .t span{ font-size:12px; color:var(--muted); }
.trip .amt{ font-weight:800; font-size:18px; color:var(--yellow); }

.lbl{ font-size:12px; font-weight:800; color:var(--muted); letter-spacing:.4px; margin:0 0 10px; text-transform:uppercase; }

.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field-grid .fld-wide{ grid-column:1 / -1; }
.fld{ display:flex; align-items:center; gap:10px; min-width:0; min-height:54px; padding:0 16px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); transition:border-color .14s, box-shadow .14s; }
.fld:focus-within{ border-color:var(--yellow); box-shadow:0 0 0 3px rgba(255,240,0,.25); }
.fld .lead{ width:20px; height:20px; color:var(--muted); flex:0 0 auto; }
.fld .trail{ width:18px; height:18px; color:var(--muted); margin-left:auto; flex:0 0 auto; }
.fld input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font:600 15px 'Archivo',sans-serif; color:var(--txt); height:54px; letter-spacing:.3px; }
.fld input::placeholder{ color:var(--muted); font-weight:500; }

.terms{ display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:var(--muted); margin:18px 0 2px; cursor:pointer; }
.terms input{ width:16px; height:16px; margin-top:1px; accent-color:var(--yellow); }
.terms a{ color:var(--yellow); }
#card-banner{ margin-top:12px; padding:10px 12px; border-radius:10px; background:rgba(255,240,0,.10); border:1px solid rgba(255,240,0,.4); color:#fce98a; font-size:12.5px; }

#paybtn{ margin-top:20px; width:100%; border:0; border-radius:30px; padding:16px; cursor:pointer; background:var(--yellow); color:var(--ink); font:800 16px 'Archivo',sans-serif; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 12px 40px rgba(255,240,0,.4); 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:var(--muted); }
.secure svg{ width:13px; height:13px; } .secure b{ color:#e7e9e2; }