/* =================================================================
   RENTAWAYNOW — SUPPLEMENTAL CSS
   Loaded AFTER your original compiled Tailwind bundle
   (app-original.css). It only adds the few things the static
   rebuild needs: two utilities not present in the bundle, the
   body font, native date/select control styling, and the photo
   lightbox (which replaces the original React dialog).
   The actual look comes from your real Tailwind stylesheet.
   ================================================================= */

/* Body font (DM Sans, matching --font-body) */
body { font-family: var(--font-body, "DM Sans", system-ui, sans-serif); }

/* Two utilities used by the components but not emitted in the bundle */
.hover\:bg-primary\/90:hover { background-color: hsl(var(--primary) / 0.9); }
.text-\[10px\] { font-size: 10px; line-height: 1.2; }

/* Native date inputs inside the booking widget date cells */
.bw-date {
  width: 100%; border: 0; background: transparent; padding: 0;
  font-family: inherit; font-size: 0.875rem; color: hsl(var(--foreground));
}
.bw-date:focus { outline: none; }
.bw-date::-webkit-calendar-picker-indicator { opacity: 0.5; cursor: pointer; }

/* Native select inside guest box (kept borderless like the original) */
.bw-select {
  flex: 1; border: 0; background: transparent; font-family: inherit;
  font-size: 0.875rem; color: hsl(var(--foreground)); cursor: pointer;
}
.bw-select:focus { outline: none; }

/* Spinner for the loading state */
.bw-spinner {
  display: inline-block; width: 14px; height: 14px; vertical-align: -2px;
  margin-right: 0.4rem; border: 2px solid hsl(var(--primary-foreground) / 0.4);
  border-top-color: hsl(var(--primary-foreground)); border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Inline form error (uses destructive token) */
.bw-error {
  display: none; margin-top: 0.65rem; font-size: 0.8rem; padding: 0.55rem 0.7rem;
  border-radius: var(--radius); background: hsl(var(--destructive) / 0.08);
  color: hsl(var(--destructive)); border: 1px solid hsl(var(--destructive) / 0.25);
}
.bw-error.show { display: block; }

/* Photo lightbox (replacement for the Radix Dialog used originally) */
.lightbox { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.95); }
.lightbox.open { display: flex; flex-direction: column; }
.lb-stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.lb-stage img { max-height: 82vh; max-width: 92vw; object-fit: contain; }
.lb-btn { position: absolute; z-index: 10; border: none; border-radius: 9999px; background: rgba(255,255,255,0.1); color: #fff; padding: 0.5rem; display: inline-flex; cursor: pointer; }
.lb-btn:hover { background: rgba(255,255,255,0.2); }
.lb-close { top: 0.75rem; right: 0.75rem; }
.lb-prev { left: 0.75rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 0.75rem; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; top: 0.75rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.7); font-size: 0.875rem; z-index: 10; }
.lb-thumbs { display: flex; gap: 0.375rem; overflow-x: auto; padding: 0.5rem 1rem 0.75rem; justify-content: center; }
.lb-thumbs button { height: 48px; width: 48px; flex: none; overflow: hidden; border-radius: 4px; border: none; padding: 0; opacity: 0.5; transition: opacity 0.15s; cursor: pointer; }
.lb-thumbs button.active { opacity: 1; outline: 2px solid #fff; }
.lb-thumbs img { height: 100%; width: 100%; object-fit: cover; }

/* Map iframe sizing */
.map-frame { width: 100%; height: 300px; border: 0; display: block; }