:root{
  --res-bg:#ffffff;
  --res-text:#182033;
  --res-muted:#6b7280;
  --res-field:#faf7f2;
  --res-border:#e6dfd6;
  --res-dark:#33404a;
  --res-accent:#e95500;
  --res-accent-dark:#cf4c00;
  --res-error:#991b1b;
  --res-ok:#166534;
  --res-radius:0px;
  --res-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; background:var(--res-bg); color:var(--res-text); font-family:var(--res-font); }
body{ min-width:280px; }

.res-wrap{ width:100%; max-width:980px; margin:0 auto; padding:34px 38px 46px; }

.res-msg{
  min-height:38px;
  margin:0 0 12px;
  padding:9px 12px;
  border:1px solid transparent;
  color:transparent;
  visibility:hidden;
  font-size:14px;
  line-height:1.35;
}
.res-msg.ok{ visibility:visible; color:var(--res-ok); background:#f0fdf4; border-color:#bbf7d0; }
.res-msg.err{ visibility:visible; color:var(--res-error); background:#fff1f2; border-color:#fecaca; }

.res-form{ margin:0; }
.res-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap:40px;
  row-gap:30px;
  align-items:start;
}

.field-group label{
  display:block;
  margin:0 0 7px;
  font-size:16px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.01em;
}

input, select, textarea, .date-fake{
  width:100%;
  height:40px;
  border:1px solid var(--res-border);
  border-radius:var(--res-radius);
  background:var(--res-field);
  color:var(--res-text);
  padding:8px 12px;
  font:inherit;
  font-size:16px;
  outline:none;
}
input:focus, select:focus, textarea:focus, .date-fake:focus{
  border-color:var(--res-accent);
  box-shadow:0 0 0 2px rgba(233,85,0,.12);
}
input:disabled, select:disabled, textarea:disabled{ opacity:.75; cursor:not-allowed; }
textarea{ min-height:50px; height:50px; resize:vertical; line-height:1.25; }

input[type="date"]{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.date-fake{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
  cursor:pointer;
}
.date-fake::after{
  content:"📅";
  margin-left:auto;
  font-size:15px;
  opacity:.75;
}

.radio-row{
  display:flex;
  align-items:center;
  gap:16px;
  height:40px;
  padding:3px 0 0;
}
.radio-row label{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0;
  font-size:15px;
  font-weight:700;
}
.radio-row input{ width:auto; height:auto; accent-color:var(--res-accent); }


/* Optionele inlog/account-functie in iframe */
.res-auth{
  margin:0 0 20px;
}
.res-auth-bar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  min-height:34px;
}
.auth-toggle-btn,
.auth-account-btn,
.auth-reservations-btn,
.auth-new-reservation-btn,
.auth-logout-btn,
.create-login-btn,
.auth-go-btn,
.register-go-btn{
  border:0;
  border-radius:0;
  font:inherit;
  font-weight:900;
  cursor:pointer;
  text-transform:uppercase;
}
.auth-toggle-btn,
.auth-account-btn,
.auth-reservations-btn,
.auth-new-reservation-btn,
.auth-logout-btn{
  height:34px;
  background:var(--res-dark);
  color:#fff;
  font-size:11px;
  padding:0 15px;
}
.auth-toggle-btn{
  width:96px;
}
.auth-reservations-btn{
  min-width:124px;
}
.auth-new-reservation-btn{
  min-width:154px;
}
.auth-toggle-btn:hover,
.auth-account-btn:hover,
.auth-reservations-btn:hover,
.auth-new-reservation-btn:hover,
.auth-logout-btn:hover,
.create-login-btn:hover,
.auth-go-btn:hover,
.register-go-btn:hover{
  filter:brightness(.94);
}
.auth-toggle-btn[hidden],
.auth-account-btn[hidden],
.auth-reservations-btn[hidden],
.auth-new-reservation-btn[hidden],
.auth-logout-btn[hidden],
.create-login-btn[hidden]{
  display:none !important;
}
.auth-panel,
.register-panel{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  margin-top:0;
  padding:0;
  border:0;
  background:transparent;
}
.auth-panel[hidden],
.register-panel[hidden]{ display:none !important; }
.register-panel{
  margin-top:9px;
}
.account-view,
.reservations-view{
  margin:0 0 22px;
}
.account-view[hidden],
.reservations-view[hidden]{
  display:none !important;
}
.field-wide{
  grid-column:span 2;
}
.account-view input[readonly],
.account-view textarea[readonly]{
  background:var(--res-field);
  color:var(--res-text);
}
.account-view textarea{
  min-height:62px;
  height:62px;
}
.reservations-placeholder{
  padding:12px;
  border:1px solid var(--res-border);
  background:var(--res-field);
  color:var(--res-muted);
  font-weight:800;
}

.auth-panel input[type="text"],
.auth-panel input[type="password"],
.register-panel input[type="text"],
.register-panel input[type="password"]{
  width:180px;
  height:34px;
  font-size:14px;
}
.auth-remember{
  display:flex;
  align-items:center;
  gap:6px;
  height:34px;
  margin:0;
  font-size:13px;
  font-weight:800;
}
.auth-remember input{
  width:auto;
  height:auto;
  accent-color:var(--res-accent);
}
.auth-go-btn{
  width:42px;
  height:34px;
  background:var(--res-accent);
  color:#fff;
  font-size:17px;
  line-height:1;
}
.auth-forgot-btn{
  border:0;
  background:transparent;
  color:var(--res-muted);
  font:inherit;
  font-size:12px;
  font-weight:800;
  text-decoration:underline;
  cursor:pointer;
}
.create-login-btn{
  width:128px;
  height:39px;
  background:var(--res-dark);
  color:#fff;
  font-size:10px;
}
.register-go-btn{
  height:34px;
  padding:0 15px;
  background:var(--res-accent);
  color:#fff;
  font-size:11px;
}


/* Account opslaan + reserveringen-overzicht */
.account-actions,
.reservation-edit-actions{
  margin-top:18px;
}
.account-save-btn,
.reservation-save-btn,
.reservation-cancel-btn,
.reservation-back-btn{
  width:auto;
  min-width:128px;
  height:44px;
}

.reservations-layout{
  display:grid;
  grid-template-columns:minmax(230px, 1fr) minmax(0, 3fr);
  gap:18px;
  align-items:start;
}
.reservations-card-list{
  display:block;
}
.reservations-count{
  margin:0 0 8px;
  color:var(--res-muted);
  font-size:12px;
  font-weight:900;
}
.reservations-card-scroll{
  display:grid;
  gap:8px;
  max-height:396px; /* ongeveer 6 compacte reserveringscards */
  overflow-y:auto;
  padding-right:6px;
  scrollbar-gutter:stable;
}
.reservations-card-scroll::-webkit-scrollbar{
  width:8px;
}
.reservations-card-scroll::-webkit-scrollbar-thumb{
  background:rgba(51,64,74,.25);
  border-radius:999px;
}
.reservation-card{
  width:100%;
  min-height:54px;
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-start;
  justify-content:center;
  border:1px solid rgba(51,64,74,.10);
  border-radius:16px;
  background:var(--res-field);
  color:var(--res-text);
  padding:7px 10px;
  text-align:left;
  cursor:pointer;
  font:inherit;
  box-shadow:0 1px 0 rgba(51,64,74,.04);
}
.reservation-card:hover{
  border-color:rgba(59,130,246,.45);
}
.reservation-card.active{
  border-color:#7bb7f0;
  box-shadow:0 0 0 2px rgba(123,183,240,.35);
}
.reservation-card-future{
  background:#edf8ef;
}
.reservation-card-pending{
  background:#fff9df;
  border-color:rgba(180,132,0,.16);
}
.reservation-card-cancelled{
  background:#fff1f1;
}
.reservation-card-past{
  background:#eeeeee;
  color:#5f6872;
}
.reservation-card-date{
  font-size:12px;
  font-weight:900;
  line-height:1.25;
}
.reservation-card-meta{
  font-size:12px;
  font-weight:800;
  line-height:1.25;
  opacity:.82;
}
.reservation-confirm-label{
  display:inline-flex;
  align-items:center;
  margin-left:6px;
  padding:1px 7px;
  border-radius:999px;
  background:#fff2b8;
  color:#6b4b00;
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
}
.reservation-title-confirm-label{
  transform:translateY(-1px);
  vertical-align:middle;
}
.reservation-card-status{
  display:none;
}
.reservation-summary{
  min-height:220px;
  border:1px solid rgba(51,64,74,.10);
  border-radius:16px;
  background:#fcfaf7;
  padding:14px;
}
.reservation-summary-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--res-border);
}
.reservation-summary-title{
  font-size:16px;
  font-weight:900;
  line-height:1.25;
}
.reservation-summary-subtitle{
  margin-top:3px;
  color:var(--res-muted);
  font-size:13px;
  font-weight:800;
}
.reservation-summary-grid,
.reservation-edit-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px 18px;
}
.summary-field{
  min-height:50px;
}
.summary-field label{
  display:block;
  margin:0 0 5px;
  font-size:13px;
  font-weight:900;
}
.summary-field div{
  min-height:34px;
  display:flex;
  align-items:center;
  border:1px solid var(--res-border);
  background:var(--res-field);
  padding:7px 10px;
  font-size:14px;
  font-weight:650;
  white-space:pre-wrap;
}

