/* top level spacing */
.ri-root {
  display: flex;              /* flex */
  /* flex: 1 1 0%;           */
  flex-direction: column;     /* flex-col */
  min-height: 100vh;          /* min-h-screen */
  padding: 1rem 1.5rem;       /* py-4 (top/bot 1rem), px-6 (left/right 1.5rem) */
}

/* Tailwind's `space-y-4` */
.ri-root > * + * {
  margin-top: 1rem;              /* 4 → 1rem */
}


/* =========================
   Card
   ========================= */
.ri-root .card {
  background-color: var(--md-default-bg-color);
  padding: 1.5rem; 
  border-radius: 1rem; /* rounded-2xl */
  box-shadow: var(--md-shadow-z2);
}

[data-md-color-scheme="slate"] .ri-root .card {
  background-color: #1e293b; /* slate-800 */
}

/* =========================
   Reservation input wrapper
   ========================= */
.ri-root .reservation-input {
  flex: 1 1 0%;
  min-width: 5rem;
}

/* =========================
   Field label
   ========================= */
.ri-root .reservation-field {
  display: block;
  font-size: 0.875rem; /* text-sm */
  font-weight: 500;    /* font-medium */
  color: #334155;      /* slate-700 */
}

[data-md-color-scheme="slate"] .ri-root .reservation-field {
  color: #e2e8f0; /* slate-200 */
}

/* =========================
   Response message
   ========================= */
#result .ri-response-box {
  border-radius: 0.375rem; /* rounded-md */
  padding: 0.75rem 1rem; /* py-3 px-4 */
  font-size: 0.875rem; /* text-sm */
  margin-bottom: 0.75rem; /* mb-3 */
}

#result .ri-response-box-success {
  background-color: #d1fae5; /* emerald-100 */
  color: #065f46; /* emerald-800 */
}

#result .ri-response-box-error {
  background-color: #fee2e2; /* red-100 */
  color: #991b1b; /* red-800 */
}

/* =========================
   Input / select / textarea
   ========================= */
.ri-root .reservation-box {
  margin-top: 0.5rem; /* mt-1 */
  display: block;
  width: 100%;
  border-radius: 0.5rem; /* rounded-lg */

  border: 1px solid #cbd5f5; /* slate-300 */
  background-color: #ffffff;
  color: #0f172a; /* slate-900 */

  font-size: 0.875rem; /* text-sm */
  padding: 0.5rem 0.75rem;

  outline: none;
}

[data-md-color-scheme="slate"] .ri-root .reservation-box {
  border-color: #475569; /* slate-600 */
  background-color: #020617; /* slate-900 */
  color: #f1f5f9; /* slate-100 */
}

/* Placeholder text */
.ri-root .reservation-box::placeholder {
  color: #94a3b8; /* slate-400 */
}

[data-md-color-scheme="slate"] .ri-root .reservation-box::placeholder {
  color: #64748b; /* slate-500 */
}

/* Focus ring */
.ri-root .reservation-box:focus {
  box-shadow: 0 0 0 2px #6366f1; /* indigo-500 */
  border-color: #6366f1;
}

/* Explicit color scheme hint */
.ri-root .reservation-box {
  color-scheme: light;
}
[data-md-color-scheme="slate"] .ri-root .reservation-box {
  color-scheme: dark;
}

/* =========================
   Checkbox
   ========================= */
.ri-root .check-box {
  width: 2rem;  /* w-8 */
  height: 2rem; /* h-8 */
  border-radius: 0.375rem;
  border: 1px solid #cbd5f5; /* slate-300 */
  background-color: #ffffff;
  color: #4f46e5; /* indigo-600 */
}

[data-md-color-scheme="slate"] .ri-root .check-box {
  border-color: #475569; /* slate-600 */
  background-color: #020617; /* slate-900 */
}

.ri-root .check-box:focus {
  box-shadow: 0 0 0 2px #6366f1; /* indigo-500 */
  outline: none;
}

/* =========================
   Submit button
   ========================= */
.ri-root .submit-button {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;

  border-radius: 0.5rem; /* rounded-lg */
  padding: 0.5rem 1.25rem; /* px-5 py-2 */

  font-size: 0.875rem; /* text-sm */
  font-weight: 600;    /* font-semibold */

  color: #ffffff;
}

/* =========================
   Calendar container
   ========================= */

.ri-root .calendar-card {
  flex: 1 1 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 85vh;
  min-height: 32rem;
  padding: 0;
}

.ri-root .calendar-style {
  border: 1px solid #e5e7eb; /* slate-200 */
  border-radius: 0.5rem; /* rounded-lg */
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
}

[data-md-color-scheme="slate"] .ri-root .calendar-style {
  border-color: #334155; /* slate-700 */
}


.ri-root .calendar-style iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  position: absolute;
  inset: 0;
} 

/* calendar dark mode style  */
[data-md-color-scheme="slate"] .ri-root .calendar-invert {
  filter: invert(1) hue-rotate(180deg) contrast(0.9);
}


/* flex-col conversion */
.flex-col-start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}


/* formatting stuff */

.ri-root .ri-title {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 600;
}

.ri-root .ri-subtitle {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.75rem;
  padding-bottom: 1rem;
}


.ri-root .button-reserve {
  background-color: #4f46e5;
}
.ri-root .button-reserve:hover {
  background-color: #4338ca;
}
.ri-root .button-reserve:active {
  background-color: #3730a3;
}

.ri-root .button-cancel {
  background-color: #dc2626;
}
.ri-root .button-cancel:hover {
  background-color: #b91c1c;
}
.ri-root .button-cancel:active {
  background-color: #991b1b;
}



.ri-root .contact-email-button {
  display: inline;
  background: none;
  border: none;
  color: #3b82f6;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.ri-root .contact-email-button:hover {
  color: #1d4ed8;
}

/* .ri-footer-meta {
  justify-content: left;
  text-align: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 2; 
} */

.md-footer-copyright__highlight::after {
  content: " \u00b7 Built with the reserve-it framework.";
}


.ri-root .form-button-row {
  width: 95%;
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  grid-column: 1 / -1;
  margin-top: 0.5rem;
  margin: 1rem auto 0
}

.ri-root .reservation-form-layout {
  margin-top: 0.5rem;
  margin: 1rem auto 0;
  display: grid;
  gap: 1rem;
  align-items: end;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
