/**
 * UMC Booking - Public front-end styles
 * =====================================
 *
 * This stylesheet controls the appearance of the public booking interface.
 *
 * It covers:
 * - the two top-level tabs ("Schedule a Tour" / "Manage Existing Tour")
 * - the main layout for scheduling and managing bookings
 * - the public calendar containers
 * - the house dropdown
 * - the booking form fields
 * - the available day marker circles on the calendar
 * - the slot buttons on the right side
 * - success/error message styling
 *
 */

/* ============================================================
   Overall wrapper
   ============================================================ */

/* Main outer wrapper for the booking UI */
.umc-wrap{
  width:100%;
}

/* ============================================================
   Top-level tabs
   ============================================================ */

/* Horizontal tab row above the booking panels */
.umc-tabs{
  display:flex;
  gap:10px;
  margin-bottom:12px;
  flex-wrap:wrap;
}

/* Individual tab button */
.umc-tab{
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  border-radius:999px;
  padding:10px 14px;
  cursor:pointer;
  font-weight:700;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

/* Slight visual feedback on hover */
.umc-tab:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(2,8,23,.06);
}

/* Active tab styling */
.umc-tab.is-active{
  background:rgba(43,179,255,.12);
  border-color:rgba(43,179,255,.35);
}

/* ============================================================
   Panels
   ============================================================ */

/* Hidden by default; JS activates the correct panel */
.umc-panel{
  display:none;
}

/* Active panel becomes visible */
.umc-panel.is-active{
  display:block;
}

/* ============================================================
   Layout - Schedule mode
   ============================================================ */

/**
 * Three-column layout:
 * 1) house selection
 * 2) calendar
 * 3) slots + booking form
 */
.umc-booking{
  display:grid;
  grid-template-columns:.6fr 1.1fr .9fr;
  gap:18px;
  align-items:start;
}

/* Stack layout on smaller screens */
@media (max-width: 900px){
  .umc-booking{
    grid-template-columns:1fr;
  }
}

/* ============================================================
   Layout - Manage mode
   ============================================================ */

/**
 * Two-column layout:
 * 1) booking details / cancellation
 * 2) reschedule calendar + slots
 */
.umc-manage{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:18px;
}

/* Stack layout on smaller screens */
@media (max-width: 900px){
  .umc-manage{
    grid-template-columns:1fr;
  }
}

/* ============================================================
   Card / container styling
   ============================================================ */

/* FullCalendar container box */
.umc-calendar{
  background:#fff;
  border:1px solid rgba(15,23,42,.12);
  border-radius:12px;
  padding:12px;
}

/* Generic content card used for side panels */
.umc-side{
  background:#fff;
  border:1px solid rgba(15,23,42,.12);
  border-radius:12px;
  padding:14px;
}

/* Section title inside the cards */
.umc-title{
  margin:0 0 10px 0;
}

/* Muted helper text */
.umc-muted{
  color:#475569;
}

/* ============================================================
   House dropdown
   ============================================================ */

/* Public house selector styling */
.umc-select{
  width:100%;
  border:1px solid rgba(15,23,42,.16);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
  color:#0f172a;
}

/* ============================================================
   Form fields
   ============================================================ */

/* Labels within forms / side panels */
.umc-form label,
.umc-side label{
  display:block;
  margin:10px 0;
  font-weight:650;
}

/* Text inputs / textarea fields */
.umc-form input,
.umc-form textarea,
.umc-side input,
.umc-side textarea{
  width:100%;
  border:1px solid rgba(15,23,42,.16);
  border-radius:12px;
  padding:10px 12px;
  margin-top:6px;
  background:#fff;
  color:#0f172a;
  box-sizing:border-box;
}

/* ============================================================
   Selected slot summary
   ============================================================ */

/**
 * The box that appears above the booking form after a user picks a slot.
 * This shows the selected date/time range in a highlighted pill-like panel.
 */
.umc-selected{
  margin:10px 0;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(43,179,255,.10);
  border:1px solid rgba(43,179,255,.20);
  color:#0f172a;
  line-height:1.45;
}

/* ============================================================
   Primary buttons
   ============================================================ */

/* Main action buttons used in the booking UI */
.umc-btn{
  margin-top:10px;
  border:0;
  border-radius:999px;
  padding:12px 16px;
  background:#0a2540;
  color:#fff;
  cursor:pointer;
  font-weight:700;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease;
}

/* Button hover effect */
.umc-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(2,8,23,.12);
}

/* Destructive button variant */
.umc-btn-danger{
  background:#b91c1c;
}

/* Disabled button state */
.umc-btn:disabled{
  opacity:.7;
  cursor:not-allowed;
}

/* ============================================================
   Slot button grid and buttons
   ============================================================ */

/**
 * Grid for available slot buttons.
 *
 * We intentionally use one column so long labels like:
 * "11:00 AM - 12:00 PM CDT"
 * have plenty of room and remain visually clean.
 */
.umc-slot-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin:10px 0 14px 0;
}

/**
 * Individual available time slot button.
 *
 * Important choices here:
 * - width: 100% so the button fills the available column
 * - display: flex so content is centered nicely
 * - white-space: normal so longer labels can wrap if necessary
 * - explicit dark text color on hover so text never disappears
 */
.umc-slot{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:56px;
  padding:12px 16px;
  border:1px solid rgba(15,23,42,.14);
  border-radius:999px;
  background:#fff;
  color:#0f172a !important;
  cursor:pointer;
  font-weight:650;
  text-align:center;
  line-height:1.35;
  white-space:normal;
  word-break:normal;
  box-sizing:border-box;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
}

/* Hover effect for slot buttons */
.umc-slot:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(2,8,23,.08);
  background:rgba(43,179,255,.12);
  border-color:rgba(43,179,255,.35);
  color:#0f172a !important;
}

/* Keyboard accessibility state */
.umc-slot:focus-visible{
  outline:3px solid rgba(43,179,255,.35);
  outline-offset:2px;
}

/* Temporary disabled state, used during reschedule requests */
.umc-slot:disabled{
  opacity:.7;
  cursor:progress;
}

/* ============================================================
   Status / message blocks
   ============================================================ */

/* Shared message spacing */
.umc-msg{
  margin-top:10px;
  line-height:1.4;
}

/* Error message color */
.umc-msg.is-error{
  color:#b91c1c;
}

/* Success / ok message color */
.umc-msg.is-ok{
  color:#065f46;
}

/* ============================================================
   Honeypot anti-spam field
   ============================================================ */

/**
 * This field exists for spam detection and must remain visually hidden
 * and inaccessible to normal users.
 */
.umc-hp{
  position:absolute !important;
  left:-10000px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

/* ============================================================
   Calendar available-day marker
   ============================================================ */

/**
 * This class is applied directly to the calendar day number element
 * for days that have availability.
 *
 * The circle:
 * - highlights the day immediately on month load
 * - rises slightly on hover
 * - gives the user a visual cue that the day is interactive
 */
.umc-day-number-available{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-width:2rem;
  height:2rem;
  padding:0 .45rem;
  border-radius:999px;
  background:rgba(43,179,255,.16) !important;
  border:1px solid rgba(43,179,255,.38) !important;
  color:#0f172a !important;
  font-weight:700;
  line-height:1;
  box-sizing:border-box;
  cursor:pointer;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;
}

/* Hover animation for the available-day circle */
.umc-day-number-available:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(43,179,255,.22);
  background:rgba(43,179,255,.24) !important;
  border-color:rgba(43,179,255,.55) !important;
}