/* ==========================================================
   DCU RadioSystem – shared stylesheet
   Brand aligned with cyklingdanmark.dk
   ========================================================== */

/* ---------- Reset & base ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --dcu-navy:    #0B1D3A;
  --dcu-red:     #C8102E;
  --dcu-red-dk:  #A00D24;
  --dcu-white:   #ffffff;
  --dcu-light:   #f2f3f5;
  --dcu-gray:    #6b7280;
  --dcu-border:  #d1d5db;
  --dcu-text:    #1a1a1a;
  --dcu-success: #137333;
  --dcu-success-bg: #e6f4ea;
  --dcu-success-border: #b7dfb9;
  --dcu-error:   #b3261e;
  --dcu-error-bg:#fdecea;
  --dcu-error-border:#f4c7c3;
  --dcu-warn:    #92400e;
  --dcu-warn-bg: #fef3c7;
  --dcu-warn-border:#fcd34d;
  --radius:      8px;
  --shadow:      0 4px 24px rgba(11,29,58,.10);
}

body{
  font-family:'Inter','Roboto',system-ui,-apple-system,sans-serif;
  background:var(--dcu-light);
  color:var(--dcu-text);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:1rem;
  line-height:1.55;
}

/* ---------- Card container ---------- */
.container{
  background:var(--dcu-white);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  max-width:460px;
  width:100%;
  overflow:hidden;
}
.container.wide{ max-width:520px; }

/* ---------- Header ---------- */
header{
  background:var(--dcu-navy);
  padding:1.8rem 2rem 1.5rem;
  text-align:center;
}
header img.logo{
  max-width:200px;
  height:auto;
  margin-bottom:.75rem;
}
header h1{
  color:var(--dcu-white);
  font-size:1.6rem;
  font-weight:700;
  letter-spacing:.01em;
  margin-bottom:.2rem;
}
header p{
  color:rgba(255,255,255,.85);
  font-size:.95rem;
}

/* ---------- Content area ---------- */
.content,
.form-wrapper{
  padding:1.75rem 2rem 2rem;
}

/* ---------- Alerts ---------- */
.alert{
  padding:.85rem 1rem;
  border-radius:var(--radius);
  margin-bottom:1rem;
  font-size:.93rem;
  line-height:1.5;
}
.alert-error{
  background:var(--dcu-error-bg);
  color:var(--dcu-error);
  border:1px solid var(--dcu-error-border);
}
.alert-success{
  background:var(--dcu-success-bg);
  color:var(--dcu-success);
  border:1px solid var(--dcu-success-border);
}

/* ---------- Messages (submit page) ---------- */
.message{
  padding:1rem;
  border-radius:var(--radius);
  font-size:1rem;
  line-height:1.5;
}
.message.success{
  background:var(--dcu-success-bg);
  color:var(--dcu-success);
}
.message.error{
  background:var(--dcu-error-bg);
  color:var(--dcu-error);
}

/* ---------- Forms ---------- */
form{ display:flex; flex-direction:column; }

label{
  display:flex;
  flex-direction:column;
  font-weight:500;
  font-size:.93rem;
  margin-top:1rem;
  color:var(--dcu-text);
}
label:first-child{ margin-top:0; }

input[type="text"],
input[type="email"],
input[type="tel"]{
  margin-top:.4rem;
  padding:.78rem .85rem;
  font-size:1rem;
  border:1px solid var(--dcu-border);
  border-radius:var(--radius);
  outline:none;
  transition:border .15s, box-shadow .15s;
  color:var(--dcu-text);
}
input:focus{
  border-color:var(--dcu-navy);
  box-shadow:0 0 0 3px rgba(11,29,58,.12);
}
input.valid{
  border-color:var(--dcu-success);
  background:#f6fff6;
}
input.invalid{
  border-color:var(--dcu-error);
  background:#fff7f7;
}

.help-text{
  font-size:.82rem;
  color:var(--dcu-gray);
  margin-top:.25rem;
  font-weight:400;
}

.status-text{
  font-size:.82rem;
  margin-top:.3rem;
  min-height:1rem;
  font-weight:400;
}
.status-ok   { color:var(--dcu-success); }
.status-error{ color:var(--dcu-error); }
.status-info { color:var(--dcu-gray); }

