/* =========================================================
   boeking-configurator.css — D-Detailerz
   Zelfde look & feel als de homepage
   ========================================================= */

/* =========================================================
   01. Design tokens
   ========================================================= */
:root{
  --bg:#070A10;
  --surface:#101520;
  --surface-2:rgba(20,24,34,.72);
  --surface-3:rgba(255,255,255,.04);
  --surface-4:rgba(255,255,255,.06);

  --text:#e9edf6;
  --text-soft:rgba(233,237,246,.82);
  --text-muted:rgba(233,237,246,.68);

  --border:rgba(255,255,255,.08);
  --border-soft:rgba(255,255,255,.05);

  --primary:#6a5cff;
  --accent:#b050ff;
  --hot:#ff4f9a;
  --cyan:#7ed1ff;

  --grad-brand:linear-gradient(90deg, #6a5cff 0%, #b050ff 48%, #ff4f9a 100%);
  --grad-surface:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  --grad-page:
    radial-gradient(900px 600px at 18% 10%, rgba(106,92,255,.18), transparent 55%),
    radial-gradient(900px 600px at 82% 20%, rgba(255,79,154,.14), transparent 55%),
    radial-gradient(900px 600px at 60% 85%, rgba(176,80,255,.10), transparent 55%),
    linear-gradient(180deg, #0a0f1b 0%, #070A10 60%, #05070c 100%);

  --success:#7ee2b8;
  --warning:#ffd77a;

  --font-sans:Poppins, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fs-100:.85rem;
  --fs-200:.95rem;
  --fs-300:1rem;
  --fs-400:1.06rem;
  --fs-500:clamp(1.2rem, 2vw, 1.45rem);
  --fs-600:clamp(1.5rem, 3vw, 1.9rem);

  --page-max:1200px;
  --page-pad:clamp(16px, 3.4vw, 28px);
  --section-space:clamp(28px, 4vw, 44px);
  --card-pad:clamp(16px, 2vw, 24px);
  --gap:clamp(14px, 2vw, 22px);

  --radius-sm:14px;
  --radius-md:18px;
  --radius-lg:24px;
  --radius-pill:999px;

  --shadow-soft:0 10px 24px rgba(0,0,0,.18);
  --shadow-card:0 18px 42px rgba(0,0,0,.34);
  --shadow-strong:0 24px 60px rgba(0,0,0,.52);

  --ring:0 0 0 3px rgba(176,80,255,.28);
  --ease:220ms ease;
}

/* =========================================================
   02. Light theme
   ========================================================= */
body[data-theme="light"]{
  --bg:#f8f5ff;
  --surface:#ffffff;
  --surface-2:rgba(255,255,255,.86);
  --surface-3:rgba(106,92,255,.04);
  --surface-4:rgba(106,92,255,.06);

  --text:#1a1333;
  --text-soft:#3d3458;
  --text-muted:#6d6486;

  --border:rgba(78,46,150,.12);
  --border-soft:rgba(78,46,150,.08);

  --primary:#6a5cff;
  --accent:#b050ff;
  --hot:#ff4f9a;
  --cyan:#38bdf8;

  --grad-brand:linear-gradient(90deg,#6a5cff 0%,#b050ff 48%,#ff4f9a 100%);
  --grad-surface:linear-gradient(180deg,#ffffff 0%,#fbf7ff 100%);
  --grad-page:
    radial-gradient(1100px 520px at 10% 0%, rgba(106,92,255,.12), transparent 56%),
    radial-gradient(900px 520px at 88% 18%, rgba(255,79,154,.08), transparent 55%),
    radial-gradient(800px 500px at 60% 90%, rgba(176,80,255,.08), transparent 55%),
    linear-gradient(180deg,#fcfaff 0%, #f7f4ff 100%);

  --shadow-soft:0 10px 22px rgba(76,54,140,.08);
  --shadow-card:0 16px 34px rgba(76,54,140,.10);
  --shadow-strong:0 22px 48px rgba(76,54,140,.14);

  --ring:0 0 0 3px rgba(106,92,255,.18);
}

/* =========================================================
   03. Reset
   ========================================================= */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100vh;
  font-family:var(--font-sans);
  font-size:var(--fs-300);
  line-height:1.65;
  color:var(--text);
  background:var(--grad-page);
  overflow-x:hidden;
}

img,
svg,
video{
  display:block;
  max-width:100%;
  height:auto;
}

button,
input,
select,
textarea{
  font:inherit;
  color:inherit;
}

button{
  margin:0;
}

a{
  color:inherit;
  text-decoration:none;
}

h1,h2,h3,p{
  margin:0;
}

/* =========================================================
   04. Layout
   ========================================================= */
.wrap{
  width:min(var(--page-max), calc(100% - (2 * var(--page-pad))));
  margin-inline:auto;
  padding-top:calc(var(--header-height, 88px) + 26px);
  padding-bottom:40px;
}

.section{
  margin-top:var(--section-space);
}

.section:first-child{
  margin-top:0;
}

/* =========================================================
   05. Typografie
   ========================================================= */
.h2{
  font-size:var(--fs-600);
  line-height:1.12;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--text);
  margin-bottom:.45rem;
}

.muted{
  color:var(--text-muted);
}

.tiny{
  font-size:var(--fs-100);
  color:var(--text-muted);
}

.label{
  display:block;
  font-weight:800;
  color:var(--text);
  margin-bottom:.45rem;
}

/* =========================================================
   06. Components basis
   ========================================================= */
.card{
  position:relative;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--grad-surface);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}

.card__body{
  position:relative;
  padding:var(--card-pad);
}

.card--wide .card__body{
  padding:clamp(18px, 2.4vw, 28px);
}

.btn{
  appearance:none;
  border:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 18px;
  border-radius:var(--radius-pill);
  font-weight:800;
  line-height:1;
  cursor:pointer;
  transition:
    transform var(--ease),
    box-shadow var(--ease),
    filter var(--ease),
    background var(--ease),
    border-color var(--ease);
}

.btn:hover{
  transform:translateY(-1px);
}

.btn:active{
  transform:translateY(0) scale(.99);
}

.btn--primary{
  color:#fff;
  background:var(--grad-brand);
  box-shadow:0 14px 30px rgba(176,80,255,.16);
}

.btn--ghost{
  color:var(--text);
  background:var(--surface-3);
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
}

.btn--full{
  width:100%;
}

.iconBtn{
  appearance:none;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--surface-3);
  cursor:pointer;
  transition:transform var(--ease), background var(--ease), border-color var(--ease);
}

.iconBtn:hover{
  background:var(--surface-4);
}

.iconBtn:active{
  transform:scale(.98);
}

.input{
  width:100%;
  min-height:48px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text);
  outline:none;
  transition:border-color var(--ease), box-shadow var(--ease), background var(--ease);
}