.reservation-overview-grid .summary-date-field{
  grid-column:span 2;
}
.reservation-overview-grid .summary-time-field,
.reservation-overview-grid .summary-amount-field{
  grid-column:span 1;
}
.summary-date-field input,
.summary-date-field .date-fake,
.summary-date-field div{
  font-size:15px;
  font-weight:800;
}
.summary-amount-field input,
.summary-amount-field div{
  max-width:120px;
}
.promotion-summary-field .summary-main-text{
  min-height:34px;
}
.summary-subline{
  margin-top:6px;
  padding:8px 10px;
  border:1px solid var(--res-border);
  background:#fff;
  color:var(--res-muted);
  font-size:13px;
  font-weight:650;
  line-height:1.35;
  white-space:pre-wrap;
}
.summary-comments-clamp{
  display:-webkit-box !important;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.35;
  max-height:4.1em;
  align-items:flex-start !important;
}
.summary-comments-edit{
  min-height:74px !important;
  height:74px !important;
}
.reservation-save-btn[hidden]{
  display:none !important;
}

.reservation-edit-grid textarea{
  min-height:70px;
  height:70px;
}
.reservation-date-fake{
  height:40px;
  background:var(--res-field);
  border-color:var(--res-border);
}
.reservations-empty{
  padding:12px;
  border:1px solid var(--res-border);
  background:var(--res-field);
  color:var(--res-muted);
  font-weight:800;
  font-size:13px;
}
.reservation-cancel-btn,
.reservation-save-btn,
.reservation-back-btn{
  border:0;
  border-radius:0;
  font:inherit;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  cursor:pointer;
  padding:0 15px;
}
.reservation-cancel-btn,
.reservation-save-btn{
  background:#8c2f25;
  color:#fff;
}
.reservation-cancel-btn:hover,
.reservation-save-btn:hover{
  background:#76261f;
}
.reservation-save-btn:disabled{
  opacity:.68;
  cursor:not-allowed;
}
.reservation-back-btn{
  background:var(--res-dark);
  color:#fff;
}
.cancel-confirm-card{
  border:1px solid rgba(140,47,37,.18);
  background:#fff7f5;
  border-radius:14px;
  padding:14px;
  font-size:14px;
  line-height:1.45;
}
.cancel-confirm-card p{
  margin:8px 0 0;
}

.promotion-area{ margin-top:28px; }
.promotion-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}
.promo-card{
  width:100%;
  min-height:180px;
  border:0;
  border-radius:4px;
  background:var(--res-dark);
  color:#fff;
  text-align:left;
  padding:14px 11px 13px;
  cursor:pointer;
  font:inherit;
  transition:background .15s ease, transform .15s ease, opacity .15s ease;
}
.promo-card:hover{ transform:translateY(-1px); }
.promo-card.active{ background:var(--res-accent); }
.promo-card.disabled{ opacity:.48; cursor:not-allowed; transform:none; }
.promo-title{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 0 18px;
  font-size:15px;
  font-weight:800;
}
.promo-radio{
  width:13px;
  height:13px;
  border-radius:50%;
  border:2px solid #fff;
  background:#fff;
  display:inline-block;
  flex:0 0 auto;
}
.promo-card.active .promo-radio{ background:#1583d8; box-shadow:inset 0 0 0 3px #fff; }
.promo-text{
  font-size:14px;
  line-height:1.48;
  font-weight:650;
}
.promo-reason{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.25);
  font-size:12px;
  line-height:1.35;
  font-weight:800;
}

.allergen-row{ margin-top:22px; display:none; }
.allergen-row textarea{ min-height:62px; height:62px; }

