/* ============================================================
   Restaurant Reservation Lite — form.css
   Design: Dark elegant, inspired by Mizu Restaurant Chemnitz
   Palette: #0e1c21 bg, #fb8f2c accent, #f5ede0 text
   Font: Montserrat (headings) + Lato (body)
   ============================================================ */

:root {
  --rrl-bg:         #0d1b1f;
  --rrl-card:       #122027;
  --rrl-border:     rgba(251, 143, 44, 0.25);
  --rrl-accent:     #fb8f2c;
  --rrl-accent-hov: #e07a1a;
  --rrl-text:       #f0e6d6;
  --rrl-muted:      rgba(240, 230, 214, 0.45);
  --rrl-input-bg:   #0d1b1f;
  --rrl-radius:     4px;
  --rrl-transition: 0.22s ease;
}

/* Wrapper */
.rrl-wrap {
  font-family: 'Lato', 'Source Sans Pro', sans-serif;
  background: var(--rrl-bg);
  padding: 3rem 1.5rem;
  border-radius: 8px;
}

/* Form card */
.rrl-form {
  max-width: 640px;
  margin: 0 auto;
  background: var(--rrl-card);
  border: 1px solid var(--rrl-border);
  border-radius: 6px;
  padding: 2.5rem 2.5rem 2rem;
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.45);
}

/* Row layout */
.rrl-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 520px) {
  .rrl-row { grid-template-columns: 1fr; }
  .rrl-form { padding: 1.75rem 1.25rem; }
}

/* Field */
.rrl-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.25rem;
}
.rrl-row .rrl-field {
  margin-bottom: 0;
}

/* Label */
.rrl-field label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rrl-accent);
  margin-bottom: 0.45rem;
}

/* Inputs + selects + textarea */
.rrl-form input[type="text"],
.rrl-form input[type="email"],
.rrl-form input[type="tel"],
.rrl-form input[type="date"],
.rrl-form select,
.rrl-form textarea {
  background:    var(--rrl-input-bg);
  border:        none;
  border-bottom: 1.5px solid var(--rrl-border);
  border-radius: 0;
  color:         var(--rrl-text);
  font-family:   'Lato', sans-serif;
  font-size:     1rem;
  padding:       0.6rem 0.1rem;
  width:         100%;
  outline:       none;
  transition:    border-color var(--rrl-transition);
  -webkit-appearance: none;
  appearance: none;
}

.rrl-form input:focus,
.rrl-form select:focus,
.rrl-form textarea:focus {
  border-bottom-color: var(--rrl-accent);
}

.rrl-form input::placeholder,
.rrl-form textarea::placeholder {
  color: var(--rrl-muted);
}

/* Date input calendar icon */
.rrl-form input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(60%) sepia(80%) saturate(300%) hue-rotate(350deg);
  cursor: pointer;
  opacity: 0.7;
}

/* Select arrow */
.rrl-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23fb8f2c' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.2rem center;
  padding-right: 1.5rem;
  cursor: pointer;
}
.rrl-field select option {
  background: #0e1c21;
  color: var(--rrl-text);
}
.rrl-field select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Textarea */
.rrl-form textarea {
  resize: vertical;
  min-height: 80px;
  border: 1px solid var(--rrl-border);
  border-radius: var(--rrl-radius);
  padding: 0.6rem 0.75rem;
}
.rrl-form textarea:focus {
  border-color: var(--rrl-accent);
}

