/**
 * Acuity Scheduling Embed Customization
 * 
 * Copy the CSS below (starting from "ACUITY SCHEDULER CUSTOMIZATION")
 * and paste it into: Acuity Dashboard → Settings → Advanced CSS
 */

/* ============================================
   EMBED WRAPPER (Site-specific)
   Already applied - styles the container on your site
   ============================================ */
.booking-embed-wrapper {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--white);
}

/* Hide legacy booking label if it appears via cached markup. */
#booking-context {
  display: none !important;
}

.booking-embed-wrapper iframe {
  width: 100%;
  min-height: 600px;
  border: none;
  border-radius: var(--radius, 8px);
  display: block;
}

@media (max-width: 768px) {
  .booking-embed-wrapper {
    margin: 0;
    border-radius: 0;
  }
  
  .booking-embed-wrapper iframe {
    min-height: 800px;
    height: 100vh;
    max-height: 1200px;
  }
}

/* ============================================
   ACUITY SCHEDULER CUSTOMIZATION
   Copy everything below into Acuity's Advanced CSS settings
   ============================================ */

/* Buttons - match your site's button style */
.is-embedded .btn {
  background: #c4682f;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.875rem 2rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.is-embedded .btn:hover {
  background: #b35d27;
}

/* Selected items - match your accent color */
.is-embedded .select-item.selected,
.is-embedded .select-item-box.selected {
  border-color: #c4682f;
}

.is-embedded .scheduleday.selectedday,
.is-embedded .time-selection.selected-time {
  background: #c4682f;
  color: #fff;
}

/* Hover states */
.is-embedded .select-item:hover,
.is-embedded .select-item-box:hover {
  border-color: #c6953a;
}

.is-embedded .time-selection:hover {
  border-color: #c6953a;
}