:root{
  --bg:#daccbfc5;
  --card:#ffffff;
  --text:#000000;
  --muted:#5f5f5f;
  --line:rgba(17,17,17,0.10);
  --accent:#a73030; /* warm wood/gold */
  --accentSoft:rgba(176,138,74,0.14);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(176,138,74,0.10), transparent 55%),
    radial-gradient(900px 500px at 85% 20%, rgba(17,17,17,0.06), transparent 55%),
    var(--bg);
}
.wrap{max-width:860px;margin:0 auto;padding:22px}
.header{padding:8px 0 18px}
.brand{display:flex;gap:14px;align-items:center}
.logo{
  width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;
  background:var(--accentSoft);
  color:var(--text);
  font-weight:900;
  letter-spacing:0.5px;
}
.title{font-weight:800;font-size:18px;letter-spacing:0.2px}
.subtitle{color:var(--muted);font-size:13px;margin-top:2px}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px;
  box-shadow:0 20px 60px rgba(17,17,17,0.12);
}

.row{display:flex;gap:14px;flex-wrap:wrap}
.col{flex:1;min-width:240px}

.h1{font-size:22px;font-weight:850;margin:0 0 8px}
.p{color:var(--muted);line-height:1.55;margin:0 0 14px}

.progress{
  height:8px;border-radius:999px;overflow:hidden;
  background:rgba(17,17,17,0.06);
}
.progress>div{
  height:100%;
  background:linear-gradient(90deg, rgba(176,138,74,0.95), rgba(17,17,17,0.85));
  width:0%;
}

.qmeta{
  display:flex;justify-content:space-between;align-items:center;
  margin:10px 0 14px;
  color:var(--muted);font-size:13px
}

.q{
  font-size:18px;font-weight:800;margin:6px 0 10px;
}

.options{display:grid;gap:10px;margin-top:10px}
.opt{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 12px;
  display:grid;
  grid-template-columns:36px 1fr auto;
  gap:10px;
  align-items:start;
  background:rgba(17,17,17,0.02);
  cursor:pointer;
  transition:transform .06s ease, border-color .12s ease, background .12s ease;
}
.opt:hover{transform:translateY(-1px);background:rgba(17,17,17,0.03)}
.k{
  width:30px;height:30px;border-radius:10px;
  display:grid;place-items:center;
  background:rgba(17,17,17,0.05);
  font-weight:900;
}
.chip{
  font-size:12px;
  padding:4px 10px;border-radius:999px;
  background:var(--accentSoft);
  color:var(--text);
  font-weight:700;
  min-width:74px;
  text-align:center;
}
.small{font-size:13px;color:var(--muted)}

.actions{
  margin-top:18px;
  display:flex;
  justify-content:flex-end;
}
.btn{
  border:1px solid var(--line);
  background:transparent;
  padding:10px 14px;
  border-radius:14px;
  font-weight:800;
  cursor:pointer;
  color:var(--text);
}
.btn:hover{background:rgba(17,17,17,0.03)}
.btn:disabled{opacity:0.45;cursor:not-allowed}
.btn.primary{
  background:var(--text);
  color:#fff;
  border-color:var(--text);
}
.btn.primary:hover{filter:brightness(1.05)}
.input{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  outline:none;
}
.input:focus{border-color:rgba(176,138,74,0.55);box-shadow:0 0 0 4px rgba(176,138,74,0.10)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:640px){.grid2{grid-template-columns:1fr}}

.footer{color:var(--muted);font-size:12px;margin-top:12px;text-align:center}

/* Timer */
.timerRow{
  margin-top:14px;
  display:grid;
  grid-template-columns:44px 1fr 54px;
  gap:10px;
  align-items:center;
}
.timerLabel{font-size:12px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.6px}
.timerBar{
  height:10px;border-radius:999px;overflow:hidden;
  background:rgba(17,17,17,0.06);
  border:1px solid rgba(17,17,17,0.08);
}
.timerBar>div{
  height:100%;
  background:linear-gradient(90deg, rgba(176,138,74,0.95), rgba(17,17,17,0.85));
  width:100%;
  transition:width 0.12s linear;
}
.timerValue{font-weight:900;font-size:13px;color:var(--text);text-align:right}

/* --- Sending / Loader --- */
.sending{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  text-align:center;
}

.sending-text{ max-width:520px; }

.send-muted{ opacity:.82; }

/* Horizontale jaloezie (donker, zoals referentiefoto) */
.blind-loader{
  position:relative;
  width:260px;
  max-width:82vw;
  padding:0 18px 18px 16px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(40,38,36,0.15) 0%, rgba(255,255,255,0.04) 100%);
  border:1px solid rgba(0,0,0,0.12);
  box-shadow:0 8px 28px rgba(0,0,0,0.18);
}

/* Valance / headrail (donkere balk boven) */
.blind-headrail{
  position:relative;
  height:18px;
  margin:0 -2px 10px 0;
  border-radius:8px 8px 4px 4px;
  background:linear-gradient(180deg, #3d3835 0%, #2a2624 45%, #1f1d1b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 2px 6px rgba(0,0,0,0.35);
  border:1px solid rgba(0,0,0,0.4);
}
.blind-headrail-front{
  display:block;
  position:absolute;
  top:1px;
  left:6px;
  right:22px;
  height:8px;
  border-radius:3px;
  background:linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 100%);
  pointer-events:none;
}

