/* MoviePlanet Advertising — area inserzionista. Tema "Schermo e silenzio". */
:root{
  --paper:#FAFAF9;
  --ink:#101012;
  --ink-2:#55555C;
  --hair:#E6E5E2;
  --hair-2:#D8D7D3;
  --accent:#D8232A;
  --white:#FFFFFF;
  --ok:#1FA971;
  --warn:#B7791F;
  --err:#D8232A;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--accent)}
::selection{background:var(--accent);color:#fff}

/* topbar */
.topbar{border-bottom:1px solid var(--hair);background:var(--paper);position:sticky;top:0;z-index:10}
.topbar-in{max-width:1080px;margin:0 auto;padding:22px 32px;display:flex;align-items:center;justify-content:space-between}
.brand{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--ink)}
.brand .dot{color:var(--accent)}
.brand:hover{color:var(--ink)}
.nav{display:flex;align-items:center;gap:26px}
.nav a{font-size:14.5px;font-weight:500;color:var(--ink-2)}
.nav a:hover{color:var(--ink)}
.nav-user{font-size:13.5px;color:var(--ink-2);padding-left:6px;border-left:1px solid var(--hair)}
.nav-cta{color:var(--ink)!important;font-weight:600;border-bottom:1.5px solid var(--accent);padding-bottom:3px}
.btn-logout{color:var(--ink-2)!important;font-size:14px}

/* layout */
.container{max-width:680px;margin:0 auto;padding:56px 32px 90px}
.footer{border-top:1px solid var(--hair);color:var(--ink-2);font-size:13.5px}
.footer-in{max-width:1080px;margin:0 auto;padding:32px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

h1{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:clamp(30px,5vw,44px);
  letter-spacing:-.03em;line-height:1.05;margin:0 0 14px}
h2{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:22px;letter-spacing:-.02em;margin:34px 0 14px}
p.muted,.muted{color:var(--ink-2)}

/* card → riquadro chiaro con hairline */
.card{background:var(--white);border:1px solid var(--hair);border-radius:14px;padding:30px;margin-bottom:22px}

/* form */
label{display:block;margin:18px 0 7px;font-size:13.5px;font-weight:500;color:var(--ink-2)}
input,select{
  width:100%;padding:12px 14px;background:var(--white);
  border:1px solid var(--hair-2);border-radius:9px;color:var(--ink);font-size:15px;font-family:inherit;
}
input:focus,select:focus{outline:none;border-color:var(--ink)}
input[type=file]{padding:10px 12px;background:var(--paper)}

.btn-primary,button{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:0;border-radius:9px;
  background:var(--ink);color:#fff;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:15px;
  padding:13px 26px;margin-top:20px;transition:.18s;
}
.btn-primary:hover,button:hover{background:var(--accent);color:#fff}

/* flash */
.flash{padding:13px 16px;border-radius:9px;margin-bottom:18px;font-size:14.5px;border:1px solid var(--hair-2);background:var(--white)}
.flash-ok{border-color:#bfe7d4;background:#f2fbf6;color:#0c6b43}
.flash-warn{border-color:#ecd9a8;background:#fdf8ec;color:#8a5d12}
.flash-err{border-color:#f1c2c4;background:#fdf1f1;color:#a3161c}
.flash-info{border-color:var(--hair-2);background:var(--white);color:var(--ink-2)}

/* tabelle — hairline */
table{width:100%;border-collapse:collapse;margin-top:10px}
th,td{text-align:left;padding:13px 8px;border-bottom:1px solid var(--hair);font-size:14.5px;vertical-align:top}
th{color:var(--ink-2);font-weight:500;font-size:13px}
tr:last-child td{border-bottom:0}

/* badge stato */
.badge{display:inline-block;padding:3px 11px;border-radius:999px;font-size:12px;font-weight:600;
  font-family:"Space Grotesk",sans-serif;border:1px solid var(--hair-2)}
.badge-bozza{background:var(--paper);color:var(--ink-2)}
.badge-in_attesa_pagamento{background:#fdf8ec;color:#8a5d12;border-color:#ecd9a8}
.badge-pagata,.badge-attiva{background:#f2fbf6;color:#0c6b43;border-color:#bfe7d4}
.badge-conclusa{background:var(--paper);color:var(--ink-2)}
.badge-annullata{background:#fdf1f1;color:#a3161c;border-color:#f1c2c4}

/* preventivo */
.preventivo{background:var(--paper);border:1px solid var(--hair);border-radius:11px;padding:18px;margin-top:20px}
.preventivo .totale{font-family:"Space Grotesk",sans-serif;font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.totale{font-family:"Space Grotesk",sans-serif;font-weight:600}
.right{text-align:right}
.hint{font-size:12.5px;color:var(--ink-2);margin-top:5px}
code{font-family:"Space Mono","SF Mono",monospace;background:var(--paper);
  border:1px solid var(--hair);border-radius:5px;padding:1px 6px;font-size:13px;color:var(--ink)}
ol.muted,ul.muted{color:var(--ink-2);padding-left:20px}
ol.muted li,ul.muted li{margin:6px 0}

/* KPI dashboard */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:24px 0}
.kpi{background:var(--white);border:1px solid var(--hair);border-radius:14px;padding:22px}
.kpi-n{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:32px;letter-spacing:-.03em;line-height:1}
.kpi-l{font-size:13px;color:var(--ink-2);margin-top:8px}
.kpi-alert{border-color:#ecd9a8;background:#fdf8ec}
.kpi-alert .kpi-n{color:#8a5d12}

/* container largo (pagina creazione campagna) */
.container-wide{max-width:1080px}

/* layout 2 colonne: moduli + riepilogo sticky */
.acquista-layout{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}
.acquista-main{display:flex;flex-direction:column;gap:22px;min-width:0}
.acquista-main .module{margin-bottom:0}
.acquista-side{position:sticky;top:96px}
.side-card{margin-bottom:0}
/* dentro un modulo, due colonne affiancate su desktop (form + anteprima/date) */
.module-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.module-cols > div{min-width:0}
.preview-box{display:flex;align-items:center;justify-content:center;background:var(--paper);
  border:1px dashed var(--hair-2);border-radius:10px;min-height:150px;margin-top:24px;overflow:hidden}
.preview-box img{max-width:100%;max-height:200px;border-radius:8px;display:block}
.sel-all-inline{margin:0 0 0 auto;font-size:13.5px;color:var(--ink-2);display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.sel-all-inline input{width:auto;accent-color:var(--accent)}

/* moduli creazione campagna */
.module-head{display:flex;align-items:center;gap:13px;margin-bottom:6px}
.module-head h2{margin:0;font-size:20px}
.module-n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:50%;background:var(--ink);color:#fff;font-family:"Space Grotesk",sans-serif;
  font-weight:600;font-size:14px;flex:none}
.sede-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-top:14px}
.sede-pick{display:flex;align-items:center;gap:12px;margin:0;padding:13px 15px;
  border:1px solid var(--hair-2);border-radius:10px;cursor:pointer;transition:.15s;font-size:15px}
.sede-pick:hover{border-color:var(--ink)}
.sede-pick input{width:auto;margin:0;flex:none;accent-color:var(--accent)}
.sede-pick:has(input:checked){border-color:var(--accent);background:#fdf3f3}
.sede-info{display:flex;flex-direction:column;line-height:1.25}
.sede-nome{font-weight:500}
.sede-meta{font-size:12.5px;color:var(--ink-2)}
.date-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.riepilogo-tot{display:flex;justify-content:space-between;align-items:baseline;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--hair)}
.riepilogo-tot .totale{font-size:26px}
/* box "spettatori raggiunti" nel preventivo */
.reach{background:var(--white);border:1px solid var(--hair-2);border-radius:10px;
  padding:14px 16px;margin-bottom:14px;text-align:center}
.reach-n{display:block;font-family:"Space Grotesk",sans-serif;font-weight:600;
  font-size:30px;letter-spacing:-.02em;color:var(--accent);line-height:1}
.reach-l{display:block;font-size:12.5px;color:var(--ink-2);margin-top:4px}
/* righe sconto nel preventivo */
.sconto-row{display:flex;justify-content:space-between;font-size:14px;padding:6px 0;color:var(--ink-2)}
.sconto-hit{color:var(--accent);font-weight:600}

/* sotto i 880px il layout campagna torna a colonna singola, riepilogo non più sticky */
@media(max-width:880px){
  .acquista-layout{grid-template-columns:1fr}
  .acquista-side{position:static}
  .module-cols{grid-template-columns:1fr}
  .preview-box{margin-top:14px;min-height:120px}
}
@media(max-width:560px){
  .nav{gap:16px}.nav-user{display:none}
  .container{padding:40px 22px 70px}
  .topbar-in{padding:18px 22px}
  .date-row{grid-template-columns:1fr}
}