.input::placeholder{
  color:var(--text-muted);
}

.input:focus{
  border-color:rgba(176,80,255,.34);
  box-shadow:var(--ring);
  background:rgba(255,255,255,.05);
}

.input--area{
  resize:vertical;
  min-height:120px;
}

/* =========================================================
   07. Grid helpers
   ========================================================= */
.grid{
  display:grid;
  gap:var(--gap);
}

.grid--packages{
  grid-template-columns:1fr;
  align-items:stretch;
  grid-auto-rows:1fr;
}

.grid--sizes{
  grid-template-columns:repeat(2, minmax(0,1fr));
}

/* =========================================================
   08. Package cards
   ========================================================= */
#packageGrid > *{
  height:100%;
}

#packageGrid .card,
.card.card--package{
  height:100%;
}

#packageGrid .card__body,
.card.card--package .card__body{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:100%;
}

.card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.card__title{
  font-size:var(--fs-500);
  font-weight:900;
  line-height:1.15;
  color:var(--text);
}

.card__sub{
  margin-top:6px;
  font-size:var(--fs-200);
  color:var(--text-muted);
}

.card__price{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:10px 0 0;
}

.card__price b{
  font-size:clamp(1.8rem, 3vw, 2.2rem);
  line-height:1;
  font-weight:900;
  color:var(--cyan);
}

.card__price span{
  color:var(--text-muted);
  font-weight:700;
  font-size:var(--fs-100);
}

.badgeCheck{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.18);
  color:rgba(255,255,255,.74);
  flex-shrink:0;
}

.ul{
  list-style:none;
  padding:0;
  margin:14px 0 0;
  display:grid;
  gap:10px;
  flex:1 1 auto;
  align-content:start;
}

.li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--text-soft);
  line-height:1.5;
}

