/* Ендокринолог Бургас — Simply Schedule Appointments */
@font-face {
  font-family: "EKB DM Sans";
  src: url("/wp-content/themes/endokrinolog-burgas/assets/fonts/dm-sans-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "EKB DM Sans";
  src: url("/wp-content/themes/endokrinolog-burgas/assets/fonts/dm-sans-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "EKB Cormorant";
  src: url("/wp-content/themes/endokrinolog-burgas/assets/fonts/cormorant-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --ekb-forest: #173b2c;
  --ekb-leaf: #5e8f52;
  --ekb-lime: #b7db66;
  --ekb-lime-soft: #edf6d8;
  --ekb-ivory: #f7f5ee;
  --ekb-ink: #1e2a24;
  --ekb-muted: #66736c;
  --ekb-line: #dce5d8;
}

html,
body,
.booking-app {
  background: transparent !important;
  color: var(--ekb-ink) !important;
  font-family: "EKB DM Sans", Arial, sans-serif !important;
}

.booking-app {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px !important;
  box-sizing: border-box;
}

.booking-app *,
.booking-app *::before,
.booking-app *::after {
  box-sizing: border-box;
}

.booking-header {
  margin: 0 0 28px !important;
  padding: 0 !important;
  text-align: center;
}

.book-type .md-title.ssa-type-header,
.booking-header .md-title,
.booking-header h1 {
  color: var(--ekb-forest) !important;
  font-family: "EKB Cormorant", Georgia, serif !important;
  font-size: clamp(36px, 5vw, 54px) !important;
  font-weight: 500 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

.booking-cards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.book-type-single {
  width: 100% !important;
  margin: 0 !important;
}

.book-type-single .mdc-card,
.booking-app .md-card.selectable {
  min-height: 136px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--ekb-line) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 8px 28px rgba(23, 59, 44, 0.08) !important;
  color: var(--ekb-ink) !important;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
}

.book-type-single .mdc-card:hover,
.book-type-single .mdc-card:focus-visible,
.booking-app .md-card.selectable:hover,
.booking-app .md-card.selectable:focus-visible {
  transform: translateY(-3px) !important;
  border-color: var(--ekb-leaf) !important;
  box-shadow: 0 16px 38px rgba(23, 59, 44, 0.15) !important;
  outline: 3px solid rgba(183, 219, 102, 0.34) !important;
  outline-offset: 2px !important;
}

.book-type-single .mdc-card::after,
.booking-app .md-card.selectable::after {
  content: "→";
  position: absolute;
  inset: auto 22px 20px auto !important;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: var(--ekb-lime-soft);
  color: var(--ekb-forest);
  font-size: 20px;
  font-weight: 700;
}

.book-type-single .md-card-header,
.book-type-single .mdc-card-header {
  min-height: 136px !important;
  padding: 24px 72px 24px 24px !important;
  align-content: center;
}

.book-type-single .md-title {
  color: var(--ekb-forest) !important;
  font-family: "EKB DM Sans", Arial, sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}

.book-type-single .md-subhead {
  margin-top: 10px !important;
  color: var(--ekb-muted) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

.appointment-duration {
  display: inline-flex !important;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px !important;
  border-radius: 999px;
  background: var(--ekb-lime-soft) !important;
  color: var(--ekb-forest) !important;
}

/* Следващи стъпки: календар, часове и данни на пациента */
.booking-app .mdc-card,
.booking-app .md-card {
  border-radius: 16px !important;
}

.booking-app .md-button,
.booking-app button,
.booking-app [role="button"] {
  font-family: "EKB DM Sans", Arial, sans-serif !important;
}

.booking-app .md-button.md-primary,
.booking-app .md-raised,
.booking-app button[type="submit"] {
  min-height: 46px !important;
  border-radius: 999px !important;
  background: var(--ekb-forest) !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  box-shadow: none !important;
}

.booking-app .md-button.md-primary:hover,
.booking-app .md-raised:hover,
.booking-app button[type="submit"]:hover {
  background: #0f2c20 !important;
}

.booking-app input,
.booking-app textarea,
.booking-app select,
.booking-app .mdc-text-field {
  border-radius: 12px !important;
  font-family: "EKB DM Sans", Arial, sans-serif !important;
}

.booking-app input:focus,
.booking-app textarea:focus,
.booking-app select:focus {
  border-color: var(--ekb-leaf) !important;
  outline-color: var(--ekb-leaf) !important;
}

.booking-app .time-slot,
.booking-app .time-listing .md-button {
  border: 1px solid var(--ekb-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--ekb-forest) !important;
}

.booking-app .time-slot:hover,
.booking-app .time-listing .md-button:hover {
  border-color: var(--ekb-leaf) !important;
  background: var(--ekb-lime-soft) !important;
}

.booking-app .selected,
.booking-app [aria-selected="true"] {
  background: var(--ekb-forest) !important;
  color: #fff !important;
}

@media (max-width: 680px) {
  .booking-app { padding: 4px !important; }
  .booking-header { margin-bottom: 20px !important; text-align: left; }
  .book-type .md-title.ssa-type-header,
  .booking-header .md-title,
  .booking-header h1 { font-size: 36px !important; }
  .booking-cards { grid-template-columns: 1fr !important; gap: 12px !important; }
  .book-type-single .mdc-card,
  .booking-app .md-card.selectable,
  .book-type-single .md-card-header,
  .book-type-single .mdc-card-header { min-height: 112px !important; }
  .book-type-single .md-card-header,
  .book-type-single .mdc-card-header { padding: 20px 68px 20px 20px !important; }

  .book-type-single .mdc-card::after,
  .booking-app .md-card.selectable::after {
    inset: auto 16px 16px auto !important;
  }
}

/* The iframe sits directly on the green booking section. */
.book-type .md-title.ssa-type-header,
.booking-header .md-title,
.booking-header h1 {
  color: #ffffff !important;
}