/* SunBiza — stili condivisi tra Programma e Spese: box, bottoni, landing
   "crea/apri viaggio", barra codice viaggio. Le due pagine mantengono nel
   proprio <style> solo le regole specifiche del loro contenuto.
   Direzione "Modernist": box a bordo netto invece di ombra, angoli vivi. */
.box{background:var(--surface); border:1px solid var(--sea1); padding:22px; margin:16px 0;}
p.section-sub{color:var(--slate); font-size:13px; margin-bottom:14px;}

.btn-primary{background:var(--coral); color:#fff; border:none; padding:11px 20px; font-weight:800; font-size:14px; cursor:pointer;}
.btn-primary:hover{background:var(--pink);}
.btn-secondary{background:transparent; border:1.5px solid var(--sea1); color:var(--sea2); padding:9px 16px; font-weight:800; font-size:13px; cursor:pointer;}
.btn-secondary:hover{background:var(--surface);}
.join-row{display:flex; gap:10px; max-width:340px; margin:0 auto; flex-wrap:wrap; justify-content:center;}
.join-row input{flex:1; min-width:160px; padding:10px 14px; border:1px solid var(--sea1); text-align:center; font-size:14px; background:var(--cream); color:var(--navy);}
#landingView .box{text-align:center; padding:32px 24px;}
.form-error{color:var(--warn); font-size:13px; margin-bottom:10px;}

/* trip code bar */
.code-bar{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;}
.code-bar .code{font-size:20px; font-weight:800; letter-spacing:0.04em;}
.trip-name-row{display:flex; align-items:center; gap:8px;}
.trip-name-input{font-size:20px; font-weight:800; padding:4px 8px; border:1px solid var(--sea1); font-family:inherit; max-width:280px; background:var(--cream); color:var(--navy);}
.code-sub{font-size:12px; color:var(--slate); margin-top:2px;}
.disclosure-line{font-size:12px; color:var(--slate); margin-top:10px; line-height:1.5;}
.copied-msg{color:var(--good); font-size:12.5px; font-weight:800; margin-left:8px;}
.refresh-line{display:flex; align-items:center; gap:10px; font-size:12px; color:var(--slate); margin-top:6px;}

@media (max-width:640px){
  .wrap{padding:0 16px;}
}

/* tema notte — .btn-primary pieno diventa outline (--coral è chiaro in
   tema notte: un bottone pieno con testo bianco sparirebbe). */
[data-theme="dark"] .btn-primary{background:transparent; color:var(--coral); border:1.5px solid var(--coral);}
[data-theme="dark"] .btn-primary:hover{background:rgba(145,132,217,0.16);}