/*
  Snap Gen Studios — Booking Widget CSS
  Brand: dark ivory, charcoal, gold accents
  Font: Cormorant Garamond (display) + Jost (body)
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@200;300;400;500&display=swap');

/* ── EVENT / PACKAGE TITLES ── */
#events h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: 22px;
  color: #1c1a17;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
  border-bottom: 1px solid #d6c9b4;
  padding-bottom: 8px;
}

/* ── DURATION TEXT ── */
#events p.duration,
#events div.duration {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #b8976a;
  margin-bottom: 6px;
}

/* ── DESCRIPTION TEXT ── */
#events p.description,
#events div.description {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: #7a7268;
  line-height: 1.65;
  margin-bottom: 14px;
}

/* ── SELECTED / ACTIVE EVENT ── */
#events .selectedEvent {
  background-color: #f5ede0;
  border-left: 3px solid #b8976a;
  padding: 14px 18px;
  outline: none;
  box-shadow: 0 2px 12px rgba(184,151,106,0.12);
}

/* ── RESERVE / BOOK BUTTON ── */
#events input.reserve_time_btn {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  background-color: #b8976a;
  color: #faf8f4;
  border: none;
  padding: 12px 28px;
  cursor: pointer;
  transition: background 0.3s ease, letter-spacing 0.3s ease;
}

#events input.reserve_time_btn:hover {
  background-color: #a0825a;
  letter-spacing: 0.4em;
}

/* ── SELECT ANOTHER / BACK BUTTON ── */
#events input.select_another_btn {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  background-color: transparent;
  color: #7a7268;
  border: 1px solid #d6c9b4;
  padding: 11px 24px;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}

#events input.select_another_btn:hover {
  border-color: #b8976a;
  color: #b8976a;
}

/* ── FORM SECTION HEADINGS ── */
#eventForm #start_date-block-container h3,
#eventForm #timeline-container h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 18px;
  color: #1c1a17;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #d6c9b4;
}

/* ── SAVE / CONFIRM BUTTON ── */
#eventForm #save_button {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  background-color: #1c1a17;
  color: #faf8f4;
  border: 1px solid #1c1a17;
  padding: 14px 36px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
  display: inline-block;
}

#eventForm #save_button:hover {
  background-color: #b8976a;
  border-color: #b8976a;
  color: #faf8f4;
}

/* ── CALENDAR WIDGET BODY ── */
div.ui-widget-content {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 13px;
  background-color: #faf8f4;
  border: 1px solid #d6c9b4;
  color: #1c1a17;
  border-radius: 0;
}

/* ── CALENDAR HEADER (month/year bar) ── */
div.ui-widget-header {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  font-weight: 300;
  background-color: #1c1a17;
  color: #d4b896;
  border: none;
  letter-spacing: 0.08em;
  border-radius: 0;
}

/* ── TIMELINE TABLE ── */
#timeline-container table.timeline {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.04em;
}

/* ── UNAVAILABLE TIME SLOTS ── */
.timeline td.not_worked_time {
  background-color: #edeae4;
  color: #c2bbb0;
  text-align: center;
  padding: 8px 4px;
  cursor: not-allowed;
}

/* ── AVAILABLE TIME SLOTS ── */
.timeline td.free_time {
  background-color: #faf8f4;
  color: #1c1a17;
  text-align: center;
  padding: 8px 4px;
  cursor: pointer;
  border: 1px solid #ede7dc;
  transition: background 0.2s ease, color 0.2s ease;
}

.timeline td.free_time:hover {
  background-color: #f0e6d6;
  color: #b8976a;
}

/* ── SELECTED TIME SLOT ── */
.timeline td.selected_time {
  background-color: #b8976a;
  color: #faf8f4;
  text-align: center;
  padding: 8px 4px;
  font-weight: 400;
  letter-spacing: 0.06em;
  cursor: pointer;
}

/* ── ALREADY RESERVED TIME SLOT ── */
.timeline td.reserved_time {
  background-color: #e8e2d9;
  color: #b0a898;
  text-align: center;
  padding: 8px 4px;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ── LOADING INDICATOR ── */
div#loading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: #b8976a;
  letter-spacing: 0.12em;
  text-align: center;
  padding: 24px;
  background-color: rgba(250,248,244,0.9);
}

div#loading::after {
  content: '…';
  animation: ellipsis 1.4s infinite;
}

@keyframes ellipsis {
  0%   { content: '.'; }
  33%  { content: '..'; }
  66%  { content: '…'; }
}

/* ── DATE FORM LABELS ── */
#start_date-block-container .zend_form dt,
start_date-block-container .zend_form dt b,
start_date-block-container .zend_form dd label {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #7a7268;
  display: block;
  margin-bottom: 6px;
}