.dot{
  width:9px;
  height:9px;
  margin-top:.55em;
  border-radius:50%;
  flex-shrink:0;
  background:radial-gradient(circle at 35% 35%, #ff7ec7, #8c63ff 70%);
  box-shadow:0 0 0 4px rgba(255,79,154,.10);
}

.card__actions{
  margin-top:auto;
  padding-top:16px;
}

.card__actions .btn,
.card__actions .btn--full{
  min-height:58px;
}

.card.is-selected,
#packageGrid .card.is-selected{
  border-color:rgba(176,80,255,.34);
  box-shadow:
    0 20px 44px rgba(0,0,0,.42),
    0 0 0 1px rgba(176,80,255,.16);
}

.card.is-selected .badgeCheck,
#packageGrid .card.is-selected .badgeCheck{
  color:#fff;
  background:var(--grad-brand);
  border-color:transparent;
}

/* =========================================================
   09. Size cards
   ========================================================= */
.sizeCard{
  position:relative;
  padding:16px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--grad-surface);
  box-shadow:var(--shadow-soft);
  cursor:pointer;
  transition:transform var(--ease), border-color var(--ease), box-shadow var(--ease), background var(--ease);
}

.sizeCard:hover{
  transform:translateY(-2px);
}

.sizeCard__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

.sizeCard__badge{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.18);
  flex-shrink:0;
}

.sizeCard__icon{
  font-size:1.35rem;
  line-height:1;
}

.sizeCard__name{
  font-weight:900;
  color:var(--text);
  line-height:1.2;
}

.sizeCard__sub{
  margin-top:6px;
  color:var(--text-muted);
  font-size:var(--fs-100);
  line-height:1.45;
}

.sizeCard.is-selected{
  border-color:rgba(106,92,255,.34);
  box-shadow:
    0 16px 34px rgba(0,0,0,.34),
    0 0 0 1px rgba(106,92,255,.16);
}

.sizeCard.is-selected .sizeCard__badge{
  background:var(--grad-brand);
  border-color:transparent;
}

.sizeCard.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* =========================================================
   10. Options
   ========================================================= */
.empty{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.empty__icon{
  font-size:1.35rem;
  line-height:1;
  flex-shrink:0;
}

.empty__txt p + p{
  margin-top:4px;
}

.options{
  display:grid;
  gap:14px;
}

.optGroup{
  padding:14px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
}

.optGroup__title{
  font-weight:900;
  color:var(--text);
  margin-bottom:8px;
}

.choiceRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--border-soft);
  background:rgba(255,255,255,.02);
}

.choiceRow + .choiceRow{
  margin-top:8px;
}

.choiceRow label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
  flex:1;
}

.choiceRow input{
  margin-top:.25em;
  accent-color:var(--primary);
}

.choiceRow .muted{
  font-size:var(--fs-100);
  margin-top:2px;
}

/* =========================================================
   11. Summary
   ========================================================= */
.summary{
  display:grid;
  gap:var(--gap);
  grid-template-columns:1fr;
}

.summary__left,
.summary__right{
  padding:clamp(16px, 2vw, 22px);
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:var(--grad-surface);
  box-shadow:var(--shadow-soft);
}

.summary__line{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:11px 0;
  border-bottom:1px dashed var(--border);
}

.summary__line:last-child{
  border-bottom:none;
  padding-bottom:0;
}

.summary__line:first-child{
  padding-top:0;
}

.k{
  color:var(--text-muted);
  font-weight:700;
}

.v{
  color:var(--text);
  font-weight:900;
  text-align:right;
}

.bookbar__price{
  display:grid;
  gap:6px;
}

.bookbar__label{
  color:var(--text-muted);
  font-size:var(--fs-100);
  font-weight:800;
  letter-spacing:.02em;
}

.bookbar__value{
  color:var(--text);
  font-size:clamp(1.5rem, 2.6vw, 2rem);
  line-height:1;
  font-weight:900;
}

.summary__right{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.summary__cta{
  margin-top:auto;
}

.summary__cta .btn{
  width:100%;
  min-height:56px;
}

/* =========================================================
   12. Sticky bar verwijderen
   ========================================================= */
.bookbar{
  display:none !important;
}

/* =========================================================
   13. Modal
   ========================================================= */
.modal{
  position:fixed;
  inset:0;
  z-index:120;
  display:none;
}

.modal.is-open{
  display:grid;
  place-items:center;
}

.modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.56);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.modal__panel{
  position:relative;
  z-index:1;
  width:min(920px, calc(100% - 24px));
  max-height:calc(100dvh - 24px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:26px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(18,22,32,.96), rgba(11,14,21,.94));
  box-shadow:var(--shadow-strong);
}

.modal__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:18px 18px 14px;
  border-bottom:1px solid var(--border-soft);
}