/* Bedieningskoorden: lift (licht) + tilt (donker met toggle) */
.blind-cords{
  position:absolute;
  top:20px;
  right:8px;
  bottom:22px;
  width:14px;
  display:flex;
  flex-direction:row;
  gap:6px;
  justify-content:center;
  pointer-events:none;
}
.blind-cords .cord{
  width:2px;
  align-self:stretch;
  border-radius:1px;
  position:relative;
}
/* Liftkoord: licht tan/beige, loopt door de lamellen */
.blind-cords .cord-lift{
  background:linear-gradient(180deg, #b8a898 0%, #9a8b7a 50%, #8a7c6c 100%);
  box-shadow:1px 0 0 rgba(255,255,255,0.25);
}
/* Tiltkoord: dunner donker met cilindrische toggle onderaan */
.blind-cords .cord-tilt{
  width:1.5px;
  background:linear-gradient(180deg, #4a4540 0%, #2a2624 100%);
  box-shadow:0 0 0 0.5px rgba(0,0,0,0.3);
}
.blind-cords .cord-tilt::after{
  content:"";
  position:absolute;
  bottom:-8px;
  left:50%;
  transform:translateX(-50%);
  width:6px;
  height:10px;
  border-radius:3px;
  background:linear-gradient(180deg, #3d3835 0%, #2a2624 100%);
  border:1px solid rgba(0,0,0,0.4);
  box-shadow:0 1px 3px rgba(0,0,0,0.4);
}

/* Lamellen: donker hout, recht (geen perspectief), licht geopend = ruimte ertussen */
.blind-slats{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-right:4px;
}

.blind-slats .slat{
  height:11px;
  border-radius:0;
  /* Donker, matte houtlook */
  background:linear-gradient(
    180deg,
    #2e2b28 0%,
    #252320 30%,
    #1f1d1a 70%,
    #252320 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 1px 0 0 rgba(0,0,0,0.2);
  border:none;
  border-top:1px solid rgba(255,255,255,0.04);
  transform-origin:left center;
  transform:scaleX(0);
  opacity:0;
  animation:slatLoad 3s ease-in-out infinite;
  -webkit-animation:slatLoad 3s ease-in-out infinite;
  will-change:transform,opacity;
}

/* Lamellen één voor één, rustiger tempo */
.blind-slats .slat:nth-child(1){ animation-delay:0.00s; -webkit-animation-delay:0.00s; }
.blind-slats .slat:nth-child(2){ animation-delay:0.28s; -webkit-animation-delay:0.28s; }
.blind-slats .slat:nth-child(3){ animation-delay:0.56s; -webkit-animation-delay:0.56s; }
.blind-slats .slat:nth-child(4){ animation-delay:0.84s; -webkit-animation-delay:0.84s; }
.blind-slats .slat:nth-child(5){ animation-delay:1.12s; -webkit-animation-delay:1.12s; }
.blind-slats .slat:nth-child(6){ animation-delay:1.40s; -webkit-animation-delay:1.40s; }
.blind-slats .slat:nth-child(7){ animation-delay:1.68s; -webkit-animation-delay:1.68s; }
.blind-slats .slat:nth-child(8){ animation-delay:1.96s; -webkit-animation-delay:1.96s; }
.blind-slats .slat:nth-child(9){ animation-delay:2.24s; -webkit-animation-delay:2.24s; }
.blind-slats .slat:nth-child(10){ animation-delay:2.52s; -webkit-animation-delay:2.52s; }

@keyframes slatLoad{
  0%{ transform:scaleX(0); opacity:0; }
  22%{ transform:scaleX(1); opacity:1; }
  78%{ transform:scaleX(1); opacity:1; }
  100%{ transform:scaleX(0); opacity:0; }
}
@-webkit-keyframes slatLoad{
  0%{ transform:scaleX(0); opacity:0; }
  22%{ transform:scaleX(1); opacity:1; }
  78%{ transform:scaleX(1); opacity:1; }
  100%{ transform:scaleX(0); opacity:0; }
}

/* Onderrail (dikke onderste lamel) */
.blind-bottom-rail{
  height:14px;
  margin-top:2px;
  border-radius:0 0 4px 4px;
  background:linear-gradient(180deg, #2e2b28 0%, #252320 40%, #1f1d1a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 2px 6px rgba(0,0,0,0.25);
  border:1px solid rgba(0,0,0,0.3);
  border-top:1px solid rgba(255,255,255,0.04);
}

@media (min-width:700px){
  .sending{
    flex-direction:row;
    text-align:left;
  }
  .sending-text{ text-align:left; }
}

@media (prefers-reduced-motion: reduce){
  .blind-slats .slat{
    animation:slatLoad 6s ease-in-out infinite;
    -webkit-animation:slatLoad 6s ease-in-out infinite;
  }
}