/* My Psychiatrist, LLC — Custom CSS
   Paste into: Custom Features → Custom CSS */

/* ============ HOME PAGE ============ */

/* 1. Hero text sits on a card so it's readable over the photo */
#main-buttons .data_wrap {
  background: rgba(255, 255, 255, .93);
  border-radius: 14px;
  padding: 2.5rem;
  max-width: 900px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .10);
}

/* 2. Keep hero text dark (theme turns it white on scroll) */
#main #main-content #sb_content #main-buttons .wrapper #main_description,
#main #main-content #sb_content #main-buttons .wrapper #main_description * {
  color: #1d3c3f !important;
}
#main #main-content #sb_content #main-buttons .wrapper #main_description strong,
#main #main-content #sb_content #main-buttons .wrapper #main_description b {
  color: #8c2f45 !important;
}

/* 3. Hide the map */
#sb_map,
#map-view {
  display: none !important;
}

/* 4. Contact + hours cards */
#contacts_info,
.schedule_data {
  background: #fff;
  border-radius: 14px;
  padding: 1.75rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .08);
}
#contacts_info .title-main,
#contacts_info .small-title,
#contacts_info .links a,
#contacts_info li {
  color: #1d3c3f !important;
}
#contacts_info .links a:hover { color: #2c6b6a !important; }

/* 5. Hours table */
#schedule table.overview td {
  padding: .55rem .25rem;
  border-bottom: 1px solid #e6e2da;
  color: #1d3c3f !important;
  font-size: .92rem;
}
#schedule table.overview tr:last-child td { border-bottom: 0; }
#schedule table.overview .time { text-align: right; color: #5c7371 !important; }

/* ============ BOOKING FLOW ============ */

/* 6. Step nav — no white bar (long labels overflowed it).
   Just make the labels readable against the background. */
#steps-nav {
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 0 .5rem !important;
  padding: 0 !important;
}
#steps-nav .booking-info .step_info_item .title-small {
  color: #f2f7f7 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
  /* clamp long names to 2 lines instead of one clipped line */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}
#steps-nav .booking-info .step_info_item.active .title-small {
  color: #fff !important;
  font-weight: 600;
}
#steps-nav .booking-info .step_info_item .title-sub {
  color: #eaf3f3 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

/* 7. Tighten the gap around the page heading and clock */
#steps-content .title-main,
#sb_booking_content .title-main,
.step-content > .title-main {
  color: #fff !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
  margin: .5rem 0 1rem !important;
}
#time-settings,
#sb_booking_company_time {
  margin: 0 !important;
  padding: 0 !important;
}
#sb_booking_company_time .time,
#sb_booking_company_time .time b {
  color: #fff !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
#steps-content { padding-top: 0 !important; }

/* 8. Location / service / provider cards */
.location-item.panel,
.service-item.panel,
.provider-item.panel,
.category-item.panel {
  background: #fff !important;
  border-radius: 12px;
  border: 1px solid #e6e2da;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .10);
  margin-bottom: 1rem;
  transition: box-shadow .18s ease, transform .18s ease;
}
.location-item.panel:hover,
.service-item.panel:hover,
.provider-item.panel:hover,
.category-item.panel:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  transform: translateY(-1px);
}
.location-item .title,
.service-item .title,
.provider-item .title,
.category-item .title { color: #1d3c3f !important; }

.info-bar .ico { color: #8c2f45 !important; }
.info-bar .txt,
.info-bar a { color: #4a5f63 !important; }
.info-bar a:hover { color: #2c6b6a !important; }

/* 9. Buttons */
#main_buttons_book_btn,
.btn.select.custom,
.btn.select.custom a {
  background: #2c6b6a !important;
  border-color: #2c6b6a !important;
  color: #fff !important;
  border-radius: 8px;
  padding: 1rem 2.5rem;
  letter-spacing: .04em;
  transition: background .18s ease;
}
#main_buttons_book_btn:hover,
.btn.select.custom:hover,
.btn.select.custom a:hover {
  background: #1d4f4e !important;
  border-color: #1d4f4e !important;
}

.btn.read-more,
.btn.btn-hide {
  color: #2c6b6a !important;
  background: transparent !important;
}

/* 10. Time slots */
.sb-cell.free,
.slot .sb-cell.free {
  background: #fff !important;
  border: 1px solid #2c6b6a !important;
  color: #1d4f4e !important;
  border-radius: 8px;
  font-weight: 600;
}
.sb-cell.free:hover {
  background: #2c6b6a !important;
  color: #fff !important;
}

/* 11. Visible keyboard focus everywhere */
a:focus-visible,
.btn:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid #8c2f45;
  outline-offset: 2px;
}