/* ============================================================
   Carrier Setup — Variant A · "Premium Light / Cream"
   Elevated, trustworthy high-end SaaS for logistics.
   Refined off-white/cream card over a warm sunset photo.
   CSS only. Every original selector preserved.
   ============================================================ */

:root{
  /* Surfaces — warm cream paper */
  --card:#fbf8f3;
  --card-2:#fffdf9;
  --paper:#f4efe6;
  --inset:#f7f2e9;

  /* Ink */
  --ink:#241a12;
  --ink-soft:#473726;
  --muted:#7c6a54;

  /* Lines / hairlines */
  --line:#e7ddcd;
  --line-soft:#efe7d9;

  /* Warm sunset accent */
  --accent:#e2711d;
  --accent-d:#bd5a12;
  --accent-lo:#fbeada;
  --amber:#f59e0b;
  --ember:#e2560f;

  /* Semantic */
  --ok:#16a34a;
  --ok-bg:#e9f8ef;
  --warn:#b45309;
  --warn-bg:#fdf1dd;
  --err:#dc2626;

  /* Layered shadow tokens (warm-tinted) */
  --sh-1:0 1px 2px rgba(46,28,12,.06);
  --sh-2:0 4px 12px -4px rgba(46,28,12,.14);
  --sh-card:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 2px 8px rgba(46,28,12,.10),
    0 18px 40px -14px rgba(28,15,4,.42),
    0 44px 90px -30px rgba(20,10,2,.55);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0; min-height:100vh; color:var(--ink); background:#1a120a;
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; align-items:flex-start; justify-content:center; padding:64px 18px;
}
body.no-scroll{overflow:hidden}

/* ---- Background: sunset highway/truck PHOTO + dark warm overlay ---- */
.bg{
  position:fixed; inset:0; z-index:-1; overflow:hidden; background-color:#0a0e16;
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(255,176,92,.20) 0%, rgba(255,176,92,0) 55%),
    linear-gradient(180deg, rgba(22,13,6,.52) 0%, rgba(22,13,6,.24) 40%, rgba(10,7,4,.86) 100%),
    url(/bg.jpg);
  background-size:cover, cover, cover;
  background-position:center, center, center;
  background-repeat:no-repeat;
}
.bg-scene{display:none}

/* ---- Card ---- */
.card{
  position:relative;
  width:100%; max-width:560px;
  background:
    linear-gradient(180deg, var(--card-2) 0%, var(--card) 46%, var(--card) 100%);
  border:1px solid rgba(255,255,255,.65);
  border-radius:22px; padding:38px 38px 34px;
  animation:rise .55s cubic-bezier(.2,.7,.2,1) both;
  box-shadow:var(--sh-card);
}
/* Soft warm gradient halo behind the header/brand area */
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:148px;
  border-radius:22px 22px 0 0; pointer-events:none; z-index:0;
  background:
    radial-gradient(140% 120% at 12% 0%, rgba(226,113,29,.10) 0%, rgba(226,113,29,0) 60%),
    linear-gradient(180deg, rgba(255,238,221,.55) 0%, rgba(255,238,221,0) 100%);
}
.card > *{position:relative; z-index:1}

@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

