/* Sniep Reserveren — frontend v1.1.0
   Kleuren komen via CSS-variabelen (ingesteld in de plugin).
   Het formulier is standaard een licht "kaartje" zodat het op elke
   achtergrond (donker of licht) mooi en leesbaar staat. */
.sniep-res{
  --sr-dark:#04273D; --sr-light:#F3ECE2; --sr-accent:#C8763B; --sr-green:#6E8B6E;
  max-width:680px; margin:0 auto;
  font-family:"Raleway", sans-serif;
  background:#FBF8F5;
  border-radius:18px;
  padding:38px 40px;
  box-shadow:0 24px 60px rgba(0,0,0,.22);
}
.sniep-res *{ box-sizing:border-box; }

.sniep-res-form{ display:flex; flex-direction:column; gap:16px; }
.sniep-res-row{ display:flex; gap:16px; flex-wrap:wrap; }
.sniep-res-row > .sniep-res-field{ flex:1 1 240px; }

.sniep-res-field{ display:flex; flex-direction:column; gap:6px; }
.sniep-res-label{
  font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  color:var(--sr-dark);
}
.sniep-res-opt{ font-weight:500; text-transform:none; opacity:.55; letter-spacing:0; }

.sniep-res input,
.sniep-res select,
.sniep-res textarea{
  width:100%; padding:12px 14px; font-size:16px; font-family:inherit;
  color:var(--sr-dark);
  background:#fff;
  border:1.5px solid rgba(4,39,61,.15); border-radius:9px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.sniep-res input:focus,
.sniep-res select:focus,
.sniep-res textarea:focus{
  outline:none; border-color:var(--sr-accent);
  box-shadow:0 0 0 3px rgba(200,118,59,.15);
}
.sniep-res textarea{ resize:vertical; min-height:96px; }

/* veld met fout */
.sniep-res-field.has-error input,
.sniep-res-field.has-error select{
  border-color:#d9534f; box-shadow:0 0 0 3px rgba(217,83,79,.12);
}
.sniep-res-err{ color:#d9534f; font-size:13px; min-height:0; }
.sniep-res-field.has-error .sniep-res-err{ min-height:16px; }

/* ---- tijdslots als knoppen (tajmahal-stijl) ---- */
.sniep-res-slots-wrap{ }
.sniep-res-slots{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:2px;
  min-height:0; align-items:center;
}
.sniep-res-hint{ color:rgba(4,39,61,.6); font-size:14px; margin:0; }
.sniep-res-slot{
  appearance:none; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:600;
  /* het thema forceert -webkit-text-fill-color:#fff op buttons; daarom
     beide expliciet zetten zodat de tijd zichtbaar is op de witte knop */
  color:#04273D !important;
  -webkit-text-fill-color:#04273D !important;
  background:#fff;
  border:1.5px solid rgba(4,39,61,.2); border-radius:10px;
  padding:10px 16px;
  transition:all .15s ease;
}
.sniep-res-slot:hover{ background:#fff !important; border-color:var(--sr-green) !important; transform:translateY(-1px); }
.sniep-res-slot.is-selected{
  background:var(--sr-green) !important; border-color:var(--sr-green) !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important; font-weight:700;
  box-shadow:0 6px 14px rgba(110,139,110,.32);
}
.sniep-res-slots.is-closed .sniep-res-hint{ color:#d9534f; }

/* spinner tijdens laden slots */
.sniep-res-slots.is-loading::after{
  content:""; width:18px; height:18px; border-radius:50%;
  border:2.5px solid rgba(4,39,61,.2); border-top-color:var(--sr-accent);
  animation:sniep-res-spin .7s linear infinite;
}
@keyframes sniep-res-spin{ to{ transform:rotate(360deg); } }

/* ---- verstuurknop ---- */
.sniep-res-actions{ margin-top:8px; }
.sniep-res-submit{
  appearance:none; cursor:pointer; width:100%;
  font-family:inherit; font-size:16px; font-weight:700; letter-spacing:.3px;
  color:#fff; background:var(--sr-accent);
  border:0; border-radius:9px; padding:16px 34px;
  transition:background .2s ease, transform .15s ease, opacity .2s ease;
}
.sniep-res-submit:hover{ transform:translateY(-2px); background:#b3692f; }
.sniep-res-submit:disabled{ opacity:.6; cursor:default; transform:none; }

/* ---- meldingen ---- */
.sniep-res-message{ font-size:15px; line-height:1.5; }
.sniep-res-message.is-success{
  background:rgba(110,139,110,.14); border-left:4px solid var(--sr-green);
  color:var(--sr-dark); padding:14px 18px; border-radius:8px;
}
.sniep-res-message.is-error{
  background:rgba(217,83,79,.1); border-left:4px solid #d9534f;
  color:#922; padding:14px 18px; border-radius:8px;
}

@media(max-width:560px){
  .sniep-res{ padding:28px 22px; }
  .sniep-res-row{ flex-direction:column; gap:16px; }
}