.res-actions{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:flex-start;
  margin-top:34px;
  padding-right:0;
}
.submit-btn{
  width:135px;
  height:55px;
  border:0;
  border-radius:0;
  background:var(--res-accent);
  color:#fff;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}
.submit-btn:hover{ background:var(--res-accent-dark); }
.submit-btn:disabled{
  background:#b8b8b8;
  color:#fff;
  opacity:1;
  cursor:not-allowed;
}
select option:disabled,
.time-option-disabled{
  color:rgba(24,32,51,.75);
  background:#f1eee8;
}

.hp-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

@media (max-width: 820px){
  .res-wrap{ padding:22px 18px 32px; }
  .res-grid{ grid-template-columns:1fr; row-gap:18px; }
  .reservations-layout{ grid-template-columns:1fr; }
  .reservation-summary-grid,
  .reservation-edit-grid{ grid-template-columns:1fr; }
  .reservation-overview-grid .summary-date-field,
  .reservation-overview-grid .summary-time-field,
  .reservation-overview-grid .summary-amount-field{ grid-column:auto; }
  .field-wide{ grid-column:auto; }
  .promotion-grid{ grid-template-columns:1fr; }
  .res-actions{ padding-right:0; justify-content:flex-start; align-items:stretch; flex-direction:column; }
  .submit-btn, .create-login-btn, .auth-toggle-btn, .auth-account-btn, .auth-reservations-btn, .auth-new-reservation-btn, .auth-logout-btn{ width:100%; }
  .auth-panel input[type="text"],
  .auth-panel input[type="password"],
  .register-panel input[type="text"],
  .register-panel input[type="password"]{ width:100%; }
  .auth-go-btn, .register-go-btn{ width:100%; }
}
.account-save-btn[hidden]{
  display:none !important;
}

/* ============================================================
   IFRAME AUTH V10 - reservering detail tuning
   ============================================================ */
.field-full{
  grid-column:1 / -1;
}
.reservation-summary{
  background:#f8fbff;
  border-color:rgba(51,64,74,.08);
  box-shadow:0 1px 0 rgba(51,64,74,.03);
}
.reservation-summary-head{
  margin-bottom:12px;
  padding-bottom:9px;
}
.reservation-summary-title{
  font-size:16px;
  line-height:1.25;
}
.reservation-summary-grid,
.reservation-edit-grid{
  gap:14px 16px;
}
.summary-field,
.reservation-edit-grid .field-group{
  min-height:64px;
}
.summary-field label,
.reservation-edit-grid .field-group label{
  display:block;
  margin:0 0 5px;
  font-size:13px;
  line-height:1.15;
  font-weight:900;
}
.summary-field div,
.reservation-edit-grid input,
.reservation-edit-grid select,
.reservation-edit-grid .date-fake{
  min-height:40px;
  height:40px;
  display:flex;
  align-items:center;
  width:100%;
  padding:8px 10px;
  font-size:14px;
  line-height:1.25;
  font-weight:650;
  border:1px solid var(--res-border);
  border-radius:var(--res-radius);
}
.summary-date-field input,
.summary-date-field .date-fake,
.summary-date-field div,
.summary-time-field select,
.summary-time-field div{
  font-size:14px;
  font-weight:650;
}
.summary-amount-field input,
.summary-amount-field div{
  max-width:none;
}
.editable-reservation-grid input,
.editable-reservation-grid select,
.editable-reservation-grid textarea,
.editable-reservation-grid .date-fake{
  background:#eef7ff;
  border-color:#c8e4fb;
}
.editable-reservation-grid input:focus,
.editable-reservation-grid select:focus,
.editable-reservation-grid textarea:focus,
.editable-reservation-grid .date-fake:focus{
  border-color:#7bb7f0;
  box-shadow:0 0 0 2px rgba(123,183,240,.22);
}
.promotion-select-field{
  grid-column:span 1;
}
.promotion-explain-card{
  width:100%;
  min-height:42px;
  padding:10px 12px;
  border:1px solid rgba(51,64,74,.09);
  background:#ffffff;
  color:var(--res-muted);
  font-size:13px;
  font-weight:650;
  line-height:1.38;
  white-space:pre-wrap;
}
.promotion-explain-card[hidden]{
  display:none !important;
}
.summary-comments-clamp{
  width:100%;
  min-height:58px !important;
  max-height:4.25em;
  background:#ffffff;
  align-items:flex-start !important;
}
.summary-comments-edit{
  width:100%;
  min-height:74px !important;
  height:74px !important;
  line-height:1.35;
}
.reservation-date-fake{
  background:#eef7ff;
  border-color:#c8e4fb;
}
@media (max-width:720px){
  .field-full{ grid-column:auto; }
}


/* ============================================================
   IFRAME AUTH V13 - wijzigknop altijd zichtbaar + promotiekaart
   ============================================================ */
.reservation-save-btn{
  background:#8c2f25;
  color:#fff;
  transition:background .15s ease, opacity .15s ease;
}
.reservation-save-btn:disabled,
.reservation-save-btn:disabled:hover{
  background:#b8b8b8;
  color:#fff;
  opacity:1;
  cursor:not-allowed;
}
.reservation-save-btn.is-dirty:not(:disabled){
  background:#8c2f25;
  color:#fff;
}
.reservation-save-btn.is-dirty:not(:disabled):hover{
  background:#76261f;
}
.editable-promotion-summary[hidden]{
  display:none !important;
}

/* ============================================================
   IFRAME AUTH V14 - account/inlog email layout
   ============================================================ */
.res-actions.reservation-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}

.res-actions.reservation-actions .submit-btn,
.res-actions.reservation-actions .create-login-btn{
  width:168px;
  height:55px;
  font-size:12px;
}

.res-actions.reservation-actions .register-panel{
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  display:inline-flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}

.res-actions.reservation-actions .register-panel[hidden]{
  display:none !important;
}

.res-actions.reservation-actions .register-panel input[type="password"]{
  width:178px;
  height:40px;
  font-size:14px;
}

.res-actions.reservation-actions .register-go-btn{
  height:40px;
  padding:0 15px;
}

.account-grid{
  grid-template-columns:repeat(12, minmax(0, 1fr));
  column-gap:22px;
  row-gap:18px;
}

.account-col-salutation{ grid-column:span 2; }
.account-col-company{ grid-column:span 4; }
.account-col-name{ grid-column:span 6; }
.account-col-contact{ grid-column:span 4; }
.account-col-phone{ grid-column:span 3; }
.account-col-email{ grid-column:span 5; }
.account-col-details{ grid-column:span 8; }
.account-col-allergen{ grid-column:span 4; }
.account-col-username{ grid-column:span 4; }
.account-col-password{ grid-column:span 4; }
.account-col-password-confirm{ grid-column:span 4; }

.account-grid input,
.account-grid select,
.account-grid textarea{
  height:40px;
}

.account-grid textarea{
  min-height:72px;
  height:72px;
}

@media (max-width: 820px){
  .account-grid{ grid-template-columns:1fr; }
  .account-col-salutation,
  .account-col-company,
  .account-col-name,
  .account-col-contact,
  .account-col-phone,
  .account-col-email,
  .account-col-details,
  .account-col-allergen,
  .account-col-username,
  .account-col-password,
  .account-col-password-confirm{ grid-column:auto; }

  .res-actions.reservation-actions .submit-btn,
  .res-actions.reservation-actions .create-login-btn,
  .res-actions.reservation-actions .register-panel,
  .res-actions.reservation-actions .register-panel input[type="password"],
  .res-actions.reservation-actions .register-go-btn{
    width:100%;
  }
}

/* ============================================================
   V15 - aanvraag-flow, foutbalk en eigen datepicker
   ============================================================ */
.field-group{ position:relative; }

.res-msg.err{
  position:relative;
  cursor:help;
}
.res-msg.err[data-hover]::after{
  content:attr(data-hover);
  position:absolute;
  left:12px;
  top:calc(100% + 6px);
  z-index:50;
  display:none;
  max-width:min(560px, calc(100vw - 60px));
  padding:9px 11px;
  background:#fff7f7;
  border:1px solid #fecaca;
  box-shadow:0 10px 24px rgba(24,32,51,.12);
  color:var(--res-error);
  font-size:13px;
  line-height:1.35;
  white-space:normal;
}
.res-msg.err:hover::after,
.res-msg.err:focus-within::after{ display:block; }

input.field-error,
select.field-error,
textarea.field-error,
.date-fake.field-error{
  border-color:#dc2626 !important;
  box-shadow:0 0 0 2px rgba(220,38,38,.12) !important;
}

.res-success-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(255,255,255,.72);
  opacity:0;
  pointer-events:none;
  transition:opacity .26s ease;
}
.res-success-overlay.is-visible{
  opacity:1;
  pointer-events:auto;
}
.res-success-overlay.is-leaving{ opacity:0; }
.res-success-card{
  width:min(460px, 92vw);
  background:#ffffff;
  border:1px solid rgba(22,101,52,.18);
  box-shadow:0 24px 70px rgba(24,32,51,.18);
  padding:28px 30px;
  text-align:center;
  transform:translateY(8px) scale(.98);
  transition:transform .26s ease;
}
.res-success-overlay.is-visible .res-success-card{
  transform:translateY(0) scale(1);
}
.res-success-icon{
  width:44px;
  height:44px;
  margin:0 auto 13px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#dcfce7;
  color:#166534;
  font-size:25px;
  font-weight:900;
}
.res-success-title{
  margin:0 0 7px;
  color:#12301f;
  font-size:20px;
  line-height:1.15;
  font-weight:900;
}
.res-success-text{
  color:#315042;
  font-size:15px;
  line-height:1.45;
  font-weight:650;
}

