/* Visual polish layer. Loaded last; delete this file and its <link> in App.razor to revert. */
:root{
  --radius:16px;
  --radius-sm:12px;
  --shadow-soft:0 1px 2px rgba(18,38,63,.04),0 8px 24px rgba(18,38,63,.07);
  --shadow-lift:0 2px 4px rgba(18,38,63,.05),0 14px 34px rgba(18,38,63,.12);
  --accent-soft:#fff4dc;
  --ring:0 0 0 4px rgba(217,150,43,.22);
}

html,body{
  background:
    radial-gradient(1100px 420px at 85% -80px,rgba(217,150,43,.10),transparent 70%),
    radial-gradient(900px 400px at 0% -60px,rgba(28,58,94,.10),transparent 70%),
    #F5F7FB;
  background-attachment:fixed;
}
body{font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}

/* Navigation */
.site-nav{border-bottom:0!important;border-radius:0;box-shadow:0 6px 22px rgba(18,38,63,.18)}
.site-nav .nav-inner{padding:11px 0}
.site-nav .brand{display:inline-flex;align-items:center;gap:8px;letter-spacing:.02em}
.site-nav .brand::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(217,150,43,.25)}
.site-nav .nav-link-item{transition:background .18s,color .18s}

/* Calculator header */
.topbar{
  position:relative;overflow:hidden;
  border-bottom:0!important;border-radius:0 0 26px 26px;
  padding:22px 20px 26px!important;
  background:
    radial-gradient(520px 220px at 10% 0%,rgba(217,150,43,.22),transparent 70%),
    linear-gradient(115deg,var(--primary),var(--primary-2))!important;
  box-shadow:0 10px 28px rgba(18,38,63,.16);
}
.topbar h1{font-size:clamp(22px,2.8vw,31px)!important;letter-spacing:0}
.vat-badge{backdrop-filter:blur(4px)}

/* Cards and sections */
.card{
  border-radius:var(--radius)!important;
  border-color:rgba(18,38,63,.07)!important;
  box-shadow:var(--shadow-soft)!important;
  transition:box-shadow .2s,transform .2s;
}
.section{padding:18px!important}
.section-head{margin-bottom:14px!important}
.step{border-radius:11px!important;box-shadow:0 3px 8px rgba(18,38,63,.18)}
.sub-title::before{border-radius:3px;background:linear-gradient(180deg,var(--accent),#f0b94f)}

/* Inputs */
input,select{
  border-radius:var(--radius-sm)!important;
  border-color:#cdd5e1!important;
  background:#fbfcfe!important;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
input:hover,select:hover{border-color:#aab6c8!important}
input:focus,select:focus{border-color:var(--accent)!important;background:#fff!important;box-shadow:var(--ring)!important}

/* Buttons */
.btn{
  border-radius:var(--radius-sm)!important;
  transition:transform .15s,box-shadow .15s,background .15s,border-color .15s;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(18,38,63,.14)}
.btn:active{transform:none;box-shadow:none}
.btn.primary,.btn-primary{
  background:linear-gradient(135deg,var(--primary-2),var(--primary))!important;
  border-color:var(--primary)!important;
  box-shadow:0 4px 12px rgba(18,38,63,.22);
}

/* Segmented options */
.seg{border-radius:var(--radius-sm)!important;border-color:#cdd5e1!important}
.seg:hover{transform:translateY(-1px)}
.seg.on{background:linear-gradient(135deg,var(--primary-2),var(--primary))!important;box-shadow:0 4px 12px rgba(18,38,63,.22)}

/* Stepper */
.step-item{border-radius:14px!important;border-color:rgba(18,38,63,.08)!important;box-shadow:var(--shadow-soft);transition:box-shadow .18s,transform .18s,border-color .18s}
.step-item:hover{transform:translateY(-1px);box-shadow:var(--shadow-lift)}
.step-item.current{background:var(--accent-soft)}

/* Result panel */
.results{border-top:0!important}
.result-head{background:linear-gradient(115deg,var(--primary),var(--primary-2))!important}
.final-card{
  background:linear-gradient(135deg,#f3b950,var(--accent))!important;
  border-radius:16px!important;
  box-shadow:0 10px 24px rgba(217,150,43,.35);
  padding:18px!important;
}
.final-card.empty{background:var(--sand)!important;box-shadow:none}
.duty-box,.rates-note,.currency-card,.fixed-list,.empty-state{border-radius:14px!important}
.duty-box.ready{background:var(--accent-soft)!important}

@media(min-width:851px){
  .results{border-radius:var(--radius)!important;overflow:auto}
  .result-head{border-radius:var(--radius) var(--radius) 0 0}
}

/* Mobile bar */
.mobile-bar{border-top:0!important;border-radius:20px 20px 0 0;box-shadow:0 -8px 24px rgba(18,38,63,.22)}

/* Login and profile cards */
.auth-card{
  border-top:0!important;border-radius:22px!important;
  box-shadow:var(--shadow-lift)!important;
  padding:30px 26px!important;
  position:relative;overflow:hidden;
}
.auth-card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--primary-2),var(--accent))}
.auth-card h1{margin-top:6px}

/* Gentle entrance */
@keyframes fz-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.calc-screen .form-column>*,.auth-card{animation:fz-rise .35s ease both}
.calc-screen .form-column>*:nth-child(2){animation-delay:.05s}
.calc-screen .form-column>*:nth-child(3){animation-delay:.1s}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
@media print{
  html,body{background:#fff!important}
  .calc-screen .form-column>*,.auth-card{animation:none!important}
}