/* ============================================================
   Wedding Reservations v2.0.0 — Mooodi.nl
   ============================================================ */

.wr-calendar-wrapper { font-family:inherit; max-width:700px; margin:0 auto; }

/* ── Legend ─────────────────────────────────────────────────── */
.wr-legend { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:20px; font-size:14px; }
.wr-legend-item { display:flex; align-items:center; gap:8px; }
.wr-legend-dot  { display:inline-block; width:14px; height:14px; border-radius:50%; flex-shrink:0; }
.wr-legend-dot--option    { background:#9CA3AF; }
.wr-legend-dot--confirmed { background:#EF4444; }

/* ── Header ─────────────────────────────────────────────────── */
.wr-calendar__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.wr-calendar__title  { font-size:18px; font-weight:600; margin:0; }
.wr-calendar__nav {
    background:none; border:1px solid #ddd; border-radius:6px;
    cursor:pointer; font-size:16px; padding:4px 12px; line-height:1.5; transition:background .15s;
}
.wr-calendar__nav:hover    { background:#f5f5f5; }
.wr-calendar__nav:disabled { opacity:.35; cursor:not-allowed; }

/* ── Weekdays ───────────────────────────────────────────────── */
.wr-calendar__weekdays {
    display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px;
    text-align:center; font-size:11px; font-weight:700; color:#888;
    text-transform:uppercase; letter-spacing:.04em;
}

/* ── Day grid ───────────────────────────────────────────────── */
.wr-calendar__grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }

.wr-day {
    min-height:48px; display:flex; align-items:center; justify-content:center;
    border-radius:8px; border:2px solid transparent;
    transition:transform .1s, box-shadow .1s; user-select:none;
}
.wr-day__num { font-size:14px; font-weight:600; }

/* Available — groen/neutraal, klikbaar */
.wr-day--available { background:#f9fafb; color:#111; cursor:pointer; }
.wr-day--available:hover { background:#e5e7eb; transform:scale(1.06); box-shadow:0 2px 8px rgba(0,0,0,.08); }

/* Verleden */
.wr-day--past { background:#f3f4f6; color:#ccc; cursor:not-allowed; pointer-events:none; }
.wr-day--empty { cursor:default; pointer-events:none; }

/* Aangevraagd (grijs) — WEL klikbaar */
.wr-day--option { background:#9CA3AF; color:#fff; cursor:pointer; }
.wr-day--option:hover { background:#6B7280; transform:scale(1.06); box-shadow:0 2px 8px rgba(107,114,128,.4); }

/* Bevestigd (rood) — NIET klikbaar */
.wr-day--confirmed { background:#EF4444; color:#fff; cursor:not-allowed; pointer-events:none; }

.wr-day--today { border-color:#6366f1; }
.wr-calendar--loading { opacity:.5; pointer-events:none; }

/* ── Modal ──────────────────────────────────────────────────── */
.wr-modal { position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center; }
.wr-modal.wr-modal--open { display:flex; }
.wr-modal__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(3px); }
.wr-modal__content {
    position:relative; background:#fff; border-radius:16px;
    box-shadow:0 20px 60px rgba(0,0,0,.2);
    width:min(600px,92vw); max-height:90vh; overflow-y:auto; padding:40px;
    animation:wr-in .2s ease;
}
@keyframes wr-in { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
.wr-modal__close { position:absolute; top:14px; right:18px; background:none; border:none; font-size:24px; cursor:pointer; color:#888; }
.wr-modal__close:hover { color:#111; }

/* ── Popular notice ─────────────────────────────────────────── */
.wr-popular-notice {
    background:#fefce8; border:1px solid #fde047; border-radius:8px;
    padding:12px 16px; font-size:13px; color:#713f12;
    margin-bottom:20px; line-height:1.5;
}

/* ── Form ───────────────────────────────────────────────────── */
.wr-form__title { font-size:20px; font-weight:700; margin:0 0 4px; }
.wr-form__date  { font-size:15px; color:#666; margin-bottom:20px; }

.wr-form__row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:0; }
.wr-form__row--addr { grid-template-columns:2fr 1fr; }
.wr-form__field { margin-bottom:14px; }
.wr-form__field--small { }
.wr-form__label { display:block; font-size:13px; font-weight:600; margin-bottom:5px; color:#333; }

.wr-form__input,
.wr-form__textarea,
.wr-form__select {
    width:100%; padding:10px 13px;
    border:1px solid #d1d5db; border-radius:8px;
    font-size:14px; font-family:inherit; color:#111; background:#fafafa;
    transition:border-color .15s, box-shadow .15s; box-sizing:border-box;
}
.wr-form__input:focus,
.wr-form__textarea:focus,
.wr-form__select:focus {
    outline:none; border-color:#6366f1;
    box-shadow:0 0 0 3px rgba(99,102,241,.15); background:#fff;
}
.wr-form__textarea { min-height:80px; resize:vertical; }

.wr-form__submit {
    width:100%; padding:13px; border:none; border-radius:10px;
    font-size:15px; font-weight:700; cursor:pointer; margin-top:6px;
    background:#111; color:#fff; font-family:inherit;
    transition:opacity .15s, transform .1s;
}
.wr-form__submit:hover:not(:disabled) { opacity:.85; transform:translateY(-1px); }
.wr-form__submit:disabled { opacity:.5; cursor:not-allowed; }

/* ── Messages ───────────────────────────────────────────────── */
.wr-message { padding:14px 18px; border-radius:10px; font-size:14px; margin-top:16px; line-height:1.5; }
.wr-message--success { background:#f0fdf4; border:1px solid #86efac; color:#166534; }
.wr-message--error   { background:#fef2f2; border:1px solid #fca5a5; color:#991b1b; }

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:520px){
    .wr-modal__content  { padding:24px 16px; }
    .wr-form__row       { grid-template-columns:1fr; }
    .wr-form__row--addr { grid-template-columns:1fr; }
    .wr-day             { min-height:40px; }
}