.res-datepicker{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:60;
  width:292px;
  max-width:calc(100vw - 40px);
  padding:10px;
  background:#fffdf9;
  border:1px solid rgba(51,64,74,.18);
  box-shadow:0 20px 45px rgba(24,32,51,.18);
  color:var(--res-text);
}
.res-datepicker[hidden]{ display:none !important; }
.res-datepicker-head{
  display:grid;
  grid-template-columns:34px 1fr 34px;
  align-items:center;
  gap:6px;
  margin:0 0 8px;
}
.res-datepicker-title{
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, #ffffff, #f3ede5);
  border:1px solid var(--res-border);
  color:#26323d;
  font-size:15px;
  font-weight:900;
  text-transform:capitalize;
}
.res-datepicker-nav{
  height:34px;
  border:0;
  background:var(--res-dark);
  color:#fff;
  font-size:20px;
  font-weight:900;
  cursor:pointer;
}
.res-datepicker-weekdays,
.res-datepicker-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:4px;
}
.res-datepicker-weekdays{
  margin:0 0 5px;
}
.res-datepicker-weekdays span{
  text-align:center;
  color:#4b5563;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}
.res-datepicker-empty{ min-height:32px; }
.res-datepicker-day{
  min-width:0;
  height:32px;
  border:1px solid #e8dfd3;
  background:#fbf8f3;
  color:#26323d;
  font:inherit;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
}
.res-datepicker-day:hover{
  border-color:var(--res-accent);
  background:#fff2e9;
}
.res-datepicker-day.is-today{
  box-shadow:inset 0 0 0 2px rgba(233,85,0,.18);
}
.res-datepicker-day.is-active{
  background:var(--res-accent);
  border-color:var(--res-accent-dark);
  color:#fff;
}
.res-datepicker-day:disabled{
  opacity:.35;
  cursor:not-allowed;
  background:#f3f1ee;
}

/* Knoppen reserveren/inlog aanmaken gelijkwaardig houden */
.res-actions.reservation-actions .submit-btn,
.res-actions.reservation-actions .create-login-btn{
  min-width:135px;
  height:44px;
}

/* ============================================================
   V16 - veldfouten lokaal, bevestiging midden formulier
   ============================================================ */
.res-wrap{
  position:relative;
}

/* Geen foutbalk bovenaan meer; fouten verschijnen bij het veld zelf. */
.res-msg{
  display:none !important;
}

.field-group,
.promotion-area,
.res-actions,
.auth-panel,
.register-panel,
.account-view{
  position:relative;
}

.res-field-error-tip{
  position:absolute;
  left:8px;
  top:calc(100% + 5px);
  z-index:120;
  display:none;
  max-width:min(310px, calc(100vw - 50px));
  padding:8px 10px;
  background:#fffaf2;
  border:1px solid rgba(140,47,37,.42);
  box-shadow:0 12px 28px rgba(24,32,51,.16);
  color:#7f1d1d;
  font-size:12px;
  line-height:1.35;
  font-weight:750;
}

.field-group:has(.field-error):hover > .res-field-error-tip,
.field-group:has(.field-error:focus) > .res-field-error-tip,
.promotion-area:has(.field-error):hover > .res-field-error-tip,
.promotion-area:has(.field-error:focus) > .res-field-error-tip,
.res-actions:has(.field-error):hover > .res-field-error-tip,
.res-actions:has(.field-error:focus) > .res-field-error-tip,
.auth-panel:has(.field-error):hover > .res-field-error-tip,
.auth-panel:has(.field-error:focus) > .res-field-error-tip,
.register-panel:has(.field-error):hover > .res-field-error-tip,
.register-panel:has(.field-error:focus) > .res-field-error-tip{
  display:block;
}

input.field-error,
select.field-error,
textarea.field-error,
.date-fake.field-error,
button.field-error{
  border-color:#dc2626 !important;
  box-shadow:0 0 0 2px rgba(220,38,38,.12) !important;
}

/* Bevestiging in het midden van het formulier, niet als volledige pagina-toast. */
.res-success-overlay{
  position:absolute;
  inset:0;
  min-height:360px;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.62);
  border-radius:10px;
}
.res-success-card{
  border-radius:14px;
}

/* Knoppen hoofdformulier lager maken. */
.res-actions.reservation-actions .submit-btn,
.res-actions.reservation-actions .create-login-btn{
  height:40px;
  min-height:40px;
}

/* Klikbare actie/promotie duidelijker: roodtint, half transparant; geselecteerd massiever. */
.promo-card:not(.disabled){
  background:rgba(140,47,37,.50);
  border:1px solid rgba(140,47,37,.34);
}
.promo-card:not(.disabled):hover{
  background:rgba(140,47,37,.66);
}
.promo-card.active{
  background:#8c2f25;
  border-color:#76261f;
}

