/* SRB Livery App - extra styling bovenop Bootstrap 5 (dark). Geen wijzigingen in PHP nodig behalve de <link>. */
:root{
  --srb-red:#e10600;
  --srb-red-dark:#a80400;
  --srb-bg:#0e1014;
  --srb-surface:#171a21;
  --srb-surface-2:#1e222b;
  --srb-border:rgba(255,255,255,.08);
  --srb-radius:.75rem;
}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(225,6,0,.12), transparent 60%),
    var(--srb-bg);
  background-attachment:fixed;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:.005em;
}
.navbar{
  background:rgba(23,26,33,.85)!important;
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--srb-border);
  border-top:3px solid var(--srb-red);
  position:sticky;top:0;z-index:1030;
}
.navbar-brand{text-transform:uppercase;letter-spacing:.12em;font-weight:800!important}
.navbar-brand::before{content:"";display:inline-block;width:.6rem;height:1.1rem;margin-right:.55rem;background:var(--srb-red);transform:skewX(-18deg);vertical-align:-.15rem}
.navbar .btn{border-radius:999px}
main.container{max-width:1100px}
h1{font-weight:800;letter-spacing:-.01em}
h2.h4{
  display:flex;align-items:center;gap:.6rem;
  text-transform:uppercase;letter-spacing:.06em;font-size:1rem!important;font-weight:700;
  color:#fff;border-bottom:1px solid var(--srb-border)!important;
}
h2.h4::before{content:"";width:.35rem;height:1.2rem;background:var(--srb-red);border-radius:2px}
.card{
  background:var(--srb-surface);
  border:1px solid var(--srb-border);
  border-radius:var(--srb-radius);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.livery-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.4);border-color:rgba(225,6,0,.35)}
.livery-card{border-left:4px solid var(--srb-red)!important}
.variant-card{
  border-left:4px solid #6c757d!important;
  background:var(--srb-surface-2);
  position:relative;
}
.variant-card::before{content:"";position:absolute;left:-1.5rem;top:50%;width:1.5rem;height:2px;background:var(--srb-border)}
.card-body h5{font-weight:700}
.preview{
  width:100%;height:100%;max-height:180px;object-fit:cover;
  border-radius:.6rem;border:1px solid var(--srb-border);
  background:#0b0d11;
}
.badge{font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:.65rem;padding:.4em .65em;border-radius:999px;vertical-align:middle}
.btn{border-radius:.55rem;font-weight:600;transition:all .15s ease}
.btn-danger{background:var(--srb-red);border-color:var(--srb-red)}
.btn-danger:hover,.btn-danger:focus{background:var(--srb-red-dark);border-color:var(--srb-red-dark)}
.btn-outline-light:hover{color:#000}
.form-control,.form-select{
  background-color:var(--srb-surface-2);
  border-color:var(--srb-border);
  border-radius:.55rem;
}
.form-control:focus,.form-select:focus{
  border-color:var(--srb-red);
  box-shadow:0 0 0 .2rem rgba(225,6,0,.2);
  background-color:var(--srb-surface-2);
}
.form-label{font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:#aab0bd}
.form-check-input:checked{background-color:var(--srb-red);border-color:var(--srb-red)}
.form-check-input:focus{border-color:var(--srb-red);box-shadow:0 0 0 .2rem rgba(225,6,0,.2)}
form.row.g-3{
  background:var(--srb-surface);
  border:1px solid var(--srb-border);
  border-radius:var(--srb-radius);
  padding:1.25rem 1.25rem 1.5rem;
  margin:0;
}
.table{
  --bs-table-bg:var(--srb-surface);
  --bs-table-striped-bg:var(--srb-surface-2);
  border-radius:var(--srb-radius);overflow:hidden;
}
.table thead th{
  text-transform:uppercase;font-size:.72rem;letter-spacing:.07em;color:#9aa1af;
  border-bottom:2px solid var(--srb-red);
}
.table tbody tr:hover{background:rgba(255,255,255,.03)}
.alert{border-radius:var(--srb-radius);border:1px solid var(--srb-border);border-left-width:4px}
a{text-underline-offset:.2em}
.text-warning.small{margin-top:-.25rem;margin-bottom:.4rem;font-weight:600}
@media (max-width:767.98px){
  .variant-card{margin-left:.75rem!important}
  .variant-card::before{display:none}
  .navbar .d-flex{width:100%;margin-top:.5rem}
  form.row.g-3{padding:1rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}


/* ---- Inklapbare groepen: plak onderaan assets/style.css ---- */
details.car-group{background:var(--srb-surface);border:1px solid var(--srb-border);border-radius:var(--srb-radius);margin-bottom:.75rem;overflow:hidden}
details.car-group[open]{border-color:rgba(225,6,0,.35)}
details > summary{list-style:none;cursor:pointer;user-select:none}
details > summary::-webkit-details-marker{display:none}
details.car-group > summary{display:flex;align-items:center;gap:.75rem;padding:.85rem 1.1rem;font-weight:700;font-size:1.05rem}
details.car-group > summary::before,
details.variants > summary::before{content:"";width:.5rem;height:.5rem;flex:none;border-right:2px solid var(--srb-red);border-bottom:2px solid var(--srb-red);transform:rotate(-45deg);transition:transform .15s ease}
details[open] > summary::before{transform:rotate(45deg)}
details.car-group > summary:hover{background:rgba(255,255,255,.03)}
.car-type{font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#aab0bd;border:1px solid var(--srb-border);border-radius:999px;padding:.15rem .6rem}
.count{font-size:.8rem;font-weight:500;color:#8b92a1}
.car-body{padding:.25rem 1.1rem 1rem;border-top:1px solid var(--srb-border)}
.car-body > .livery-card:first-child{margin-top:1rem}
details.variants{margin:0 0 1rem 1.5rem}
details.variants > summary{display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;color:#aab0bd;padding:.35rem 0;margin-bottom:.5rem}
details.variants > .variant-card{margin-left:0}
@media (max-width:767.98px){details.variants{margin-left:.5rem}}

.landing{padding:5rem 1rem 4rem;max-width:720px;margin:0 auto}
.landing-badge{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:var(--srb-red);padding:.3rem .9rem;border-radius:999px;transform:skewX(-12deg);margin-bottom:1.25rem}
.landing-title{font-size:clamp(2.2rem,6vw,3.6rem);font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:1rem}
.landing-lead{font-size:1.1rem;color:#aab0bd}
.landing-note{margin-top:1.5rem;font-size:.85rem;color:#8b92a1}