/* Honeypot */
.rrl-hp {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Privacy notice */
.rrl-privacy {
  font-size: 0.72rem;
  color: var(--rrl-muted);
  margin: 1.25rem 0 1.5rem;
  line-height: 1.5;
}

/* Submit button */
.rrl-submit {
  display: block;
  width: 100%;
  background: var(--rrl-accent);
  color: #0d1b1f;
  border: none;
  border-radius: var(--rrl-radius);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1rem;
  cursor: pointer;
  transition: background var(--rrl-transition), transform 0.12s;
}
.rrl-submit:hover:not(:disabled) {
  background: var(--rrl-accent-hov);
  transform: translateY(-1px);
}
.rrl-submit:disabled,
.rrl-submit.rrl-loading {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.rrl-submit.rrl-loading::after {
  content: ' ⟳';
  display: inline-block;
  animation: rrl-spin 1s linear infinite;
}
@keyframes rrl-spin { to { transform: rotate(360deg); } }

/* Full-screen feedback while the reservation request is being processed. */
.rrl-is-submitting { overflow:hidden; }
.rrl-booking-loading {
  position:fixed;
  inset:0;
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(3,9,12,.9);
  backdrop-filter:blur(2px);
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease,visibility .2s ease;
}
.rrl-booking-loading.is-visible { opacity:1;visibility:visible; }
.rrl-booking-loading-box {
  width:min(430px,100%);
  padding:30px 24px;
  border:0;
  background:transparent;
  color:#e8e0d5;
  text-align:center;
  font-family:'Lato',sans-serif;
}
.rrl-booking-loading-box strong { display:block;margin:16px 0 8px;color:#fb8f2c;font:700 1.05rem/1.4 'Montserrat',sans-serif; }
.rrl-booking-loading-box span:last-child { display:block;color:#b8c3c9;font-size:.9rem;line-height:1.5; }
.rrl-booking-spinner {
  display:block;
  width:48px;
  height:48px;
  margin:0 auto;
  border:4px solid rgba(251,143,44,.2);
  border-top-color:#fb8f2c;
  border-radius:50%;
  animation:rrl-spin .8s linear infinite;
}

/* Message */
.rrl-message {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--rrl-radius);
  font-size: 0.9rem;
  display: none;
}
.rrl-message:not(:empty) { display: block; }

.rrl-message.rrl-error {
  background: rgba(220, 50, 50, 0.12);
  border: 1px solid rgba(220, 50, 50, 0.4);
  color: #ff8080;
}

.rrl-message.rrl-slot-info {
  background: rgba(251, 143, 44, 0.1);
  border: 1px solid rgba(251, 143, 44, 0.38);
  color: #ffd0a3;
}

/* Success card */
.rrl-success-card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--rrl-card);
  border: 1px solid var(--rrl-border);
  border-radius: 6px;
  padding: 3rem 2rem;
  text-align: center;
  animation: rrl-fadein 0.4s ease;
  font-family: 'Lato', sans-serif;
}
@keyframes rrl-fadein {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rrl-success-icon {
  width: 64px;
  height: 64px;
  line-height: 64px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: var(--rrl-accent);
  color: #0d1b1f;
  font-size: 2rem;
  font-weight: 700;
}

.rrl-success-msg {
  color: var(--rrl-text);
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
}

.rrl-success-code {
  font-family: 'Montserrat', monospace;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--rrl-accent);
  letter-spacing: 0.08em;
  margin-bottom: 1.75rem;
}

.rrl-btn-new {
  background: transparent;
  border: 1.5px solid var(--rrl-accent);
  color: var(--rrl-accent);
  border-radius: var(--rrl-radius);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.65rem 1.75rem;
  cursor: pointer;
  transition: background var(--rrl-transition), color var(--rrl-transition);
}
.rrl-btn-new:hover {
  background: var(--rrl-accent);
  color: #0d1b1f;
}

.rrl-btn-manage { display:block; width:max-content; max-width:100%; margin:0 auto 14px; padding:10px 18px; border-radius:var(--rrl-radius); background:var(--rrl-accent); color:#0d1b1f!important; font:600 .82rem/1.3 'Montserrat',sans-serif; text-decoration:none!important; }

/* German inline booking calendar */
.rrl-calendar { background:#fff; color:#26364a; border-radius:22px; padding:18px; box-shadow:0 2px 10px rgba(0,0,0,.08); margin-top:8px; max-width:420px; }
.rrl-cal-head { display:grid; grid-template-columns:40px 1fr 40px; align-items:center; text-align:center; margin-bottom:12px; text-transform:capitalize; }
.rrl-cal-head strong { font:600 16px/1.3 'Montserrat',sans-serif; color:#26364a; }
.rrl-cal-nav { border:0!important; background:transparent!important; color:#26364a!important; font-size:28px!important; line-height:1!important; padding:4px!important; cursor:pointer; }
.rrl-cal-nav:disabled { opacity:.2; cursor:default; }
.rrl-cal-week,.rrl-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; text-align:center; }
.rrl-cal-week { margin-bottom:5px; color:#8491a3; font:600 11px/30px 'Montserrat',sans-serif; }
.rrl-cal-grid>span,.rrl-cal-grid>button { height:38px; min-width:0; }
.rrl-cal-grid>button { border:0!important; border-radius:50%!important; background:transparent!important; color:#26364a!important; font:600 15px/38px 'Montserrat',sans-serif!important; padding:0!important; cursor:pointer; transition:.18s ease; }
.rrl-cal-grid>button:hover { background:#f1e2e4!important; color:#9e5962!important; }
.rrl-cal-grid>button.is-selected { background:#b56a73!important; color:#fff!important; box-shadow:0 3px 10px rgba(181,106,115,.35); }
@media(max-width:640px) { .rrl-calendar{max-width:none;padding:14px}.rrl-cal-grid>span,.rrl-cal-grid>button{height:34px}.rrl-cal-grid>button{line-height:34px!important} }