/* VUELING · EDITORIAL — premium two-column checkout (Secure Fields). Vueling brand. */
*{ box-sizing:border-box; }
:root{ --ink:#1d1d1f; --muted:#8a8f98; --line:#e7e9ed; --yellow:#FFF000; --yellow-press:#E6D800; --dark:#1a1b1e; }
html,body{ margin:0; min-height:100%; }
body{ font-family:'Archivo',system-ui,sans-serif; color:var(--ink); background:#fff; }
.wrap{ display:grid; grid-template-columns:1.05fr 1fr; min-height:100vh; }
@media (max-width:880px){ .wrap{ grid-template-columns:1fr; } }

.vlogo{ display:inline-flex; align-items:flex-end; font-weight:800; letter-spacing:-.6px; line-height:1; }
.vlogo i{ width:.32em; height:.32em; border-radius:50%; background:var(--yellow); margin-left:.12em; margin-bottom:.1em; }

/* ---- left editorial panel ---- */
.left{
  position:relative; color:#fff; padding:50px 56px; display:flex; flex-direction:column; justify-content:space-between;
  background:
    radial-gradient(640px 360px at 88% 4%, rgba(255,240,0,.16), transparent 58%),
    radial-gradient(600px 460px at 0% 100%, rgba(255,240,0,.07), transparent 55%),
    var(--dark);
  overflow:hidden;
}
.left .back{ color:rgba(255,255,255,.7); text-decoration:none; font-size:13px; font-weight:700; }
.left .back:hover{ color:#fff; }
.left .vlogo{ font-size:30px; color:#fff; margin-top:26px; }
.lede{ margin:auto 0; }
.lede h1{ font-weight:800; font-size:48px; line-height:1.02; letter-spacing:-1.5px; margin:0 0 18px; }
.lede h1 .hl{ color:var(--yellow); }
.lede p{ color:rgba(255,255,255,.72); font-size:15px; max-width:380px; line-height:1.6; margin:0; }
.summary{ border-top:1px solid rgba(255,255,255,.16); padding-top:22px; }
.summary .row{ display:flex; justify-content:space-between; font-size:14px; padding:7px 0; color:rgba(255,255,255,.8); }
.summary .row.total{ border-top:1px solid rgba(255,255,255,.16); margin-top:8px; padding-top:14px; font-size:18px; color:#fff; font-weight:700; }
.summary .row.total b{ color:var(--yellow); }
.tag{ position:absolute; top:50px; right:56px; font-size:11px; font-weight:800; letter-spacing:.5px; color:var(--ink); background:var(--yellow); padding:6px 12px; border-radius:20px; }

/* ---- right payment panel ---- */
.right{ display:flex; align-items:center; justify-content:center; padding:54px 48px; }
.pay{ width:100%; max-width:420px; }
.pay h2{ font-size:22px; margin:0 0 4px; letter-spacing:-.3px; }
.pay .sub{ color:var(--muted); font-size:13.5px; margin:0 0 24px; }

.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field-grid .fld-wide{ grid-column:1 / -1; }
.fld{ display:flex; align-items:center; gap:10px; min-width:0; min-height:54px; padding:0 14px; border:1px solid var(--line); border-radius:12px; background:#fbfbfc; transition:border-color .14s, box-shadow .14s; }
.fld.focus{ border-color:var(--ink); box-shadow:0 0 0 3px rgba(255,240,0,.45); }
.fld.err{ border-color:#dc2626; }
.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 .sf-host{ flex:1; height:54px; display:flex; align-items:center; }
.fld .sf-host iframe{ width:100%!important; height:100%!important; border:0; background:transparent; }
.fld input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font:600 15px 'Archivo',sans-serif; color:var(--ink); height:54px; }
.fld input::placeholder{ color:var(--muted); }

.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(--ink); }
.terms a{ color:var(--ink); }
#card-banner{ margin-top:12px; padding:10px 12px; border-radius:10px; background:#fbe9e7; color:#b3402a; font-size:12.5px; font-weight:600; }

#paybtn{ margin-top:20px; width:100%; border:0; border-radius:30px; padding:16px; cursor:pointer; background:var(--yellow); color:var(--ink); font:800 15px 'Archivo',sans-serif; letter-spacing:.2px; display:flex; align-items:center; justify-content:center; gap:8px; transition:background .14s; }
#paybtn:hover{ 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; }