/* Datepicker iets zachter/fancy, maar compact. */
.res-datepicker{
  border-radius:14px;
  padding:12px;
  width:286px;
  background:linear-gradient(180deg, #fffdf9, #f8f1e8);
  border-color:rgba(140,47,37,.16);
}
.res-datepicker-title{
  border-radius:10px;
  background:linear-gradient(180deg, #ffffff, #efe4d7);
}
.res-datepicker-nav{
  border-radius:10px;
}
.res-datepicker-day{
  border-radius:9px;
  height:31px;
}

/* Inline meldingen bij inloggen/registreren/wachtwoord vergeten */
.auth-inline-msg{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  max-width:260px;
  padding:0 9px;
  font-size:12px;
  font-weight:800;
  line-height:1.25;
  color:var(--res-muted);
}
.auth-inline-msg:empty{ display:none; }
.auth-inline-msg.ok{
  color:#166534;
  background:#f0fdf4;
  border:1px solid #bbf7d0;
}
.auth-inline-msg.err{
  color:#991b1b;
  background:#fff1f2;
  border:1px solid #fecaca;
}


/* ============================================================
   V18 - inline auth-resultaten zonder velden
   ============================================================ */
.auth-panel.is-inline-result,
.register-panel.is-inline-result{
  display:inline-flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:0;
  height:40px;
  min-height:40px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
}

.auth-panel.is-inline-result > :not(.auth-inline-msg),
.register-panel.is-inline-result > :not(.auth-inline-msg){
  display:none !important;
}

.auth-panel.is-inline-result .auth-inline-msg,
.register-panel.is-inline-result .auth-inline-msg{
  display:inline-flex;
  align-items:center;
  height:40px;
  min-height:40px;
  max-width:none;
  padding:0 12px;
  white-space:nowrap;
  font-size:12px;
  font-weight:600;
  line-height:1;
}

.auth-panel.is-inline-result .auth-inline-msg.ok,
.register-panel.is-inline-result .auth-inline-msg.ok{
  color:#166534;
  background:#ecfdf3;
  border:1px solid #bbf7d0;
}

.auth-panel.is-inline-result .auth-inline-msg.err,
.register-panel.is-inline-result .auth-inline-msg.err{
  color:#991b1b;
  background:#fff1f2;
  border:1px solid #fecaca;
}

/* Inline melding achter INLOG AANMAKEN / INLOGGEN netjes op één regel. */
.auth-inline-msg{
  font-weight:600;
}

@media (max-width: 760px){
  .auth-panel.is-inline-result .auth-inline-msg,
  .register-panel.is-inline-result .auth-inline-msg{
    white-space:normal;
    line-height:1.25;
    height:auto;
    min-height:40px;
  }
}

/* ============================================================
   V19 - promotiekaarten, beschikbaarheidsreden en lichtere typografie
   ============================================================ */
.field-group label{
  font-weight:650;
  letter-spacing:.005em;
}
.radio-row label{
  font-weight:600;
}
.auth-toggle-btn,
.auth-account-btn,
.auth-reservations-btn,
.auth-new-reservation-btn,
.auth-logout-btn,
.create-login-btn,
.auth-go-btn,
.register-go-btn,
.submit-btn,
.res-actions.reservation-actions .submit-btn,
.res-actions.reservation-actions .cancel-reservation-btn,
.reservation-change-btn,
.reservation-cancel-btn{
  font-weight:700 !important;
}
.promotion-grid{
  align-items:stretch;
  grid-auto-rows:1fr;
}
.promo-card,
.promo-card:not(.disabled){
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
  height:100%;
  min-height:150px;
  border-radius:5px;
  background:rgba(233,85,0,.74);
  border:1px solid rgba(207,76,0,.34);
  color:#fff;
  padding:13px 11px 12px;
  font-weight:500;
}
.promo-card:not(.disabled):hover{
  background:rgba(233,85,0,.88);
}
.promo-card.active{
  background:var(--res-accent);
  border-color:var(--res-accent-dark);
}
.promo-card.disabled{
  background:rgba(233,85,0,.34);
  border-color:rgba(207,76,0,.20);
  color:rgba(255,255,255,.86);
  opacity:1;
  cursor:not-allowed;
}
.promo-title{
  align-items:flex-start;
  margin:0 0 10px;
  font-size:14px;
  line-height:1.25;
  font-weight:650;
}
.promo-radio{
  margin-top:2px;
}
.promo-text{
  font-size:13px;
  line-height:1.38;
  font-weight:500;
}
.promo-reason{
  width:100%;
  margin-top:auto;
  padding-top:9px;
  border-top:1px solid rgba(255,255,255,.24);
  color:rgba(255,255,255,.72);
  font-size:11.5px;
  line-height:1.32;
  font-weight:500;
}
.res-datepicker-title,
.res-datepicker-nav,
.res-datepicker-weekdays span,
.res-datepicker-day{
  font-weight:600;
}
.res-datepicker-title{
  font-size:14px;
}
.res-datepicker-weekdays span{
  font-size:10.5px;
}
.res-datepicker-day{
  font-size:13.5px;
}
.reservation-edit-grid .field-group label{
  font-weight:650;
}

/* ============================================================
   V20 - rustige tenantkleuren, exacte reserveringsselectie en contactpillen
   Afmetingen en grid blijven ongewijzigd.
   ============================================================ */
:root{
  --res-blue:var(--tenant-primary, #557a95);
  --res-blue-strong:var(--tenant-primary-strong, #38576f);
  --res-blue-soft:var(--tenant-primary-soft, rgba(85,122,149,.12));
  --res-green:#377c58;
  --res-green-soft:rgba(55,124,88,.10);
  --res-red:#a94e50;
  --res-red-soft:rgba(169,78,80,.10);
  --res-gold:#a77b22;
  --res-gold-soft:rgba(167,123,34,.11);
  --res-neutral-soft:rgba(70,82,96,.065);
}

input:focus, select:focus, textarea:focus, .date-fake:focus{
  border-color:rgba(85,122,149,.58);
  box-shadow:0 0 0 2px var(--res-blue-soft);
}
.auth-toggle-btn,.auth-account-btn,.auth-reservations-btn,.auth-new-reservation-btn,.auth-logout-btn,.create-login-btn{
  background:var(--res-blue-strong);
}
.auth-go-btn,.register-go-btn,.submit-btn{ background:var(--res-blue); }

.reservations-placeholder,.reservations-empty{
  background:var(--res-neutral-soft);
  border-color:rgba(70,82,96,.10);
}
.reservation-card{
  background:rgba(255,255,255,.72);
  border-color:rgba(70,82,96,.11);
  box-shadow:0 1px 3px rgba(45,58,70,.035);
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.reservation-card:hover{
  border-color:rgba(85,122,149,.34);
  box-shadow:0 2px 8px rgba(45,58,70,.06);
}
.reservation-card.active{
  border-color:rgba(85,122,149,.58);
  box-shadow:0 0 0 2px var(--res-blue-soft);
}
.reservation-card-future{ background:var(--res-green-soft); }
.reservation-card-pending{ background:var(--res-gold-soft); border-color:rgba(167,123,34,.20); }
.reservation-card-cancelled{ background:var(--res-red-soft); border-color:rgba(169,78,80,.17); }
.reservation-card-past{ background:var(--res-neutral-soft); color:#66717c; }
.reservation-confirm-label{ background:var(--res-gold-soft); color:#765712; border:1px solid rgba(167,123,34,.18); }
.reservation-summary{
  background:rgba(85,122,149,.035);
  border-color:rgba(85,122,149,.13);
  box-shadow:0 6px 18px rgba(48,66,82,.035);
}
.summary-comments-clamp.is-empty{ color:var(--res-muted); font-style:italic; }
.promotion-card,.promotion-summary-card,.promotion-explain-card{
  background:rgba(85,122,149,.045);
  border-color:rgba(85,122,149,.13);
}
.promotion-card.selected,.promotion-card:has(input:checked){
  background:var(--res-blue-soft);
  border-color:rgba(85,122,149,.42);
}
.res-msg.ok,.auth-inline-msg.ok{ background:var(--res-green-soft); color:#286543; border-color:rgba(55,124,88,.22); }
.res-msg.err,.auth-inline-msg.err{ background:var(--res-red-soft); color:#873d40; border-color:rgba(169,78,80,.22); }

/* Accountcontacten: 40px hoog; dropdown zweeft en vergroot de layout niet. */
.contact-editor{ position:relative; width:100%; height:40px; }
.contact-preview{
  width:100%; height:40px; display:flex; align-items:center; gap:6px;
  padding:5px 8px; border:1px solid var(--res-border); background:var(--res-field);
  color:var(--res-text); font:inherit; text-align:left; cursor:pointer; overflow:hidden;
}
.contact-preview:focus{ border-color:rgba(85,122,149,.58); box-shadow:0 0 0 2px var(--res-blue-soft); outline:0; }
.contact-pill{ min-width:0; max-width:calc(100% - 50px); display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:999px; font-size:12px; font-weight:750; white-space:nowrap; overflow:hidden; }
.contact-pill > span:first-child{ overflow:hidden; text-overflow:ellipsis; }
.contact-pill.email{ background:var(--res-blue-soft); color:var(--res-blue-strong); border:1px solid rgba(85,122,149,.17); }
.contact-pill.phone{ background:var(--res-green-soft); color:#286543; border:1px solid rgba(55,124,88,.17); }
.contact-default-mark{ color:var(--res-gold); font-size:10px; flex:none; }
.contact-more{ flex:none; padding:2px 6px; border-radius:999px; background:var(--res-neutral-soft); color:var(--res-muted); font-size:11px; font-weight:800; }
.contact-empty{ color:var(--res-muted); font-size:13px; }
.contact-chevron{ margin-left:auto; color:var(--res-muted); font-size:13px; }
.contact-menu{
  position:absolute; z-index:80; top:43px; left:0; right:0; max-height:176px; overflow:auto;
  padding:5px; background:rgba(255,255,255,.98); border:1px solid rgba(85,122,149,.18);
  box-shadow:0 10px 24px rgba(38,53,66,.12); backdrop-filter:blur(8px);
}
.contact-menu[hidden]{ display:none !important; }
.contact-menu-item{ width:100%; min-height:31px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 7px; border:0; background:transparent; color:var(--res-text); font:inherit; font-size:12px; text-align:left; cursor:pointer; }
.contact-menu-item:hover{ background:var(--res-blue-soft); }
.contact-menu-item.is-primary{ background:var(--res-gold-soft); }
.contact-default-text{ color:#765712; font-size:10px; font-weight:850; text-transform:uppercase; }
.contact-make-default{ color:var(--res-muted); font-size:10px; opacity:0; }
.contact-menu-item:hover .contact-make-default{ opacity:1; }
.contact-menu-empty{ padding:7px; color:var(--res-muted); font-size:12px; }
.contact-edit-raw{ position:absolute; right:25px; top:0; height:40px; padding:0 7px; border:0; background:transparent; color:var(--res-blue-strong); font:inherit; font-size:9px; font-weight:850; cursor:pointer; opacity:0; pointer-events:none; }
.contact-editor:hover .contact-edit-raw,.contact-editor.is-open .contact-edit-raw{ opacity:.65; pointer-events:auto; }
.contact-editor.is-editing .contact-preview,.contact-editor.is-editing .contact-edit-raw{ display:none; }
.contact-raw-input{ width:100%; height:40px; }
.contact-raw-input[hidden]{ display:none !important; }


/* V21 - contactkeuze in Nieuwe reservering, zonder extra hoogte/breedte. */
.contact-editor.is-plain .contact-preview,
.contact-editor.is-plain .contact-menu,
.contact-editor.is-plain .contact-edit-raw{ display:none !important; }
.contact-editor.is-plain .contact-raw-input{ display:block !important; }
.contact-editor-single:not(.is-plain) .contact-edit-raw{ right:26px; }
.contact-editor-single:not(.is-plain):hover .contact-edit-raw,
.contact-editor-single:not(.is-plain).is-open .contact-edit-raw{ opacity:.62; pointer-events:auto; }
.contact-editor.field-error .contact-preview,
.contact-editor .contact-preview.field-error{
  border-color:rgba(169,78,80,.55);
  box-shadow:0 0 0 2px var(--res-red-soft);
}


/* ============================================================
   V22 - account toevoegen/opslaan + gelijke reserveringsvelden
   ============================================================ */
.account-save-btn{ display:inline-flex !important; align-items:center; justify-content:center; }
.account-save-btn:disabled{ opacity:.48; cursor:not-allowed; }
.contact-editor:not(.contact-editor-single) .contact-preview{ padding-right:62px; }
.contact-editor:not(.contact-editor-single) .contact-edit-raw{
  right:42px; width:22px; padding:0; opacity:.58; pointer-events:auto; font-size:14px;
}
.contact-editor:not(.contact-editor-single) .contact-add{
  position:absolute; right:20px; top:0; width:22px; height:40px; padding:0;
  border:0; background:transparent; color:var(--res-blue-strong); font:inherit;
  font-size:19px; line-height:1; font-weight:650; cursor:pointer; opacity:.72;
}
.contact-editor:not(.contact-editor-single) .contact-add:hover,
.contact-editor:not(.contact-editor-single) .contact-edit-raw:hover{ opacity:1; }
.contact-editor.is-editing .contact-add{ display:none; }

.contact-add-overlay{
  position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  padding:18px; background:rgba(24,32,51,.18); backdrop-filter:blur(2px);
}
.contact-add-overlay[hidden]{ display:none !important; }
.contact-add-card{
  width:min(360px, 100%); padding:18px; border:1px solid rgba(85,122,149,.18);
  background:rgba(255,255,255,.985); box-shadow:0 18px 44px rgba(32,46,59,.17);
}
.contact-add-title{ margin:0 0 12px; font-size:16px; font-weight:800; color:var(--res-text); }
.contact-add-input{ width:100%; height:40px; }
.contact-add-error{ min-height:18px; margin-top:5px; color:#873d40; font-size:11px; font-weight:650; }
.contact-add-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
.contact-add-cancel,.contact-add-save{
  height:36px; padding:0 13px; border:0; font:inherit; font-size:11px; font-weight:800; cursor:pointer;
}
.contact-add-cancel{ background:var(--res-neutral-soft); color:var(--res-text); }
.contact-add-save{ background:var(--res-blue-strong); color:#fff; }

.editable-reservation-grid input,
.editable-reservation-grid select,
.editable-reservation-grid textarea,
.editable-reservation-grid .date-fake,
.reservation-date-fake{
  background:var(--res-field);
  border-color:var(--res-border);
}
.editable-reservation-grid input:focus,
.editable-reservation-grid select:focus,
.editable-reservation-grid textarea:focus,
.editable-reservation-grid .date-fake:focus,
.reservation-date-fake:focus{
  border-color:rgba(85,122,149,.58);
  box-shadow:0 0 0 2px var(--res-blue-soft);
}


/* ============================================================
   V23 - één rustige veldstijl, inline contacttoevoeging en datepicker 1,4x
   ============================================================ */
:root{
  --res-bg:#ffffff;
  --res-text:#2f3b4d;
  --res-muted:#667488;
  --res-field:#f7f9fc;
  --res-field-hover:#f3f6fa;
  --res-border:#d9e1ea;
  --res-border-strong:#c8d3df;
  --res-dark:var(--res-blue-strong, #3b4d66);
  --res-accent:var(--res-blue, #557a95);
  --res-accent-dark:var(--res-blue-strong, #38576f);
  --res-radius:11px;
}

/* Alle invoervelden: dezelfde lichte blauwgrijze stijl als Gastbeheer. */
input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
select,
textarea,
.date-fake,
.summary-field div,
.promotion-explain-card,
.contact-preview{
  border:1px solid var(--res-border);
  border-radius:var(--res-radius);
  background:var(--res-field);
  color:var(--res-text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):hover,
select:hover,
textarea:hover,
.date-fake:hover,
.contact-preview:hover{
  background:var(--res-field-hover);
  border-color:var(--res-border-strong);
}
input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):focus,
select:focus,
textarea:focus,
.date-fake:focus,
.contact-preview:focus{
  border-color:rgba(85,122,149,.62);
  box-shadow:0 0 0 3px var(--res-blue-soft), inset 0 1px 0 rgba(255,255,255,.78);
  background:#fff;
  outline:0;
}
input::placeholder,
textarea::placeholder{ color:#a3adba; opacity:1; }
input:disabled,
select:disabled,
textarea:disabled{
  background:#f1f3f6;
  color:#8d98a6;
  border-color:#e0e5eb;
  opacity:1;
}
textarea{ line-height:1.38; }

.field-group label,
.summary-field label,
.reservation-edit-grid .field-group label{
  color:#5f6d80;
  font-size:13px;
  line-height:1.2;
  font-weight:750;
  letter-spacing:0;
}
.radio-row label{ color:var(--res-text); font-weight:650; }
.radio-row input,
.auth-remember input{ accent-color:var(--res-blue); }

/* Account: e-mail krijgt bewust meer ruimte; de totale gridbreedte blijft gelijk. */
.account-col-contact{ grid-column:span 3; }
.account-col-phone{ grid-column:span 3; }
.account-col-email{ grid-column:span 6; }
.account-grid{ column-gap:22px; row-gap:22px; }
.account-grid input,
.account-grid select,
.account-grid textarea{ border-radius:var(--res-radius); }

/* Eén consistente knopfamilie. */
.auth-toggle-btn,
.auth-account-btn,
.auth-reservations-btn,
.auth-new-reservation-btn,
.auth-logout-btn,
.create-login-btn,
.auth-go-btn,
.register-go-btn,
.submit-btn,
.account-save-btn,
.reservation-save-btn,
.reservation-cancel-btn,
.reservation-back-btn,
.contact-inline-save,
.contact-inline-cancel{
  border:1px solid transparent;
  border-radius:10px;
  font-family:var(--res-font);
  font-weight:800;
  box-shadow:0 1px 2px rgba(37,50,66,.08);
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease, opacity .14s ease;
}
.auth-toggle-btn:hover,
.auth-account-btn:hover,
.auth-reservations-btn:hover,
.auth-new-reservation-btn:hover,
.auth-logout-btn:hover,
.create-login-btn:hover,
.auth-go-btn:hover,
.register-go-btn:hover,
.submit-btn:hover,
.account-save-btn:hover,
.reservation-save-btn:hover,
.reservation-cancel-btn:hover,
.reservation-back-btn:hover{
  filter:none;
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(37,50,66,.12);
}
.auth-toggle-btn,
.auth-account-btn,
.auth-reservations-btn,
.auth-new-reservation-btn,
.auth-logout-btn,
.auth-go-btn,
.register-go-btn,
.submit-btn,
.account-save-btn,
.reservation-save-btn,
.reservation-back-btn{
  background:var(--res-blue-strong);
  color:#fff;
}
.create-login-btn{
  background:var(--res-blue-soft);
  border-color:rgba(85,122,149,.18);
  color:var(--res-blue-strong);
}
.reservation-cancel-btn{
  background:rgba(169,78,80,.14);
  border-color:rgba(169,78,80,.22);
  color:#8f3f42;
}
.reservation-cancel-btn:hover{ background:rgba(169,78,80,.21); }
.submit-btn:disabled,
.account-save-btn:disabled,
.reservation-save-btn:disabled,
.reservation-save-btn:disabled:hover{
  background:#e2e6eb;
  border-color:#d8dde4;
  color:#929ca8;
  box-shadow:none;
  transform:none;
  opacity:1;
}
.auth-forgot-btn{ color:var(--res-blue-strong); text-underline-offset:3px; }

/* Reserveringsoverzicht en bewerkvelden dezelfde tint als de rest. */
.reservation-summary{
  background:rgba(247,249,252,.82);
  border-color:var(--res-border);
  border-radius:18px;
  box-shadow:0 8px 24px rgba(42,56,72,.055);
}
.reservation-card{
  border-radius:14px;
  box-shadow:0 2px 8px rgba(42,56,72,.045);
}
.editable-reservation-grid input,
.editable-reservation-grid select,
.editable-reservation-grid textarea,
.editable-reservation-grid .date-fake,
.reservation-date-fake{
  background:var(--res-field);
  border-color:var(--res-border);
}
.promotion-explain-card,
.summary-subline{ border-radius:var(--res-radius); background:var(--res-field); }
.cancel-confirm-card{ border-radius:14px; }

/* Promotieknoppen als zachte selecteerbare kaarten. */
.promo-card,
.promo-card:not(.disabled){
  border-radius:14px;
  background:var(--res-blue-strong);
  border:1px solid rgba(56,87,111,.16);
  box-shadow:0 4px 12px rgba(38,53,68,.08);
}
.promo-card:not(.disabled):hover{ background:#435b72; }
.promo-card.active{
  background:var(--res-blue);
  border-color:rgba(56,87,111,.38);
  box-shadow:0 0 0 3px var(--res-blue-soft), 0 5px 14px rgba(38,53,68,.10);
}

/* Contacten blijven in één balk. Elke Enter in de database wordt een eigen pil. */
.contact-editor{ height:40px; }
.contact-preview{
  height:40px;
  padding:5px 62px 5px 8px;
  overflow:hidden;
}
.contact-pill-list{
  min-width:0;
  display:flex;
  align-items:center;
  gap:5px;
  overflow:hidden;
  white-space:nowrap;
}
.contact-pill{
  flex:0 1 auto;
  max-width:100%;
  min-width:0;
  padding:4px 8px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:750;
}
.contact-pill.email{ background:rgba(85,122,149,.12); border-color:rgba(85,122,149,.18); }
.contact-pill.phone{ background:rgba(55,124,88,.11); border-color:rgba(55,124,88,.18); }
.contact-menu{
  top:44px;
  border-radius:12px;
  border-color:var(--res-border);
  box-shadow:0 14px 30px rgba(38,53,66,.14);
}
.contact-menu-item{ border-radius:8px; }
.contact-edit-raw,
.contact-add{
  border-radius:8px;
}
.contact-editor:not(.contact-editor-single) .contact-edit-raw{
  right:38px;
  width:25px;
  color:var(--res-blue-strong);
}
.contact-editor:not(.contact-editor-single) .contact-add{
  right:8px;
  width:27px;
  height:40px;
  color:var(--res-blue-strong);
  font-size:20px;
}
.contact-editor.is-adding .contact-preview,
.contact-editor.is-adding .contact-menu,
.contact-editor.is-adding .contact-edit-raw,
.contact-editor.is-adding .contact-add,
.contact-editor.is-adding .contact-raw-input{ display:none !important; }
.contact-inline-add{
  position:relative;
  width:100%;
  height:40px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 34px 34px;
  gap:5px;
  align-items:center;
}
.contact-inline-add[hidden]{ display:none !important; }
.contact-inline-input{
  width:100%;
  height:40px;
  min-width:0;
  padding:7px 10px;
}
.contact-inline-save,
.contact-inline-cancel{
  width:34px;
  height:34px;
  padding:0;
  cursor:pointer;
  font-size:16px;
}
.contact-inline-save{ background:var(--res-blue-strong); color:#fff; }
.contact-inline-cancel{ background:#eef1f5; border-color:#dce2e9; color:#677487; }
.contact-inline-error{
  position:absolute;
  left:7px;
  top:calc(100% + 5px);
  z-index:90;
  display:none;
  max-width:calc(100% - 14px);
  padding:5px 8px;
  border:1px solid rgba(169,78,80,.22);
  border-radius:8px;
  background:#fff6f6;
  color:#8f3f42;
  box-shadow:0 8px 18px rgba(45,58,70,.10);
  font-size:10.5px;
  font-weight:700;
}
.contact-inline-error:not(:empty){ display:block; }
.contact-inline-input[aria-invalid="true"]{
  border-color:rgba(169,78,80,.58);
  box-shadow:0 0 0 3px var(--res-red-soft);
}
.contact-editor.is-editing{
  height:auto;
  min-height:40px;
}
.contact-editor.is-editing .contact-raw-input{
  display:block !important;
  width:100%;
  min-height:74px;
  height:74px;
  padding:9px 11px;
  white-space:pre-wrap;
  resize:vertical;
}

/* Datepicker exact circa 1,4x ten opzichte van de compacte versie. */
.res-datepicker{
  width:min(400px, calc(100vw - 28px));
  max-width:calc(100vw - 28px);
  padding:17px;
  border-radius:18px;
  background:rgba(255,255,255,.985);
  border-color:var(--res-border);
  box-shadow:0 22px 52px rgba(31,44,58,.18);
}
.res-datepicker-head{
  grid-template-columns:47px 1fr 47px;
  gap:8px;
  margin-bottom:11px;
}
.res-datepicker-title{
  min-height:47px;
  border-radius:12px;
  background:var(--res-field);
  border-color:var(--res-border);
  color:var(--res-text);
  font-size:17px;
  font-weight:750;
}
.res-datepicker-nav{
  height:47px;
  border-radius:12px;
  background:var(--res-blue-strong);
  font-size:27px;
  font-weight:650;
}
.res-datepicker-weekdays,
.res-datepicker-grid{ gap:6px; }
.res-datepicker-weekdays{ margin-bottom:7px; }
.res-datepicker-weekdays span{
  font-size:13px;
  font-weight:750;
  color:var(--res-muted);
}
.res-datepicker-empty{ min-height:44px; }
.res-datepicker-day{
  height:44px;
  border-radius:11px;
  border-color:var(--res-border);
  background:var(--res-field);
  color:var(--res-text);
  font-size:17px;
  font-weight:650;
}
.res-datepicker-day:hover{
  border-color:rgba(85,122,149,.55);
  background:var(--res-blue-soft);
}
.res-datepicker-day.is-today{ box-shadow:inset 0 0 0 2px rgba(85,122,149,.25); }
.res-datepicker-day.is-active{
  background:var(--res-blue);
  border-color:var(--res-blue-strong);
  color:#fff;
  box-shadow:0 3px 8px rgba(56,87,111,.16);
}

@media (max-width:820px){
  .account-col-contact,
  .account-col-phone,
  .account-col-email{ grid-column:auto; }
  .res-datepicker{
    left:50%;
    transform:translateX(-50%);
    width:min(400px, calc(100vw - 24px));
  }
}


/* ============================================================
   V24 - actiemelding, duidelijke contactacties en gekoppelde relaties
   ============================================================ */
/* Adres 3 / telefoon 4 / e-mail 5: totale grid blijft exact 12 kolommen. */
.account-col-contact{ grid-column:span 3; }
.account-col-phone{ grid-column:span 4; }
.account-col-email{ grid-column:span 5; }

/* Drie herkenbare knoppen in dezelfde contactbalk: bewerken, verwijderen, toevoegen. */
.contact-editor:not(.contact-editor-single) .contact-preview{
  padding-right:112px;
}
.contact-editor:not(.contact-editor-single) .contact-edit-raw,
.contact-editor:not(.contact-editor-single) .contact-delete,
.contact-editor:not(.contact-editor-single) .contact-add{
  position:absolute;
  top:5px;
  z-index:4;
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid rgba(85,122,149,.16);
  border-radius:8px;
  background:rgba(255,255,255,.72);
  color:var(--res-blue-strong);
  opacity:1;
  pointer-events:auto;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.contact-editor:not(.contact-editor-single) .contact-edit-raw{ right:74px; }
.contact-editor:not(.contact-editor-single) .contact-delete{ right:41px; color:#9a4a4d; border-color:rgba(169,78,80,.16); }
.contact-editor:not(.contact-editor-single) .contact-add{ right:8px; font-size:inherit; }
.contact-editor:not(.contact-editor-single) .contact-edit-raw:hover,
.contact-editor:not(.contact-editor-single) .contact-add:hover{
  background:var(--res-blue-soft);
  border-color:rgba(85,122,149,.34);
  transform:translateY(-1px);
}
.contact-editor:not(.contact-editor-single) .contact-delete:hover{
  background:var(--res-red-soft);
  border-color:rgba(169,78,80,.34);
  transform:translateY(-1px);
}
.contact-edit-raw svg,
.contact-delete svg,
.contact-add svg{
  width:16px;
  height:16px;
  display:block;
  fill:currentColor;
}
.contact-action-text{ font-size:9px; font-weight:850; }
.contact-editor.is-editing .contact-delete,
.contact-editor.is-editing .contact-add,
.contact-editor.is-adding .contact-delete,
.contact-editor.is-deleting .contact-preview,
.contact-editor.is-deleting .contact-menu,
.contact-editor.is-deleting .contact-edit-raw,
.contact-editor.is-deleting .contact-delete,
.contact-editor.is-deleting .contact-add,
.contact-editor.is-deleting .contact-raw-input{
  display:none !important;
}

.contact-inline-delete{
  width:100%;
  height:40px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 34px 34px;
  gap:5px;
  align-items:center;
  padding:3px 3px 3px 11px;
  border:1px solid rgba(169,78,80,.23);
  border-radius:var(--res-radius);
  background:#fff7f7;
}
.contact-inline-delete[hidden]{ display:none !important; }
.contact-inline-delete-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#874044;
  font-size:11.5px;
  font-weight:750;
}
.contact-inline-delete-save,
.contact-inline-delete-cancel{
  width:34px;
  height:34px;
  padding:0;
  border:1px solid transparent;
  border-radius:9px;
  font:inherit;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
}
.contact-inline-delete-save{ background:#97474a; color:#fff; }
.contact-inline-delete-cancel{ background:#eef1f5; border-color:#dce2e9; color:#677487; }

/* Blijvende melding direct onder de gekozen reservering. */
.reservation-action-notice{
  margin-top:16px;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 13px;
  border:1px solid rgba(178,132,33,.24);
  border-radius:12px;
  background:rgba(215,174,72,.12);
  color:#6f571c;
  font-size:12.5px;
  line-height:1.42;
  font-weight:700;
}
.reservation-action-notice-icon{
  width:24px;
  height:24px;
  flex:0 0 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(178,132,33,.16);
  color:#806214;
  font-size:13px;
  font-weight:900;
}
.reservation-action-cancelled{
  border-color:rgba(169,78,80,.22);
  background:rgba(169,78,80,.09);
  color:#7f3c3f;
}
.reservation-action-cancelled .reservation-action-notice-icon{
  background:rgba(169,78,80,.14);
  color:#8f3f42;
}

@media (max-width:820px){
  .account-col-contact,
  .account-col-phone,
  .account-col-email{ grid-column:auto; }
}

.contact-editor:not(.contact-editor-single) .contact-delete:disabled{ opacity:.35; cursor:not-allowed; transform:none; background:rgba(255,255,255,.55); }


/* ============================================================
   V25 - duidelijkere contactkeuze en contactregels onder elkaar
   ============================================================ */
/* Nieuwe reservering: de keuzeknop staat volledig rechts en is duidelijk groter. */
.contact-editor-single:not(.is-plain) .contact-preview{
  position:relative;
  padding-right:96px;
}
.contact-editor-single:not(.is-plain) .contact-chevron{
  position:absolute;
  top:5px;
  right:6px;
  width:36px;
  height:30px;
  margin:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-left:1px solid rgba(85,122,149,.16);
  color:var(--res-blue-strong);
  pointer-events:none;
}
.contact-editor-single:not(.is-plain) .contact-chevron svg{
  width:21px;
  height:21px;
  display:block;
  fill:currentColor;
  transition:transform .16s ease;
}
.contact-editor-single.is-open .contact-chevron svg{ transform:rotate(180deg); }
.contact-editor-single:not(.is-plain) .contact-edit-raw{
  top:5px;
  right:46px;
  width:43px;
  height:30px;
  padding:0 6px;
  border-radius:8px;
  background:rgba(255,255,255,.62);
  opacity:.72;
  pointer-events:auto;
}
.contact-editor-single:not(.is-plain) .contact-edit-raw:hover{
  background:var(--res-blue-soft);
  opacity:1;
}
.contact-editor-single.is-contact-saving .contact-preview::after{
  content:"";
  position:absolute;
  right:15px;
  top:13px;
  width:10px;
  height:10px;
  border:2px solid rgba(85,122,149,.25);
  border-top-color:var(--res-blue-strong);
  border-radius:999px;
  animation:contact-saving-spin .65s linear infinite;
}
.contact-editor-single.is-contact-saving .contact-chevron{ opacity:0; }
@keyframes contact-saving-spin{ to{ transform:rotate(360deg); } }

/* Account: ieder e-mailadres/telefoonnummer krijgt een eigen regel. */
.contact-editor:not(.contact-editor-single){
  height:auto;
  min-height:40px;
}
.contact-editor:not(.contact-editor-single) .contact-preview{
  min-height:40px;
  height:auto;
  align-items:flex-start;
  padding-top:6px;
  padding-bottom:6px;
}
.contact-editor:not(.contact-editor-single) .contact-pill-list{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  overflow:visible;
  white-space:normal;
}
.contact-editor:not(.contact-editor-single) .contact-pill{
  width:auto;
  max-width:100%;
}
.contact-editor:not(.contact-editor-single) .contact-chevron{ display:none; }

/* Geen beschikbaarheid: bewust dezelfde kaartstijl als promoties, maar niet klikbaar. */
.availability-card,
.availability-card:not(.disabled){
  cursor:default;
  transform:none;
}
.availability-card:hover,
.availability-card:not(.disabled):hover{
  transform:none;
  background:var(--res-blue-strong, var(--res-dark));
}
.availability-card .promo-title{
  margin-bottom:10px;
}