.modal__title{
  font-size:clamp(1.25rem, 2vw, 1.5rem);
  line-height:1.15;
  font-weight:900;
  color:var(--text);
}

.modal__sub{
  margin-top:6px;
}

.form{
  padding:18px;
  overflow:auto;
  min-height:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}

.form__row{
  min-width:0;
}

#bookingForm > .form__row:nth-of-type(5),
#bookingForm > .form__row:nth-of-type(6),
#bookingForm > .form__actions,
#bookingForm > .tiny{
  grid-column:1 / -1;
}

.preview{
  padding:14px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text-soft);
  line-height:1.6;
}

.form__actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top:6px;
}

/* =========================================================
   14. Focus / states
   ========================================================= */
.btn:focus-visible,
.iconBtn:focus-visible,
.input:focus-visible,
.sizeCard:focus-visible,
.card:focus-visible,
.choiceRow:focus-within,
button:focus-visible{
  outline:none;
  box-shadow:var(--ring);
}

.btn[disabled],
button[disabled]{
  opacity:.5;
  cursor:not-allowed;
  transform:none !important;
  filter:none !important;
}

/* =========================================================
   15. Light theme component overrides
   ========================================================= */
body[data-theme="light"] .card,
body[data-theme="light"] .sizeCard,
body[data-theme="light"] .summary__left,
body[data-theme="light"] .summary__right,
body[data-theme="light"] .optGroup{
  background:var(--grad-surface);
  border-color:var(--border);
  box-shadow:var(--shadow-card);
}

body[data-theme="light"] .badgeCheck,
body[data-theme="light"] .sizeCard__badge{
  background:rgba(106,92,255,.04);
  color:#5f6284;
}

body[data-theme="light"] .btn--ghost{
  background:#ffffff;
  border-color:rgba(106,92,255,.16);
  color:#3f3564;
}

body[data-theme="light"] .input{
  background:#ffffff;
  border-color:rgba(106,92,255,.12);
}

body[data-theme="light"] .input:focus{
  background:#ffffff;
}

body[data-theme="light"] .modal__overlay{
  background:rgba(31,24,53,.24);
}

body[data-theme="light"] .modal__panel{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,245,255,.98));
  box-shadow:0 24px 60px rgba(76,54,140,.14);
}

body[data-theme="light"] .preview,
body[data-theme="light"] .choiceRow{
  background:rgba(106,92,255,.03);
}

body[data-theme="light"] .card.is-selected,
body[data-theme="light"] #packageGrid .card.is-selected,
body[data-theme="light"] .sizeCard.is-selected{
  box-shadow:
    0 16px 34px rgba(76,54,140,.12),
    0 0 0 1px rgba(106,92,255,.14);
}

/* =========================================================
   16. Responsive
   ========================================================= */
@media (min-width: 720px){
  .grid--packages{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .grid--sizes{
    grid-template-columns:repeat(4, minmax(0,1fr));
  }

  .summary{
    grid-template-columns:1.15fr .85fr;
  }
}

@media (min-width: 1020px){
  .grid--packages{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
}

@media (max-width: 860px){
  .form{
    grid-template-columns:1fr;
  }
}

@media (max-width: 560px){
  .wrap{
    width:min(var(--page-max), calc(100% - 18px));
    padding-bottom:28px;
  }

  .grid--sizes{
    grid-template-columns:1fr 1fr;
  }

  .summary__line{
    flex-direction:column;
    gap:4px;
  }

  .v{
    text-align:left;
  }

  .modal__head{
    padding:16px 16px 12px;
  }

  .form{
    padding:16px;
  }

  .form__actions{
    flex-direction:column-reverse;
  }

  .form__actions .btn{
    width:100%;
  }
}

/* =========================================================
   17. Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }
}

/* =========================================================
   18. Print
   ========================================================= */
@media print{
  .modal{
    display:none !important;
  }

  body{
    background:#fff;
    color:#000;
  }

  .card,
  .summary__left,
  .summary__right,
  .sizeCard,
  .optGroup{
    box-shadow:none !important;
    background:#fff !important;
    border:1px solid #ccc !important;
  }

  .wrap{
    width:100%;
    padding:0;
  }
}

.sizeCard__icon-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:10px 0 8px;
}

.sizeCard__icon{
  font-size:2rem;
  width:2rem;
  height:2rem;
  color:var(--cyan);
}

body[data-theme="light"] .sizeCard__icon{
  color:var(--primary);
}