.hp-calendar-doctor-container {
  margin: 20px 0;
}

/* Placeholder pilt, kui aegu pole valitud – kuvatakse ajade ala asemel */
.hp-calendar-info .hp-no-times-placeholder {
  text-align: center;
  margin: 0;
  line-height: 0;
}
.hp-calendar-info .hp-no-times-placeholder img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  vertical-align: top;
}

/* [arsti_hammas_calendar] – place hp-lists next to title */
.arsti-hammas-calendar .arsti-hammas-calendar-top-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}

.arsti-hammas-calendar .arsti-hammas-calendar-title {
  grid-column: 1;
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  color: #0F2E68;
  display: flex;
  align-items: center;
  line-height: 51px;
}

.arsti-hammas-calendar .arsti-hammas-calendar-top-row .hp-lists {
  display: flex !important;
  gap: 16px !important;
  align-items: center !important;
}

.arsti-hammas-calendar .arsti-hammas-calendar-top-row select {
  min-width: 260px !important;
}

.arsti-hammas-calendar .arsti-hammas-calendar-top-row .hp-lists-host {
  width: 59% !important;
}

.arsti-hammas-calendar .arsti-hammas-calendar-top-row .hp-lists {
  width: 100% !important;
}

.arsti-hammas-calendar .arsti-hammas-calendar-top-row select.hp-profile-list,
.arsti-hammas-calendar .arsti-hammas-calendar-top-row select.hp-service-list,
.arsti-hammas-calendar .arsti-hammas-calendar-top-row select.hp-doctor-list {
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 768px) {
  .arsti-hammas-calendar .arsti-hammas-calendar-top-row {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .arsti-hammas-calendar .arsti-hammas-calendar-top-row .hp-lists-host {
    width: 100% !important;
  }
  .arsti-hammas-calendar .hp-calendar-container .hp-calendar-info {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  .arsti-hammas-calendar .arsti-hammas-calendar-top-row .hp-lists,
  .arsti-hammas-calendar .arsti-hammas-calendar-top-row select {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* [arsti_hammas_calendar] – fix calendar/info widths so they fit side-by-side (scope only to this shortcode) */
.arsti-hammas-calendar .hp-calendar-container {
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}

.arsti-hammas-calendar .hp-calendar-container .hp-calendar {
  width: 35% !important;
  flex: 0 0 35% !important;
  max-width: 35% !important;
}

.arsti-hammas-calendar .hp-calendar-container .hp-calendar-info {
  width: 59% !important;
  flex: 0 0 59% !important;
  max-width: 59% !important;
}

@media (max-width: 768px) {
  .arsti-hammas-calendar .hp-calendar-container .hp-calendar,
  .arsti-hammas-calendar .hp-calendar-container .hp-calendar-info {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

.hp-doctor-info {
  margin-bottom: 20px !important;
}

.hp-doctor-name {
  display: block !important;
  width: 100% !important;
  margin-bottom: 5px !important;
  background: #D1DBFF !important;
  border: none !important;
  border-radius: 5px !important;
  height: 37px !important;
  font-family: 'Lato', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  color: #012053 !important;
  margin-left: 0;
  margin-right: 0;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  margin: 0 !important;
  margin-bottom: 0px;
}

.hp-doctor-selector {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 5px;
  border: 1px solid #e9ecef;
}

.hp-doctor-selector label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
  font-size: 16px;
}

.hp-doctor-list {
  padding: 10px !important;
  border: none !important;
  border-radius: 5px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-family: 'Lato', sans-serif !important;
  background-color: rgba(15, 46, 104, 1) !important;
  color: #fff !important;
  transition: border-color 0.3s ease;
  width:50% !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23FFFFFF' d='M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px 8px !important;
  padding-right: 36px !important;
}

.hp-doctor-list:hover {
  color: #bd9107 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23bd9107' d='M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2z'/%3E%3C/svg%3E") !important;
}

.hp-doctor-list:focus {
  outline: none;
  border: none !important;
  box-shadow: none !important;
}

.hp-doctor-list option {
  padding: 8px;
  color: #fff !important;
}

.hp-profile-list option {
  padding: 8px;
  color: #fff !important;
  background-color: rgba(15, 46, 104, 1) !important;
}

/* Match styles for profile list */
.hp-profile-list {
  padding: 10px !important;
  border: none !important;
  border-radius: 5px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-family: 'Lato', sans-serif !important;
  background-color: rgba(15, 46, 104, 1) !important;
  color: #fff !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23FFFFFF' d='M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px 8px !important;
  padding-right: 36px !important;
}

.hp-profile-list:hover {
  color: #bd9107 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23bd9107' d='M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2z'/%3E%3C/svg%3E") !important;
}

.hp-profile-list:focus {
  outline: none;
  border: none !important;
  box-shadow: none !important;
}

/* Hide default arrow in IE */
select.hp-profile-list::-ms-expand,
select.hp-doctor-list::-ms-expand { display: none; }

/* Kalendri ajad ja nupud */
.hp-tooltip-slot {
  margin: 2px 0 !important;
  border-top: 1px solid #d4d0c8;
  line-height: 26px;
  clear: both;
  font-weight: 700;
  color: #2a6;
  padding: 10px 0;
}

.hp-tooltip-slot button {
  float: right;
  min-width: 50px;
  font-weight: 400;
  margin: 10px 0;
  width: auto;
  overflow: visible;
  background-color: #D1DBFF !important;
  font-family: 'Lato';
  font-size: 16px;
  border: none !important;
}

/* Custom two-column calendar layout */
.hp-custom-layout { width:100%; }
.hp-custom-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items:start; }
@media (max-width: 900px){ .hp-custom-grid { grid-template-columns:1fr; } }

/* Info list custom rows */
.hp-calendar-info { display:flex; flex-direction:column; gap:16px; width:100% !important; min-height:350px !important; margin-top: 5px !important; }
.hp-tooltip-container { width:100% !important; }
.hp-tooltip {
  width:100% !important;
  overflow-y: auto !important;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE and Edge */
}
.hp-calendar-info .hp-tooltip {
  margin-top: 14px;
}
.hp-tooltip::-webkit-scrollbar {
  display: none !important; /* Chrome, Safari, Opera */
}
/* Header and sort on same line */
.hp-tooltip > .hp-tooltip-header {
  float: left;
  margin: 0;
  margin-bottom: 12px;
  color: #0F2E68;
  font-family: 'Lato', sans-serif;
}
.hp-tooltip > .hp-tooltip-sort {
  float: right;
  margin: 0;
  margin-bottom: 12px;
  color: #0F2E68;
  font-size: 16px !important;
}
.hp-tooltip-sort span {
  color: #0F2E68;
  cursor: pointer;
  transition: color 0.2s ease;
}
.hp-tooltip-sort span:hover {
  color: #bd9107 !important;
}
.hp-tooltip-sort-active {
  color: #bd9107 !important;
  text-decoration: none;
}
.hp-tooltip-sort-active:hover {
  color: #bd9107 !important;
}
.hp-tooltip-doctor {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}
.hp-tooltip > .hp-tooltip-container {
  clear: both;
}
.hp-slot-row { display:grid; grid-template-columns: 64px 48px 1fr auto; align-items:center; gap:12px; padding:12px 0px; background:#ffffff; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,0.05); }
.hp-slot-time { font-weight:700; color:#001130; font-size:20px; position:relative; top:9px; }
.hp-slot-avatar { width:48px; height:48px; border-radius:50% !important; object-fit:cover; }
.hp-slot-txt { display:flex; flex-direction:column; gap:4px; }
.hp-slot-name { font-weight:400; color:#0F2E68; font-size:18px !important; }
.hp-slot-spec { color:#0F2E68; opacity:0.8; font-size:16px !important; }
.hp-slot-book .button, .hp-slot-book button { 
  background:#D1DBFF; 
  color:#0F2E68; 
  border:none; 
  padding:10px 16px; 
  border-radius:6px; 
  cursor:pointer; 
  font-family: 'Lato', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}
.hp-slot-book .button:hover, .hp-slot-book button:hover { background:#0F2E68; color:#fff; }

/* Inline avatar inside default slot rows */
.hp-tooltip-slot .hp-inline-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; margin-right:8px; vertical-align:middle; }

/* Responsive disain */
@media (max-width: 768px) {
  .hp-doctor-info {
    padding: 0 !important;
  }
  
  #broneerimisleht .hp-calendar-container {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }
  
  #broneerimisleht .hp-calendar {
    display: flex !important;
    width: 100%;
    border: none !important;
    flex-direction: column !important;
  }
  
  /* Fallbacks when #broneerimisleht ID is not on the page */
  .hp-calendar-doctor-container .hp-calendar-container,
  .hp-calendar-container {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    overflow: hidden !important; /* Vältida kuupäevade ülevoolu */
    box-sizing: border-box !important;
  }
  
  .hp-calendar-doctor-container .hp-calendar-info,
  .hp-calendar-info {
    width: 100% !important;
  }
  
  .hp-calendar-doctor-container .hp-tooltip-container,
  .hp-tooltip-container,
  .hp-tooltip {
    width: 100% !important;
  }
  .hp-calendar-doctor-container .hp-calendar,
  .hp-calendar {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    flex-direction: column !important;
    overflow: hidden !important; /* Vältida kuupäevade ülevoolu */
    box-sizing: border-box !important;
  }
  
  .hp-doctor-name {
    font-size: 16px;
    width: 100% !important;
    margin: 0 !important;
  }
  
  .hp-doctor-list {
    width: 100% !important;
    max-width: 100%;
  }
  
  .hp-doctor-selector {
    padding: 0 !important;
  }

  /* Mobiil: aeg enne pilti, nupp nime/specci all */
  .hp-calendar-info .hp-slot-row {
    grid-template-columns: 64px 48px 1fr;
    grid-template-areas:
      "time avatar txt"
      ". . button";
    align-items: flex-start;
    height: auto;
  }

  .hp-slot-time {
    grid-area: time;
  }

  .hp-slot-avatar {
    grid-area: avatar;
  }

  .hp-slot-txt {
    grid-area: txt;
  }

  .hp-slot-book {
    grid-area: button;
    margin-top: 6px;
    text-align: left;
    margin-left: 0;
    justify-self: start;
  }
@media (max-width: 768px) {
  #arst-bron .hp-slot-book {
    grid-area: button;
    margin-top: 6px;
    text-align: left;
    margin-left: 0;
    justify-self: start;
  }

  .front-bron .hp-slot-book {
    grid-area: button;
    margin-top: 6px;
    text-align: left;
    margin-left: 0;
    justify-self: start;
  }
}
  .hp-slot-spec {
    color: #0F2E68;
    opacity: 1;
    font-size: 14px !important;
  }

  /* Mobiil: Rohkem õhku arstide vahel ja konteiner kõrgus vastavalt sisule */
  .hp-calendar-info {
    gap: 24px !important;
    height: max-content !important;
  }

  /* Mobiil: tooltip kohe kalendri info ülaossa */
  .hp-calendar-info .hp-tooltip {
    margin-top: 0px !important;
  }

  /* Mobiil: kalendri konteiner ilma ülemise marginita */
  .hp-calendar-shell .hp-calendar-container,
  #esileht .hp-calendar-container,
  .hp-calendar-doctor-container .hp-calendar-container,
  .hp-calendar-container {
    margin-top: 0px !important;
  }

  /* Mobile: Ensure top row stacks properly */
  .hp-calendar-shell .hp-top-row {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .hp-calendar-shell .hp-top-row > .hp-title {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 30px !important;
  }

  .hp-calendar-shell .hp-top-row > .hp-lists-host {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hp-calendar .hp-month-header {
    margin-top: 0px !important;
    margin-bottom: 20px !important;
  }

  .hp-calendar-shell .hp-lists {
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .hp-calendar-shell .hp-lists .hp-profile-list,
  .hp-calendar-shell .hp-lists .hp-doctor-list {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }

  /* Mobiil: Eemalda absolute positioning */
  .hp-calendar-shell .hp-calendar,
  #esileht .hp-calendar,
  .hp-calendar-doctor-container .hp-calendar,
  .hp-calendar-container .hp-calendar {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
  }

  /* Mobiil: Õhk dropdown'ide ja kalendri vahel */
  .hp-calendar-shell .hp-lists,
  #esileht .hp-calendar .hp-lists,
  .hp-calendar-shell .hp-calendar .hp-lists {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    margin-bottom: 24px !important;
  }

  /* Mobiil: Kalender 100% lai ja overflow kontroll */
  .hp-calendar-shell .hp-calendar,
  #esileht .hp-calendar,
  .hp-calendar-doctor-container .hp-calendar,
  .hp-calendar-container .hp-calendar {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 24px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Mobiil: month-header margin-top */
  .hp-calendar .hp-month-header {
    margin-top: 0px !important;
  }

  /* Mobiil: Kalendri päevad ei lähe üle konteineri */
  .hp-calendar .hp-days-box,
  .hp-calendar .hp-week-header {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    gap: 6px !important; /* Vähenda gap'i väiksematel ekraanidel */
  }

  /* Mobiil: Vähenda päevade kastide mõõtmeid */
  .hp-calendar .hp-day-box {
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 0px !important;
    box-sizing: border-box !important;
  }

  .hp-calendar .hp-day-label {
    font-size: 13px !important;
    line-height: 1.2 !important;
    padding: 2px !important;
    font-family: 'Lato', sans-serif !important;
  }

  /* Mobiil: Active state padding 0px ja täiuslik keskendamine */
  .hp-calendar .hp-days-box .hp-day-box.hp-available.hp-active {
    padding: 0px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hp-calendar .hp-days-box .hp-day-box.hp-available.hp-active .hp-day-label {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    font-family: 'Lato', sans-serif !important;
  }

  /* iPhone 12 mini ja väiksemad ekraanid */
  @media (max-width: 390px) {
    .hp-calendar .hp-days-box,
    .hp-calendar .hp-week-header {
      gap: 3px !important; /* Veel väiksem gap väga väikestel ekraanidel */
    }

    .hp-calendar .hp-day-box {
      padding: 0px !important;
      min-width: 0 !important;
    }

    .hp-calendar .hp-day-label {
      font-size: 11px !important;
      line-height: 1.1 !important;
      padding: 1px !important;
      font-family: 'Lato', sans-serif !important;
    }

    /* Väikesed ekraanid: Active state täiuslik keskendamine */
    .hp-calendar .hp-days-box .hp-day-box.hp-available.hp-active {
      padding: 0px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    .hp-calendar .hp-days-box .hp-day-box.hp-available.hp-active .hp-day-label {
      padding: 0 !important;
      margin: 0 !important;
      line-height: 1 !important;
      font-family: 'Lato', sans-serif !important;
    }
  }

  /* Mobiil: Ajad 100% lai ja nähtav - eemalda absolute positioning */
  .hp-calendar-shell .hp-calendar-info,
  #esileht .hp-calendar-info,
  .hp-calendar-doctor-container .hp-calendar-info,
  .hp-calendar-container .hp-calendar-info {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 0px !important;
    min-height: auto !important;
    grid-column: 1 !important; /* Tagada, et on samas grid'is */
  }

  /* Tagada, et kalendri konteiner on grid ja info on nähtav */
  .hp-calendar-shell .hp-calendar-container,
  #esileht .hp-calendar-container,
  .hp-calendar-doctor-container .hp-calendar-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important; /* Info peaks olema nähtav */
  }

  .hp-calendar-shell .hp-tooltip-container,
  .hp-calendar-shell .hp-tooltip,
  #esileht .hp-tooltip-container,
  #esileht .hp-tooltip {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Mobiil: Top row stack vertically */
  .hp-calendar-shell .hp-top-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
}

/* Modal for booking */
.hp-modal-open { overflow: hidden; }
.hp-modal { position: fixed; inset: 0; z-index: 9999; }
.hp-modal-backdrop { position:absolute; inset:0; background: rgba(0,0,0,0.5); }
.hp-modal-dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(920px, 95vw); height: min(90vh, 800px); background:#fff; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.25); display:flex; flex-direction:column; overflow:hidden; }
.hp-modal-close { position:absolute; right:10px; top:10px; background:transparent; border:none; font-size:28px; line-height:1; cursor:pointer; color:#333; }
.hp-modal-iframe { width:100%; height:100%; border:0; }

/* Remove dark background behind loading spinner when changing months */
.hp-calendar-container .hp-overlay,
.hp-calendar .hp-overlay,
.hp-calendar-container .hp-loading,
.hp-calendar .hp-loading,
.hp-calendar-container .hp-calendar-overlay,
.hp-calendar .hp-calendar-overlay,
.hp-calendar-container [class*="overlay"],
.hp-calendar [class*="overlay"] {
  background: transparent !important;
}

/* === Online broneering layout for #esileht section === */
#esileht .e-con-inner {
  display: flex;
  flex-direction: column;
}

/* Top row: Heading on left, dropdowns on right */
#esileht .elementor-element-eb55395 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0 !important;
}

#esileht .elementor-element-eb55395 .elementor-heading-title {
  margin: 0 !important;
}

/* Main calendar shell - grid container for 2 rows */
.hp-calendar-shell {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0;
  width: 100%;
}

/* Row 1: Top row with title (40%) and dropdowns (60%) */
.hp-calendar-shell .hp-top-row {
  display: grid;
  grid-template-columns: 2fr 3fr; /* 40% / 60% */
  gap: 24px;
  align-items: center;
  width: 100%;
  margin-bottom: 0;
}

.hp-calendar-shell .hp-top-row > .hp-title {
  grid-column: 1;
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  color: #0F2E68;
  display: flex;
  align-items: center;
  line-height: 51px;
}

.hp-calendar-shell .hp-top-row > .hp-lists-host {
  grid-column: 2;
  width: 100%;
  max-width: 100%;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  height: auto;
}

.hp-calendar-shell .hp-lists {
  align-items: center;
  margin: 0px !important;
  display: flex;
  width: 100%;
  gap: 12px;
}

/* At 1200px and smaller, make online broneering text smaller */
@media (max-width: 1200px) {
  .hp-calendar-shell .hp-title {
    font-size: 35px !important;
  }
}

/* Ensure hp-lists are not absolutely positioned - they should be in hp-lists-host */
#esileht .hp-calendar .hp-lists,
.hp-calendar-shell .hp-calendar .hp-lists {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  z-index: 10;
  margin-bottom: 0 !important;
}

.hp-profile-list{ width: 50% !important; }
/* Row 2: Calendar container with calendar (40%) and info (60%) */
#esileht .hp-calendar-container,
.hp-calendar-shell .hp-calendar-container {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 3fr; /* 40% / 60% */
  gap: 24px;
  align-items: start;
  padding-top: 0;
  width: 100%;
}


#esileht .hp-calendar,
.hp-calendar-shell .hp-calendar {
  position: relative;
  grid-column: 1;
  width: 100%;
}

#esileht .hp-calendar-info,
.hp-calendar-shell .hp-calendar-info {
  grid-column: 2;
  width: 65% !important;
}


/* Hide clinic selector */
#esileht .hp-calendar .hp-lists .hp-clinic-list,
#esileht .hp-calendar .hp-lists .hp-loc-list,
.hp-calendar-shell .hp-calendar .hp-lists .hp-clinic-list,
.hp-calendar-shell .hp-calendar .hp-lists .hp-loc-list {
  display: none !important;
}

/* Style the dropdowns */
#esileht .hp-calendar .hp-lists select {
  min-width: 186px;
  height: 40px;
}



/* Responsive: changes at 1091px and below (but above 768px for mobile) */
@media (max-width: 1091px) and (min-width: 769px) {
}

/* Responsive: changes at 990px and below (tablet) */
@media (max-width: 990px) and (min-width: 769px) {
  /* Tooltip container max-height */
  .hp-tooltip-container {
    max-height: 274px !important;
    overflow: auto !important;
  }
  
  /* Keep 40/60 layout on tablet */
  .hp-calendar-shell .hp-top-row {
    grid-template-columns: 2fr 3fr !important;
  }
  
  /* Tablet: kalender 40% ja arstide nimekiri 60% */
  .hp-calendar-shell .hp-calendar-container {
    grid-template-columns: 2fr 3fr !important;
  }

  /* Tablet: kalendri laius 40% */
  .hp-calendar-shell .hp-calendar,
  #esileht .hp-calendar {
    width: 40% !important;
  }

  /* Tablet: väiksem vahe nädalapäevade ja kuupäevade vahel */
  .hp-calendar .hp-week-header {
    gap: 16px !important;
  }

  .hp-calendar .hp-days-box {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 16px !important;
  }

  /* Tablet: keep booking button on the same row (next to name) */
  .hp-calendar-info .hp-slot-row {
    grid-template-columns: 64px 48px 1fr auto !important;
    grid-template-areas: "time avatar txt button" !important;
    align-items: center !important;
  }

  .hp-slot-book {
    grid-area: button !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    text-align: right !important;
  }
}

/* Responsive: stack on mobile (phone) */
@media (max-width: 768px) {
  /* Row 1: Stack title and dropdowns vertically on mobile */
  .hp-calendar-shell .hp-top-row {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .hp-calendar-shell .hp-top-row > .hp-title {
    grid-column: 1;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 35px !important;
  }

  .hp-calendar-shell .hp-top-row > .hp-lists-host {
    grid-column: 1;
    width: 100% !important;
    max-width: 100% !important;
  }

  .hp-calendar-shell .hp-lists {
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .hp-calendar-shell .hp-lists .hp-profile-list,
  .hp-calendar-shell .hp-lists .hp-doctor-list {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Row 2: Stack calendar and info vertically on mobile */
  #esileht .hp-calendar-container,
  .hp-calendar-shell .hp-calendar-container {
    grid-template-columns: 1fr !important;
    gap: 24px;
    padding-top: 0;
  }

  #esileht .hp-calendar,
  .hp-calendar-shell .hp-calendar {
    grid-column: 1;
    width: 100% !important;
    max-width: 100% !important;
  }

  #esileht .hp-calendar-info,
  .hp-calendar-shell .hp-calendar-info {
    grid-column: 1;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Remove absolute positioning for hp-lists */
  #esileht .hp-calendar .hp-lists,
  .hp-calendar-shell .hp-calendar .hp-lists {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    margin-bottom: 0 !important;
    width: 100% !important;
  }
}

/* Force override against hp-calendar-min.css using higher specificity */
.hp-calendar-shell .hp-lists select.hp-doctor-list,
#esileht .hp-calendar .hp-lists select.hp-doctor-list,
.hp-calendar .hp-lists select.hp-doctor-list,
.hp-calendar-shell .hp-lists select.hp-profile-list,
#esileht .hp-calendar .hp-lists select.hp-profile-list,
.hp-calendar .hp-lists select.hp-profile-list {
  background-color: rgba(15, 46, 104, 1) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 5px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-family: 'Lato', sans-serif !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23FFFFFF' d='M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px 8px !important;
  padding-right: 36px !important;
  padding-left: 10px !important;
}

.hp-calendar-shell .hp-lists select.hp-doctor-list:hover,
#esileht .hp-calendar .hp-lists select.hp-doctor-list:hover,
.hp-calendar .hp-lists select.hp-doctor-list:hover,
.hp-calendar-shell .hp-lists select.hp-profile-list:hover,
#esileht .hp-calendar .hp-lists select.hp-profile-list:hover,
.hp-calendar .hp-lists select.hp-profile-list:hover {
  color: #bd9107 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23bd9107' d='M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2z'/%3E%3C/svg%3E") !important;
}

.hp-calendar-shell .hp-lists select.hp-doctor-list:focus,
#esileht .hp-calendar .hp-lists select.hp-doctor-list:focus,
.hp-calendar .hp-lists select.hp-doctor-list:focus,
.hp-calendar-shell .hp-lists select.hp-profile-list:focus,
#esileht .hp-calendar .hp-lists select.hp-profile-list:focus,
.hp-calendar .hp-lists select.hp-profile-list:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Hide default arrow in legacy IE with high specificity */
.hp-calendar-shell .hp-lists select.hp-doctor-list::-ms-expand,
.hp-calendar-shell .hp-lists select.hp-profile-list::-ms-expand { display: none !important; }

/* Calendar full width and day styling */
.hp-calendar {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  font-family: 'Lato', sans-serif !important;
}

/* Week header - day names styling */
.hp-week-header {
  display: flex !important;
  justify-content: space-between !important;
  gap: 27px !important;
  width: 100% !important;
}

.hp-week-header .hp-day-box {
  flex: 1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.hp-week-header .hp-day-label {
  font-size: 13px !important;
  color: #B69E59 !important;
  font-family: 'Lato', sans-serif !important;
}

/* Days box - calendar days styling */
.hp-days-box {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 27px !important;
  width: 100% !important;
}

.hp-days-box .hp-day-box {
  flex: 1 1 calc((100% - (6 * 27px)) / 7) !important;
  min-width: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.hp-days-box .hp-day-label {
  font-size: 18px !important;
  color: #0F2E68 !important;
  font-family: 'Lato', sans-serif !important;
}

/* Modern header and container reset to match design (image 1) */
.hp-calendar .hp-calendar-wrapper {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.hp-calendar .hp-month-header {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  align-items: center !important;
  position: relative !important;
  border: none !important;
  background: transparent !important;
  padding: 0 0 12px !important;
  gap: 27px !important;
}

.hp-calendar .hp-month-title {
  grid-column: 1 / span 7 !important;
  margin: 0 !important;
  color: #0F2E68 !important;
  font-weight: 700 !important;
  text-align: center !important;
  font-family: 'Lato' !important;
  font-size: 16px !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Replace default arrows with nav icons */
.hp-calendar .hp-month-prev {
  grid-column: 1 !important;
  position: relative !important;
  width: 24px !important;
  height: 24px !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  justify-self: start !important;
}

.hp-calendar .hp-month-next {
  grid-column: 7 !important;
  position: relative !important;
  width: 24px !important;
  height: 24px !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  justify-self: end !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Näita next month nuppu ainult siis, kui on valitud arst ja teenus */
.hp-calendar.hp-can-navigate .hp-month-next {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.hp-calendar .hp-month-prev div,
.hp-calendar .hp-month-next div { display: none !important; }
.hp-calendar .hp-month-prev::before {
  content: '' !important;
  display: block !important;
  width: 9px !important;
  height: 13px !important;
  background-image: url("data:image/svg+xml,%3Csvg width='9' height='13' viewBox='0 0 9 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_1962)'%3E%3Cpath d='M2.80603e-07 6.4194C2.90661e-07 6.1893 0.0964902 5.95923 0.28908 5.7838L6.35242 0.263378C6.73812 -0.0877922 7.36348 -0.0877922 7.74903 0.263378C8.13457 0.614408 8.13457 1.18366 7.74903 1.53486L2.38385 6.4194L7.74884 11.304C8.13439 11.6551 8.13439 12.2243 7.74884 12.5753C7.36329 12.9267 6.73794 12.9267 6.35223 12.5753L0.288881 7.05499C0.0962708 6.87947 2.70549e-07 6.64941 2.80603e-07 6.41939L2.80603e-07 6.4194Z' fill='%230F2E68'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_1962'%3E%3Crect width='12.8388' height='8.03819' fill='white' transform='translate(8.03819) rotate(90)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
.hp-calendar .hp-month-next::before {
  content: '' !important;
  display: block !important;
  width: 9px !important;
  height: 13px !important;
  background-image: url("data:image/svg+xml,%3Csvg width='9' height='13' viewBox='0 0 9 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_1797)'%3E%3Cpath d='M8.03819 6.41944C8.03819 6.64954 7.9417 6.87961 7.74911 7.05504L1.68577 12.5755C1.30007 12.9266 0.674706 12.9266 0.289156 12.5755C-0.0963845 12.2244 -0.0963845 11.6552 0.289156 11.304L5.65434 6.41944L0.289345 1.53487C-0.0962049 1.1837 -0.096205 0.614509 0.289345 0.263509C0.674895 -0.0878315 1.30025 -0.0878316 1.68596 0.263509L7.74931 5.78385C7.94191 5.95937 8.03819 6.18943 8.03819 6.41945L8.03819 6.41944Z' fill='%230F2E68'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_1797'%3E%3Crect width='12.8388' height='8.03819' fill='white' transform='translate(5.61204e-07 12.8388) rotate(-90)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* Remove any boxed borders/backgrounds from week header and days grid */
.hp-calendar .hp-week-header,
.hp-calendar .hp-days-box {
  border: none !important;
  background: transparent !important;
}

/* If plugin uses table-like layout, force grid to ensure edge-to-edge columns */
.hp-calendar .hp-week-header {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 27px !important;
}

/* Desktop: Vähenda kalendri kõrgust */
@media (min-width: 769px) {
  .hp-calendar .hp-week-header {
    gap: 27px !important;
  }
  
  .hp-calendar .hp-days-box {
    gap: 27px !important;
  }
  
  .hp-calendar .hp-days-box .hp-day-label {
    font-size: 15px !important;
  }
  
  .hp-calendar .hp-month-header {
    padding: 0 0 8px !important;
    gap: 27px !important;
  }
}
.hp-calendar .hp-week-header .hp-day-box { text-align: center !important; }
.hp-calendar .hp-week-header .hp-day-label {
  color: #B69E59 !important;
  font-size: 13px !important;
  font-family: 'Lato', sans-serif !important;
}

.hp-calendar .hp-days-box {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 27px !important;
}
.hp-calendar .hp-days-box .hp-day-box {
  border: none !important;
  background: transparent !important;
  text-align: center !important;
}

.hp-calendar .hp-days-box .hp-day-box.hp-today {
  background-color: #D1DBFF !important;
  border-radius: 5px !important;
}
.hp-calendar .hp-days-box .hp-day-label {
  color: #0F2E68 !important;
  font-size: 17px !important;
  font-family: 'Lato', sans-serif !important;
}

.hp-day-box .hp-day-label {
  padding-top: 0px !important;
  font-family: 'Lato', sans-serif !important;
}

/* Hele sinakas taust vabadele päevadele (ilma active) */
.hp-calendar .hp-days-box .hp-day-box.hp-available:not(.hp-active) {
  background-color: #D1DBFF !important;
  border-radius: 5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0px !important;
}

.hp-calendar .hp-days-box .hp-day-box.hp-available:not(.hp-active) .hp-day-label {
  /* kuupäeva number tumessinisega helesinise tausta peal */
  color: #0F2E68 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Lato', sans-serif !important;
}

/* Tumesinine taust aktiivsele päevale (hp-available.hp-active) */
.hp-calendar .hp-days-box .hp-day-box.hp-available.hp-active {
  background-color: #0F2E68 !important;
  border-radius: 5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0px !important;
}

.hp-calendar .hp-days-box .hp-day-box.hp-available.hp-active .hp-day-label {
  /* kuupäeva number helesinisega tumesinise tausta peal */
  color: #D1DBFF !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Lato', sans-serif !important;
}

/* Hover state for calendar dates */
.hp-calendar .hp-days-box .hp-day-box.hp-available:hover {
  background-color: #D1DBFF !important;
  border-radius: 5px !important;
  cursor: pointer !important;
}

/* Hover state for active day - change number color to blue */
.hp-calendar .hp-days-box .hp-day-box.hp-available.hp-active:hover .hp-day-label {
  color: #0F2E68 !important;
}

/* Hover state for unavailable dates (when date has nothing) */
.hp-calendar .hp-days-box .hp-day-box:not(.hp-available):hover {
  background-color: #D1DBFF !important;
  border-radius: 5px !important;
  cursor: pointer !important;
}

.hp-calendar .hp-days-box .hp-other-month .hp-day-label { 
  opacity: .5 !important;
  font-family: 'Lato', sans-serif !important;
}

/* Spacing above the calendar container */
.hp-calendar-container {
  margin-top: 27px !important;
}
.hp-calendar{
  width:40% !important;
}
.hp-calendar-container{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.hp-calendar-info{
  width:100% !important;
}
/* Default margin-right - will be overridden by media queries */
@media (min-width: 1092px) {
  .hp-calendar {
    margin-right: 40px !important;
  }
}

.hp-doctor-avatar{
 display:none !important;
}
.hp-calendar-shell{
	height: auto !important;
	min-height: auto !important;
}

/* Desktop: kalendri infotsooni marginid ja tekst positsioon */
@media (min-width: 991px) {
  .hp-calendar-info .hp-tooltip {
    margin-top: 0px !important;
  }

  .hp-calendar-shell .hp-calendar-info,
  #esileht .hp-calendar-info,
  .hp-calendar-doctor-container .hp-calendar-info,
  .hp-calendar-container .hp-calendar-info {
    margin-top: 0px !important;
	font-size: 30px;
  }

  .hp-calendar-shell .hp-calendar,
  #esileht .hp-calendar,
  .hp-calendar-doctor-container .hp-calendar,
  .hp-calendar-container .hp-calendar {
    margin-top: 0px !important;
  }

  /* "Aegade otsimiseks vali teenus." ja "Sellel kuul ei ole ühtegi vaba aega." tekst siniseks ja 0 marginit */
  .hp-calendar-info > p,
  .hp-calendar-info > p > strong {
    margin-top: 0px !important;
    color: #0F2E68 !important;
	font-weight: 500 !important;
  }
}

/* --- Tugev tabletireegel: 40% kalender, 60% ajad/arstide nimekiri --- */
@media (max-width: 990px) and (min-width: 769px) {
  /* Pealkiri veidi väiksem tahvlis */
  .hp-calendar-shell .hp-title {
    font-size: 33px !important;
  }

  /* Kalender lähemal dropdownidele tahvlis */
  .hp-calendar-container {
    margin-top: 0px !important;
  }

  /* Tahvlis kalendril paremal 0px margin */
  #esileht .hp-calendar,
  .hp-calendar-shell .hp-calendar,
  .hp-calendar-container .hp-calendar,
  .hp-calendar-doctor-container .hp-calendar,
  .hp-calendar {
    margin-right: 0 !important;
  }

  /* Laiused konteineritele (töötavad nii #esileht kui ka mujal) */
  .hp-calendar-shell .hp-calendar,
  .hp-calendar-container .hp-calendar,
  .hp-calendar-doctor-container .hp-calendar,
  #esileht .hp-calendar {
    width: 40% !important;
  }

  .hp-calendar-shell .hp-calendar-info,
  .hp-calendar-container .hp-calendar-info,
  .hp-calendar-doctor-container .hp-calendar-info,
  #esileht .hp-calendar-info {
    width: 60% !important;
  }

  /* Tahvlis väike vahe kalendri ja aegade ploki vahel */
  .hp-calendar-shell .hp-calendar-info,
  .hp-calendar-container .hp-calendar-info,
  .hp-calendar-doctor-container .hp-calendar-info,
  #esileht .hp-calendar-info {
    margin-top: 23px !important;
  }

  /* Tahvlis väiksem gap nädalapäevadel ja kuupäevadel */
  .hp-calendar .hp-week-header,
  .hp-calendar .hp-days-box {
    gap: 16px !important;
  }

  .hp-calendar .hp-days-box {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
  }
}