/* ---- Brand ---- */
.brand{display:flex; align-items:center; gap:13px; margin-bottom:26px}
.logo{
  width:44px; height:44px; border-radius:13px;
  background:linear-gradient(135deg,#f9a23c 0%,#e2560f 100%);
  display:grid; place-items:center;
  box-shadow:0 6px 16px -4px rgba(226,86,15,.55), 0 1px 0 rgba(255,255,255,.4) inset;
}
.logo svg{width:24px; height:24px}
.brand-name{font-weight:680; font-size:16px; letter-spacing:-.01em; color:var(--ink)}
.brand-sub{
  color:var(--accent-d); font-size:11.5px; font-weight:650;
  text-transform:uppercase; letter-spacing:.12em; margin-top:1px;
}

/* ---- Steps ---- */
.steps{display:flex; gap:9px; margin-bottom:30px}
.step{
  display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:550;
  color:var(--muted); flex:1; padding-bottom:9px;
  border-bottom:2px solid var(--line);
  transition:color .2s, border-color .2s;
}
.step i{
  width:21px; height:21px; border-radius:50%; background:var(--paper); color:var(--muted);
  display:grid; place-items:center; font-style:normal; font-size:11px; font-weight:700;
  box-shadow:0 0 0 1px var(--line) inset; transition:.2s;
}
.step.active{color:var(--ink); border-bottom-color:var(--accent)}
.step.active i{
  background:linear-gradient(135deg,#f59e0b,#e2560f); color:#fff;
  box-shadow:0 4px 10px -3px rgba(226,86,15,.6);
}
.step.done{color:var(--ink-soft); border-bottom-color:var(--ok)}
.step.done i{background:var(--ok); color:#fff; box-shadow:0 4px 10px -3px rgba(22,163,74,.5)}

/* ---- Typography ---- */
h1{font-size:24px; line-height:1.2; margin:0 0 7px; letter-spacing:-.022em; color:var(--ink)}
.lead{color:var(--muted); margin:0 0 24px; max-width:46ch}

/* ---- Segmented control ---- */
.seg{
  display:flex; background:var(--inset); border:1px solid var(--line-soft);
  border-radius:12px; padding:4px; gap:4px; margin-bottom:20px;
  box-shadow:0 1px 2px rgba(46,28,12,.04) inset;
}
.seg-btn{
  flex:1; border:0; background:transparent; padding:10px; border-radius:9px;
  font:inherit; font-weight:600; color:var(--muted); cursor:pointer;
  transition:background .18s, color .18s, box-shadow .18s;
}
.seg-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.seg-btn:hover:not(.active){color:var(--ink-soft); background:rgba(255,255,255,.5)}
.seg-btn.active{
  background:var(--card-2); color:var(--ink);
  box-shadow:0 1px 3px rgba(46,28,12,.14), 0 0 0 1px rgba(231,221,205,.9);
}

/* ---- Fields ---- */
.field{display:block; margin-bottom:15px}
.field span{
  display:block; font-size:12px; color:var(--ink-soft); margin-bottom:7px;
  font-weight:600; letter-spacing:.005em;
}
.field input{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:11px;
  font:inherit; background:var(--card-2); color:var(--ink);
  box-shadow:0 1px 1px rgba(46,28,12,.03) inset;
  transition:border-color .16s, box-shadow .16s, background .16s;
}
.field input::placeholder{color:#b6a892}
.field input:hover{border-color:#d9cdb8}
.field input:focus{
  outline:0; border-color:var(--accent); background:#fff;
  box-shadow:0 0 0 4px rgba(226,113,29,.16), 0 1px 2px rgba(46,28,12,.05);
}
.field input:user-invalid{
  border-color:var(--err);
  box-shadow:0 0 0 4px rgba(220,38,38,.13);
}
.field input[readonly]{
  background:var(--inset); color:var(--muted); border-color:var(--line-soft);
  box-shadow:none; cursor:default;
}
.row{display:flex; gap:12px}
.row .field{flex:1}
.field.sm{flex:0 0 86px}

/* ---- Fieldset / legend ---- */
fieldset{border:0; padding:0; margin:0 0 8px}
legend{
  font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--accent-d);
  font-weight:700; margin-bottom:12px; padding-top:18px;
  border-top:1px solid var(--line-soft); width:100%;
}
fieldset:first-of-type legend{border-top:0; padding-top:2px}

/* ---- File inputs ---- */
.file{display:block; margin-bottom:13px}
.file span{
  display:block; font-size:12px; color:var(--ink-soft); margin-bottom:7px; font-weight:600;
}
.file input{
  width:100%; font:inherit; font-size:13px; color:var(--ink-soft);
  background:var(--inset); border:1px dashed var(--line); border-radius:11px;
  padding:10px 12px; cursor:pointer; transition:border-color .16s, background .16s;
}
.file input:hover{border-color:var(--accent); background:var(--accent-lo)}
.file input:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.file input::file-selector-button{
  font:inherit; font-weight:650; font-size:12.5px; color:#fff;
  background:linear-gradient(135deg,#f59e0b,#e2560f); border:0; border-radius:8px;
  padding:7px 13px; margin-right:12px; cursor:pointer;
  box-shadow:0 4px 10px -4px rgba(226,86,15,.5); transition:filter .16s;
}
.file input::file-selector-button:hover{filter:brightness(1.06)}

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0;
  border-radius:12px; padding:13px 18px; font:inherit; font-weight:650;
  letter-spacing:.005em; cursor:pointer;
  transition:background .16s, box-shadow .16s, transform .06s, opacity .16s;
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.btn.primary{
  background:linear-gradient(135deg,#f59e0b 0%,#e2560f 100%); color:#fff; width:100%;
  box-shadow:0 10px 24px -8px rgba(226,86,15,.6), 0 1px 0 rgba(255,255,255,.25) inset;
}
.btn.primary:hover{
  background:linear-gradient(135deg,#ea580c 0%,#c2410c 100%);
  box-shadow:0 14px 30px -8px rgba(226,86,15,.65), 0 1px 0 rgba(255,255,255,.25) inset;
}
.btn.ghost{
  background:var(--paper); color:var(--ink-soft);
  box-shadow:0 0 0 1px var(--line) inset;
}
.btn.ghost:hover{background:#ece3d4}
.btn[disabled]{opacity:.55; cursor:default; box-shadow:none}

.actions{display:flex; gap:12px; margin-top:10px}
.actions .ghost{flex:0 0 auto}
.actions .primary{flex:1}

/* ---- Spinner ---- */
.spinner{
  width:15px; height:15px; border:2px solid rgba(255,255,255,.5); border-top-color:#fff;
  border-radius:50%; animation:spin .6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- Error + badges ---- */
.error{color:var(--err); font-size:13px; font-weight:550; margin:0 0 14px}
.badge{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:650;
  padding:5px 11px; border-radius:999px; letter-spacing:.01em; white-space:nowrap;
}
.badge.ok{background:var(--ok-bg); color:var(--ok); box-shadow:0 0 0 1px rgba(22,163,74,.16) inset}
.badge.warn{background:var(--warn-bg); color:var(--warn); box-shadow:0 0 0 1px rgba(180,83,9,.16) inset}
#status-badge{margin-bottom:18px}

/* ---- Success step ---- */
.center{text-align:center}
.check{
  width:62px; height:62px; border-radius:50%; background:var(--ok-bg); color:var(--ok);
  font-size:31px; display:grid; place-items:center; margin:10px auto 20px;
  box-shadow:0 0 0 6px rgba(22,163,74,.08), 0 8px 22px -10px rgba(22,163,74,.5);
}
.ref{color:var(--muted); font-size:13px}
.ref strong{color:var(--ink-soft)}

/* ---- Footer ---- */
.foot{
  margin-top:28px; padding-top:18px; border-top:1px solid var(--line-soft);
  font-size:12px; color:var(--muted); text-align:center; letter-spacing:.01em;
}

/* ---- Confirmation modal ---- */
.modal{position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:20px}
.modal[hidden]{display:none}
.modal-backdrop{
  position:absolute; inset:0; background:rgba(20,11,4,.58);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  animation:fade .2s ease both;
}
.modal-card{
  position:relative; width:100%; max-width:430px;
  background:linear-gradient(180deg, var(--card-2) 0%, var(--card) 100%);
  border:1px solid rgba(255,255,255,.6); border-radius:20px;
  padding:30px 28px; text-align:center;
  box-shadow:0 30px 70px -20px rgba(20,10,2,.62), 0 1px 0 rgba(255,255,255,.6) inset;
  animation:pop .24s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes fade{from{opacity:0} to{opacity:1}}
@keyframes pop{from{opacity:0; transform:translateY(10px) scale(.97)} to{opacity:1; transform:none}}

.modal-icon{
  width:54px; height:54px; margin:0 auto 16px; border-radius:15px; color:var(--accent);
  background:linear-gradient(135deg,var(--accent-lo),#fdf0e1); display:grid; place-items:center;
  box-shadow:0 0 0 1px rgba(226,113,29,.14) inset, 0 6px 16px -8px rgba(226,86,15,.4);
}
.modal-icon svg{width:28px; height:28px}
.modal-card h2{font-size:20px; margin:0 0 7px; letter-spacing:-.015em; color:var(--ink)}
.modal-sub{color:var(--muted); font-size:13.5px; margin:0 0 20px}

/* ---- Carrier card inside modal ---- */
.carrier-card{
  text-align:left; border:1px solid var(--line); border-radius:15px;
  padding:17px 18px; margin-bottom:22px; background:var(--inset);
  box-shadow:0 1px 2px rgba(46,28,12,.04) inset;
}
.cc-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:13px}
.cc-name{font-weight:700; font-size:16px; letter-spacing:-.01em; color:var(--ink)}
.cc-rows{margin:0; display:grid; gap:10px}
.cc-rows>div{display:flex; gap:12px; font-size:13.5px}
.cc-rows dt{flex:0 0 64px; color:var(--muted); margin:0; font-weight:550}
.cc-rows dd{margin:0; font-weight:600; color:var(--ink-soft)}
.modal-actions{display:flex; gap:10px}
.modal-actions .ghost{flex:1}
.modal-actions .primary{flex:1.4}

/* ---- Responsive ---- */
@media(max-width:520px){
  body{padding:24px 12px}
  .card{padding:26px 22px}
  .card::before{height:120px}
  .row{flex-wrap:wrap}
  .field.sm{flex:1}
  .modal-actions{flex-direction:column-reverse}
}

/* ---- Reduced motion: kill transforms/animations, keep spinner ---- */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
  .card,
  .modal-backdrop,
  .modal-card{animation:none !important}
  .btn:active{transform:none}
  /* keep the spinner spinning */
  .spinner{animation:spin .6s linear infinite !important}
}