/*
  Dr Rob Greig — complete booking-page styling
  Navy, warm white and soft blue
*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

:root {
  --drg-gold: #b59a62;
  --drg-navy: #19204a;
  --drg-navy-light: #303e7b;
  --drg-blue: #f7f3ea;
  --drg-blue-hover: #efe7d5;
  --drg-ivory: #faf9f7;
  --drg-white: #ffffff;
  --drg-text: #19204a;
  --drg-muted: #526a70;
  --drg-border: #d9c79b;
}

/* Typography */

html,
body,
#events,
#eventForm,
.ui-widget,
input,
button,
select,
textarea {
  font-family: 'Open Sans', Arial, sans-serif !important;
}

body {
  background: var(--drg-ivory) !important;
  color: var(--drg-text) !important;
  line-height: 1.55;
}

#events *,
#eventForm * {
  box-sizing: border-box;
}

#events h3,
#eventForm #start_date-block-container h3,
#eventForm #timeline-container h3 {
  color: var(--drg-navy) !important;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

#events p.duration,
#events div.duration {
  color: var(--drg-muted) !important;
  font-size: 0.9rem;
  font-weight: 600;
}

#events p.description,
#events div.description {
  color: var(--drg-text) !important;
  font-size: 0.98rem;
  line-height: 1.65;
}

/* Selected service */

#events .selectedEvent {
  background: var(--drg-blue) !important;
  border: 2px solid var(--drg-navy) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(21, 29, 58, 0.10);
}

/* Primary booking buttons */

#events input.reserve_time_btn,
#eventForm #save_button {
  background: var(--drg-navy) !important;
  border: 2px solid var(--drg-navy) !important;
  border-radius: 8px !important;
  color: var(--drg-white) !important;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 12px 20px !important;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

#events input.reserve_time_btn:hover,
#eventForm #save_button:hover {
  background: var(--drg-navy-light) !important;
  transform: translateY(-1px);
}

/* Secondary booking button */

#events input.select_another_btn {
  background: var(--drg-white) !important;
  border: 2px solid var(--drg-navy) !important;
  border-radius: 8px !important;
  color: var(--drg-navy) !important;
  cursor: pointer;
  font-weight: 700;
  padding: 11px 19px !important;
}

#events input.select_another_btn:hover {
  background: var(--drg-blue) !important;
}

/* Calendar */

div.ui-widget-content {
  background: var(--drg-white) !important;
  border: 1px solid var(--drg-border) !important;
  border-radius: 12px !important;
  color: var(--drg-text) !important;
  box-shadow: 0 6px 22px rgba(21, 29, 58, 0.08);
}

div.ui-widget-header {
  background: var(--drg-navy) !important;
  border: 0 !important;
  border-radius: 10px 10px 0 0 !important;
  color: var(--drg-white) !important;
}

div.ui-widget-header a {
  color: var(--drg-white) !important;
}

/* Appointment times */

#timeline-container table.timeline {
  border-collapse: separate !important;
  border-spacing: 5px !important;
}

.timeline td.not_worked_time {
  background: #f0efec !important;
  color: #9a9da5 !important;
}

.timeline td.free_time {
  background: var(--drg-blue) !important;
  border: 1px solid #c9dce3 !important;
  border-radius: 7px !important;
  color: var(--drg-navy) !important;
  cursor: pointer;
  font-weight: 600;
}

.timeline td.free_time:hover {
  background: var(--drg-blue-hover) !important;
  border-color: var(--drg-navy) !important;
}

.timeline td.selected_time {
  background: var(--drg-navy) !important;
  border-radius: 7px !important;
  color: var(--drg-white) !important;
  font-weight: 700;
}

.timeline td.reserved_time {
  background: #e5e7eb !important;
  color: #8a8f99 !important;
  text-decoration: line-through;
}

/* Booking form */

#eventForm input[type='text'],
#eventForm input[type='email'],
#eventForm input[type='tel'],
#eventForm select,
#eventForm textarea {
  background: var(--drg-white) !important;
  border: 1px solid var(--drg-border) !important;
  border-radius: 8px !important;
  color: var(--drg-text) !important;
  padding: 11px 12px !important;
}

#eventForm input:focus,
#eventForm select:focus,
#eventForm textarea:focus {
  border-color: var(--drg-navy) !important;
  box-shadow: 0 0 0 3px rgba(21, 29, 58, 0.14) !important;
  outline: none !important;
}

#start_date-block-container .zend_form dt,
#start_date-block-container .zend_form dt b,
#start_date-block-container .zend_form dd label {
  color: var(--drg-text) !important;
  font-weight: 600;
}

div#loading {
  color: var(--drg-navy) !important;
}

/* Add wording after the urgent telephone number */

a[href*="441534833833"]::after {
  color: var(--drg-muted);
  content: " (In emergency only)";
  font-size: 0.8rem;
  font-weight: 600;
  margin-left: 4px;
  white-space: normal;
}

/* WhatsApp button using the supplied image */

a[href*="447700711074"] {
  background-color: transparent !important;
  background-image: url("data:image/jpeg;base64,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") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
  color: transparent !important;
  display: inline-block !important;
  font-size: 0 !important;
  height: 38px !important;
  line-height: 38px !important;
  min-width: 38px !important;
  overflow: hidden !important;
  padding: 0 !important;
  vertical-align: middle;
  width: 38px !important;
}

/* Remove SimplyBook's original WhatsApp icon */

a[href*="447700711074"] .fa,
a[href*="447700711074"] .fi {
  display: none !important;
}

a[href*="447700711074"]::before,
a[href*="447700711074"]::after {
  content: none !important;
}

/* Mobile adjustments */

@media (max-width: 600px) {
  #events input.reserve_time_btn,
  #events input.select_another_btn,
  #eventForm #save_button {
    box-sizing: border-box;
    width: 100% !important;
  }

  a[href*="441534833833"]::after {
    display: block;
    margin-left: 0;
    margin-top: 2px;
  }
}

/* Dr Rob Greig — centred opening choices, August 2026 */
#sb_category_step_container {
  align-items: stretch !important;
  column-gap: 28px !important;
  justify-content: center !important;
  row-gap: 28px !important;
  flex-wrap: wrap !important;
}

#sb_category_step_container .category-item.item {
  flex: 0 1 390px !important;
  margin: 0 !important;
  max-width: 390px !important;
  width: 100% !important;
}

#sb_category_step_container .category-item.item .tab,
#sb_category_step_container .category-item.item .tab-pd {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

#sb_category_step_container .category-item.item .tab {
  border-radius: 10px !important;
  border-top: 4px solid var(--drg-gold) !important;
  overflow: hidden !important;
}

#sb_category_step_container .category-item.item .excerpt-info,
#sb_category_step_container .category-item.item .content {
  flex: 1 1 auto !important;
}

#sb_category_step_container .category-item:first-child h3 {
  font-size: 0 !important;
}

#sb_category_step_container .category-item:first-child h3::after {
  color: var(--drg-navy) !important;
  content: "Cosmetic Treatments";
  display: block;
  font-size: 1.25rem !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

@media (max-width: 840px) {
  #sb_category_step_container .category-item.item {
    flex-basis: 100% !important;
    max-width: 520px !important;
  }
}


/* Visible title for the first booking category */
#sb_category_step_container .category-item:first-child .cap.short {
  font-size: 0 !important;
}

#sb_category_step_container .category-item:first-child .cap.short::after {
  color: var(--drg-navy) !important;
  content: "Cosmetic Treatments";
  display: block;
  font-size: 1.25rem !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}