/* ---------- Buttons ---------- */
button,
.button{
  display:inline-block;
  margin-top:1.25rem;
  padding:.82rem 1.5rem;
  background:var(--dcu-red);
  color:var(--dcu-white);
  border:none;
  border-radius:var(--radius);
  cursor:pointer;
  font-size:1rem;
  font-weight:600;
  text-align:center;
  text-decoration:none;
  transition:background .15s;
}
button:hover,
.button:hover{
  background:var(--dcu-red-dk);
}
button:disabled{
  background:#e5a3ab;
  cursor:not-allowed;
}
button.full{ width:100%; }

.secondary-btn{
  display:block;
  margin-top:.75rem;
  padding:.82rem;
  background:var(--dcu-light);
  color:var(--dcu-navy);
  border:1px solid var(--dcu-border);
  border-radius:var(--radius);
  text-align:center;
  text-decoration:none;
  font-size:1rem;
  font-weight:500;
  transition:background .15s;
}
.secondary-btn:hover{
  background:#e4e6ea;
}

/* ---------- Info / change boxes (confirm page) ---------- */
.info-box{
  background:#eef2f7;
  border-left:4px solid var(--dcu-navy);
  padding:1rem;
  border-radius:var(--radius);
  margin-bottom:1.25rem;
}
.info-box h3{
  color:var(--dcu-navy);
  font-size:.93rem;
  margin-bottom:.5rem;
}
.info-item{
  margin-bottom:.65rem;
  font-size:.93rem;
}
.info-label{
  color:var(--dcu-gray);
  font-weight:500;
}
.info-value{
  color:var(--dcu-text);
  margin-top:.15rem;
  font-size:1rem;
}

.change-box{
  background:var(--dcu-warn-bg);
  border-left:4px solid var(--dcu-warn-border);
  padding:1rem;
  border-radius:var(--radius);
  margin-bottom:1.25rem;
}
.change-box h3{
  color:var(--dcu-warn);
  font-size:.93rem;
  margin-bottom:.6rem;
}

.company-comparison{
  display:flex;
  gap:.75rem;
  align-items:center;
  margin:.75rem 0;
}
.company-old,.company-new{
  flex:1;
  padding:.7rem;
  border-radius:6px;
  font-weight:600;
  text-align:center;
  font-size:.9rem;
}
.company-old{
  background:var(--dcu-white);
  border:2px solid var(--dcu-border);
  color:var(--dcu-gray);
}
.company-new{
  background:#fde8eb;
  border:2px solid var(--dcu-red);
  color:var(--dcu-red);
}
.arrow{
  text-align:center;
  color:var(--dcu-warn);
  font-weight:bold;
  font-size:1.2rem;
}

/* ---------- Confirm buttons ---------- */
.button-group{
  display:flex;
  gap:.75rem;
  margin-top:1.25rem;
}
.btn-confirm{
  flex:1;
  background:var(--dcu-navy);
  color:var(--dcu-white);
}
.btn-confirm:hover{
  background:#132d52;
}
.btn-decline{
  flex:1;
  background:var(--dcu-red);
  color:var(--dcu-white);
}
.btn-decline:hover{
  background:var(--dcu-red-dk);
}

/* ---------- Misc ---------- */
.small{
  margin-top:1rem;
  font-size:.88rem;
  color:var(--dcu-gray);
  text-align:center;
}
a{ color:var(--dcu-red); text-decoration:none; }
a:hover{ text-decoration:underline; }

.actions{
  margin-top:1.25rem;
  text-align:center;
}
.actions .button{
  margin:.35rem;
}

#barcode{
  margin:1rem auto;
  display:block;
  max-width:100%;
}

pre{
  text-align:left;
  white-space:pre-wrap;
  word-break:break-word;
  margin-top:1rem;
}

/* ---------- Footer ---------- */
.footer{
  text-align:center;
  padding:.75rem 2rem 1rem;
  font-size:.78rem;
  color:var(--dcu-gray);
  border-top:1px solid #eee;
}

/* ---------- Print ---------- */
@media print{
  body{ background:#fff; padding:0; }
  .container{ box-shadow:none; border-radius:0; }
  .actions .button:not([onclick]){ display:none; }
}