/* ===== Base ===== */
* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: #F2F6FA;

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { text-decoration: none; color: inherit; }

/* ===== Background wrapper behind header/promo ===== */
.bg-wrapper{
  position: fixed; top: 0; left: 0; width: 100%;
  height: 180px; /* 60 topbar + 120 promo */
  z-index: 9997;
  background-image: url('../assets/promo-bg.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  transition: height .3s ease;
}
.bg-wrapper.collapsed{ height: 60px; }

/* ===== Topbar ===== */
.topbar{
  background-color: transparent;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  left: 0; top: 0;
  width: 100%;
  z-index: 9999;
  height: 60px;
  padding: 10px 20px;
  transition: top .3s ease, background-color .3s ease;
}
.topbar.collapsed{ background-color:#fff; }
.topbar .logo-container{ display:flex; align-items:center; gap:10px; }
.topbar .logo-container img{ height: 40px; }
.topbar nav{ display:flex; align-items:center; gap:15px; }

.topbar .nav-button{
  background-color: #e8eef5;
  border: none;
  color: #000;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 8px;
  font-size: 14px;
  transition: background-color .3s, color .3s;
}
.topbar .nav-button:hover{ background-color:#098BC0; color:#fff; }

.lang-switch-button{
  appearance:none; -webkit-appearance:none;
  background-color:#fff;
  border:1px solid #ccc;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color .3s, color .3s, border-color .3s;
}
.lang-switch-button:hover{ background-color:#e8eef5; }
.lang-switch-button:focus{ outline:none; border-color:#098BC0; }

/* ===== Promo block ===== */
.promo-message{
  text-align:center;
  font-size:30px;
  padding:10px;
  position: fixed;
  left:0; top:60px;
  width:100%;
  z-index:9998;
  height:120px;
  line-height:40px;
  border-bottom:1px solid #ccc;
  transition: top .3s ease, height .3s ease, padding .3s ease, line-height .3s ease;
  color:#000;
}
.promo-message.hidden{
  top:0; overflow:hidden; height:0; padding:0; line-height:0;
}
.promo-app-links{ margin-top:5px; }
.promo-app-links a{ margin:0 5px; }

/* ===== Search bar ===== */
.search-container{
  position: fixed;
  left:0; top:180px;
  width:100%;
  z-index:9998;
  background:#fff;
  border-bottom:1px solid #ccc;
  height:60px;
  padding:10px 20px;
  transition: top .3s ease;
}
.search-container.shifted{ top:60px; }

.search-container form{
  display:flex; align-items:center; width:100%; margin:0; gap:10px;
}
.search-container input{
  padding:8px;
  border-radius:8px;
  border:1px solid #ccc;
  font-size:14px;
  outline:none;
}
.search-container input#name{ width:220px; }

.search-container button.search-button{
  padding:8px 20px;
  background-color:#098BC0;
  color:#fff;
  border:none;
  cursor:pointer;
  border-radius:8px;
  font-size:14px;
  transition: opacity .3s, background-color .3s;
}
.search-container button.search-button:hover:not(:disabled){ background-color:#087ba8; }
.search-container button.search-button:disabled{ opacity:.6; cursor:not-allowed; }

/* AI button stays */
.search-container button#openAiModal.ai-button{
  border:1px solid #ccc;
  background: linear-gradient(135deg, #00C6FF 0%, #0072FF 100%);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  color: #fff;
  transition: background .3s;
}
.search-container button#openAiModal.ai-button:hover{
  background: linear-gradient(135deg, #00B5F2 0%, #005CBA 100%);
}

/* ===== Content layout ===== */
.content{
  padding-top:240px;
  max-width:1400px;
  margin:0 auto;
  transition: padding-top .3s ease;
}
.content.shifted{ padding-top:120px; }

.results{
  display:grid;
  grid-template-columns: 1fr 1fr;
  margin-right: 33.3333%;
  min-height: calc(100vh - 180px);
}
.results > div{ border-right:1px solid #ccc; }
.results > div:last-child{ border-right:none; }

.column{ padding:10px; transition: max-height .3s ease; }
.dentist-list{
  height: calc(100vh - 180px);
  overflow-y:auto;
}

/* ===== Map column ===== */
.map-column{
  position: fixed;
  right:0;
  width:33.3333%;
  z-index:1;
  top:240px;
  height: calc(100vh - 180px);
  border-left:1px solid #ccc;
  transition: top .3s ease, height .3s ease;
}
.map-column.shifted{
  top:120px;
  height: calc(100vh - 120px);
}
#map{ width:100%; height:100%; }

/* ===== Footer ===== */
footer{
  background:#333;
  color:#fff;
  text-align:left;
  padding: 10px 10px 10px 30px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  flex-wrap:wrap;
}
.footer-links a{
  color:#ccc;
  text-decoration: underline;
  margin: 0 5px;
  font-size:14px;
}
.footer-links a:hover{ color:#fff; }
.app-icons{ display:inline-flex; gap:10px; }

/* ===== Dentist cards ===== */
.dentist-list h2{ margin-top:0; font-size:18px; }
#dentistCards{ position:relative; }

/* ✅ Premium card (как variant-card) */
.dentist-card{
  border: 1px solid rgba(16,24,40,.06);
  border-radius: 14px;
  padding: 14px;

  display:flex;
  align-items: stretch; /* важно для сетки справа */
  cursor:pointer;
  margin-bottom:10px;

  background:#fff;
  position:relative;

  box-shadow: 0 6px 18px rgba(16,24,40,.05);
  transition: box-shadow .22s ease, border-color .22s ease, background-color .22s ease, transform .12s ease;
}
.dentist-card:hover{
  box-shadow: 0 10px 24px rgba(16,24,40,.08);
  transform: translateY(-1px);
}
.dentist-card.hidden{ display:none; }

.dentist-card.selected-card{
  border-color: rgba(9,139,192,.20);
  background:#F6FBFF;
}

/* bigger avatars */
.dentist-avatar{
  width:86px; height:86px;
  margin-right:14px;
  border-radius:50%;
  overflow:hidden;
  flex: 0 0 auto;
}
.dentist-avatar img{ width:100%; height:100%; object-fit:cover; }

/* --- Pro card content --- */
.dentist-card--pro .dentist-info{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:7px;
}

.dentist-card--pro .dentist-head{
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* Name row + arrow on the same level */
.dentist-head-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* avatar/name as buttons (default: neutral, becomes clickable on selected) */
.dentist-avatar-btn{
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  cursor: default;
}

.dentist-name{ margin:0; }
.dentist-name-btn{
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: default;
}

/* Name button (disabled until selected) */
.dentist-name-link{
  padding:0;
  border:none;
  background:transparent;
  text-align:left;
  cursor: default;
  max-width: calc(100% - 44px);
  pointer-events: none;
  display:inline-block;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color .18s ease, transform .18s ease;
}

/* enable click only when selected */
.dentist-card.selected-card .dentist-avatar-btn,
.dentist-card.selected-card .dentist-name-btn{
  cursor: pointer;
}
.dentist-card.selected-card .dentist-name-link{
  pointer-events: auto;
  cursor: pointer;
  border-bottom-color: rgba(9,139,192,.22);
}

/* Base name */
.dentist-card--pro .dentist-name{
  margin:0;
  font-size:18px;
  line-height:1.2;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: #111;
  transition: color .18s ease, transform .18s ease, letter-spacing .18s ease;
}

/* Brand selected name style */
.dentist-card.selected-card .dentist-name{
  color:#098BC0;
  letter-spacing:-0.015em;
  transform: translateY(-0.5px);
}

/* hover: stronger underline + tiny lift */
.dentist-card.selected-card .dentist-name-link:hover{
  border-bottom-color: rgba(9,139,192,.45);
  transform: translateY(-1px);
}

/* avatar hover ring when selected */
.dentist-card.selected-card .dentist-avatar-btn:hover{
  box-shadow: 0 0 0 3px rgba(9,139,192,.18);
}

/* Arrow button appears only on selected cards */
.dentist-profile-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:34px;
  height:34px;

  border-radius:10px;
  border:1px solid rgba(9,139,192,.18);
  background: transparent;
  color:#098BC0;

  cursor:pointer;
  transition: background-color .15s, border-color .15s, transform .15s, opacity .15s;
  opacity: 0;
  pointer-events: none;
}

.dentist-card.selected-card .dentist-profile-link{
  opacity: 1;
  pointer-events: auto;
}

.dentist-profile-link:hover{
  background:#eef9ff;
  border-color:#098BC0;
}
.dentist-profile-link:active{ transform: scale(0.98); }

/* --- text lines --- */
.dentist-card--pro .dentist-subtitle{
  font-size:15px;
  color:#222;
}
.dentist-card--pro .dentist-edu{
  font-size:14px;
  color:#555;
}

/* --- meta / rating (SVG stars) --- */
.dentist-meta{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:#666;
}

.rating-stars{
  color:#f4b400;
  display:inline-flex;
  align-items:center;
  gap:6px;
  line-height:1;
}
.rating-stars .stars{
  display:inline-flex;
  align-items:center;
  gap:2px;
}
.rating-stars .star{
  width:15px;
  height:15px;
  display:block;
}
.rating-stars .star-fill{ fill: currentColor; }
.rating-stars .star-outline{
  fill:none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  opacity: .33;
}
.rating-number{
  font-weight: 650;
  color:#222;
}
.rating-count{ color:#777; }
.meta-dot{ opacity:.5; }
.meta-item{ color:#666; }

/* ===== In-network badge row ===== */
.dentist-insurance-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.innetwork-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid #cfe6f1;
  background:#eef9ff;
  color:#0a6a8a;
  font-size:13px;
  line-height:1.2;
  white-space: nowrap;
}

.innetwork-dot{
  width:7px; height:7px;
  border-radius:50%;
  background:#22c55e;
}

.innetwork-list{
  font-size:14px;
  color:#0a6a8a;
}

/* Chips (optional) */
.dentist-chips{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:2px;
}
.chip{
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  background:#eef3f8;
  border:1px solid #d7e1ec;
  color:#2a2a2a;
}

/* ===== Calendar + clinics ===== */
.calendar-section{ background:#F2F6FA; }

.time-selection{ margin-bottom:10px; display:flex; gap:10px; }
.time-button{
  flex:1;
  padding:10px;
  background:#e8eef5;
  border:none;
  cursor:pointer;
  border-radius:8px;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  transition: background-color .3s;
}
.time-button.selected{ background:#098BC0; color:#fff; }

.calendar-container{ background:#fff; padding:15px; border-radius:8px; }
.month-navigation{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:5px;
}
.month-navigation button{
  background:transparent;
  color:#098BC0;
  border:none;
  cursor:pointer;
  font-size:24px;
  width:40px; height:40px;
  line-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.month-navigation button:hover{ color:#087ba8; }
.month-navigation span{ font-weight:bold; font-size:16px; color:#333; }

.calendar{ display:flex; flex-direction:column; max-width:90%; margin:0 auto; }
.calendar-header, .calendar-week{ display:flex; }
.calendar-header div, .calendar-day{ flex:1; text-align:center; padding:3px; }

.calendar-day{
  padding:5px;
  background:#e8eef5;
  margin:1px;
  cursor:pointer;
  transition: background .3s;
  position:relative;
  border-radius:3px;
  font-size:12px;
}
.calendar-day:hover{ background:#d0d8e0; }
.calendar-day.selected{ background:#098BC0; color:#fff; }
.calendar-day.disabled{
  background:#f0f0f0;
  color:#ccc;
  cursor: default !important;
}
.calendar-day.today::before{
  content:'';
  position:absolute;
  top:3px; right:3px;
  width:4px; height:4px;
  background:red;
  border-radius:50%;
}

.clinic-select-container{
  margin-top:15px;
  background:#fff;
  padding:10px;
  border-radius:5px;
}
.clinic-select-container h3{
  margin:0 0 10px;
  font-size:16px;
  font-weight:bold;
}
.clinic-list{ display:flex; flex-direction:column; gap:8px; }

.clinic-box{
  border:1px solid #ccc;
  border-radius:8px;
  padding:10px;
  cursor:pointer;
  transition: background-color .3s, border-color .3s;
  background:#fff;
  position:relative;
}
.clinic-box:hover{ background:#f2f8fd; }
.clinic-box.selected{
  border:2px solid #098BC0;
  background:#e6f5fc;
}
.clinic-name{ font-weight:bold; margin-bottom:4px; }
.clinic-address{ font-size:14px; color:#555; }
.clinic-icons{
  position:absolute;
  right:10px; top:10px;
  display:flex;
  align-items:center;
}
.call-button{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  background:transparent;
  border:none;
  cursor:pointer;
  font-size:14px;
  color:#098BC0;
  padding:6px 8px;
  border-radius:6px;
  transition: background-color .2s, color .2s;
}
.call-button img{ width:26px; height:26px; }
.call-button:hover{ background:#dcefff; color:#006c9f; }

/* ===== Insurance / procedures / time ===== */
.insurance-block{
  margin-top:15px;
  padding:10px;
  background:#fff;
  border-radius:5px;
}
.insurance-block button{
  cursor:pointer;
  padding:8px 12px;
  border:1px solid #ccc;
  border-radius:8px;
  background:#e8eef5;
  transition: background-color .3s;
}
.insurance-block button:hover{ background:#d0d8e0; }

.procedure-select-container{
  margin-top:15px;
  background:#fff;
  padding:10px;
  border-radius:5px;
}
.procedure-select-container h3{
  margin:0 0 10px;
  font-size:16px;
  font-weight:bold;
}
.procedure-list{
  max-height:200px;
  overflow-y:auto;
  border:1px solid #ccc;
  border-radius:5px;
  padding:5px;
}
.procedure-item{
  padding:8px;
  cursor:pointer;
  border:1px solid #ccc;
  border-radius:5px;
  margin-bottom:5px;
  transition: background-color .3s, border-color .3s;
  background:#fff;
}
.procedure-item.selected{
  border-color:#098BC0;
  background:#e6f5fc;
}
.procedure-item:hover{ background:#f2f8fd; }
.procedure-name{ font-weight:bold; }
.procedure-duration{ font-size:13px; color:#555; }

.time-slot-container{
  margin-top:15px;
  background:#fff;
  padding:10px;
  border-radius:5px;
}
.time-slot-view{ font-weight:bold; margin-bottom:10px; }

/* Slots grid/buttons */
.time-slots{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:8px;
}
@media (max-width: 1100px){
  .time-slots{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px){
  .time-slots{ grid-template-columns: 1fr; }
}

/* extra small: avatar slightly smaller */
@media (max-width: 420px){
  .dentist-avatar{ width:70px; height:70px; }
  .dentist-card--pro .dentist-name{ font-size:17px; }
}

.time-slot-btn{
  padding:10px 10px;
  border-radius:10px;
  border:1px solid #ccc;
  background:#fff;
  cursor:pointer;
  font-size:14px;
  transition: background-color .2s, border-color .2s, transform .05s;
  user-select:none;
}
.time-slot-btn:hover{
  background-color:#f2f8fd;
  border-color:#098BC0;
}
.time-slot-btn:active{ transform: scale(0.99); }
.time-slot-btn.selected{
  background-color:#e6f5fc;
  border:2px solid #098BC0;
  font-weight:700;
}
.time-slot-btn.disabled{
  opacity:0.5;
  cursor:not-allowed;
  background:#f5f5f5;
}

/* Additional info */
.additional-info-container{
  margin-top:15px;
  background:#fff;
  padding:10px;
  border-radius:5px;
}
.additional-info-container textarea{
  width:100%;
  height:70px;
  border-radius:5px;
  border:1px solid #ccc;
  padding:5px;
  font-size:14px;
}

/* Schedule button */
.schedule-button{
  margin-top:15px;
  width:100%;
  padding:12px;
  background:#098BC0;
  color:#fff;
  border:none;
  border-radius:8px;
  font-size:16px;
  cursor:pointer;
  display:none;
}
.schedule-button:hover{ background:#087ba8; }
.schedule-button:disabled{ background:grey; opacity:.6; cursor:not-allowed; }

/* Show more */
#showMoreContainer{ text-align:center; margin:10px 0; }
#showMoreButton{
  padding:8px 14px;
  background:#098BC0;
  border:none;
  border-radius:8px;
  color:#fff;
  cursor:pointer;
}
#showMoreButton:hover{ background:#087ba8; }

/* ===== Modals (generic) ===== */
.modal{
  display:none;
  position:fixed;
  z-index:99999;
  left:0; top:0;
  width:100%; height:100%;
  overflow:auto;
  background: rgba(0,0,0,.5);
}
.modal-content{
  background:#fff;
  margin:80px auto;
  padding:20px;
  border-radius:8px;
  width:90%;
  max-width:400px;
  position:relative;
}
.modal-content h3{ margin-top:0; }
.modal-content .close{
  position:absolute;
  right:10px; top:10px;
  cursor:pointer;
  font-weight:bold;
  font-size:18px;
}

ul#insuranceList{
  list-style:none;
  padding:0; margin:0;
  max-height:200px;
  overflow-y:auto;
  border:1px solid #ccc;
  border-radius:5px;
}
ul#insuranceList li{
  padding:8px;
  cursor:pointer;
  border-bottom:1px solid #eee;
}
ul#insuranceList li:hover{ background:#f2f8fd; }

/* ===== Autocomplete ===== */
.autocomplete-container{ position:relative; display:inline-block; }
.autocomplete-suggestions{
  position:absolute;
  top:100%; left:0;
  width:100%;
  max-height:150px;
  overflow-y:auto;
  background:#fff;
  border:1px solid #ccc;
  border-radius:5px;
  display:none;
  z-index:999999;
}
.autocomplete-suggestions div{ padding:8px 10px; cursor:pointer; }
.autocomplete-suggestions div:hover{ background:#f2f8fd; }

/* ===== Dev modal ===== */
.dev-modal-content{
  background:#fff;
  margin:80px auto;
  padding:30px 20px;
  border-radius:12px;
  max-width:400px;
  text-align:center;
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
  position:relative;
}
.dev-modal-content h2{
  margin-top:0;
  color:#333;
  font-size:20px;
  margin-bottom:10px;
}
.dev-modal-content p{
  font-size:16px;
  line-height:1.4;
  color:#555;
  margin:0 0 20px 0;
}
.dev-modal-content .close{
  position:absolute;
  font-size:24px;
  right:15px; top:15px;
  cursor:pointer;
}
.dev-modal-content .app-logo{ width:150px; margin-top:10px; }

/* ===== Mobile ===== */
@media (max-width: 799px){
  .results{
    display:flex;
    flex-direction:column;
    margin-right:0;
    min-height:auto;
  }
  .results > div{
    border-right:none;
    border-bottom:1px solid #ccc;
  }
  .results > div:last-child{ border-bottom:none; }
  .map-column{
    position:static;
    width:100%;
    height:300px;
    margin-top:0;
    border-left:none;
    top:0;
  }
  #map{ min-height:300px; }
  .topbar, .promo-message, .search-container{
    position:static;
    top:auto;
  }
  .content{ padding-top:0; }
}

/* когда календарь скрыт — делаем одну колонку */
.results.results--one{
  grid-template-columns: 1fr;
}

/* убираем вертикальную линию между колонками, когда колонка одна */
.results.results--one > div{
  border-right: none !important;
}

/* ✅ Pretty range label (если используешь в центре/when-панели) */
.range-label{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:8px 10px;
}
.range-side{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width: 0;
}
.range-dow{
  font-size:12px;
  color:#667085;
  font-weight:650;
  letter-spacing:-0.01em;
  line-height:1.05;
}
.range-date{
  margin-top:4px;
  font-size:14px;
  font-weight:650;
  color:#111;
  line-height:1.1;
  white-space: nowrap;
}
.range-sep{
  font-size:14px;
  color:#98A2B3;
  font-weight:650;
  line-height:1;
}

/* =========================
   Dentist cards: inline 14-day availability (MATCH TEST SITE)
   - scoped to dentist card to avoid conflicts
   - exact sizes/shape like your "Single Availability Card"
   ========================= */

.dentist-card .dentist-availability{
  flex: 0 1 480px;
  margin-left: 14px;
  align-self: stretch;
  display:flex;
  padding: 4px 0;
}

/* tokens (same as test) */
.dentist-card .a4{
  --cell-bg: #F3F7FB;
  --cell-text: rgba(17,24,39,.88);
  --cell-muted: rgba(17,24,39,.56);

  --avail-bg: rgba(9,139,192,.22);
  --avail-text: rgba(6,108,150,1);

  --selected-bg: rgba(9,139,192,.30);
  --selected-text: #ffffff;

  --hover-bg: rgba(9,139,192,.60);
  --hover-text: #ffffff;

  --disabled-bg: #EEF2F6;
  --disabled-text: rgba(17,24,39,.40);

  --gap: 4px;
  --radius: 8px;
  --minh: 78px;

  width: 100%;
}

.dentist-card .a4 .avail-grid{
  flex: 1 1 auto;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--gap);
}

.dentist-card .a4 .avail-day{
  border: 0;
  outline: none;
  border-radius: var(--radius);
  padding: 12px 8px;
  min-height: var(--minh);
  background: var(--cell-bg);
  color: var(--cell-text);
  cursor: pointer;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  transition: background-color .16s ease, transform .10s ease, filter .16s ease, color .16s ease;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

.dentist-card .a4 .avail-day:focus-visible{
  box-shadow: 0 0 0 3px rgba(9,139,192,.18);
}

.dentist-card .a4 .avail-day:hover{
  background: var(--hover-bg);
  color: var(--hover-text);
  transform: translateY(-1px);
  filter: saturate(1.05);
}

.dentist-card .a4 .avail-day:active{
  transform: translateY(0px) scale(0.99);
}

/* available */
.dentist-card .a4 .avail-day.is-available{
  background: var(--avail-bg);
  color: var(--avail-text);
}
.dentist-card .a4 .avail-day.is-available:hover{
  background: var(--hover-bg);
  color: var(--hover-text);
}

/* selected */
.dentist-card .a4 .avail-day.selected{
  background: var(--selected-bg);
  color: var(--selected-text);
}
.dentist-card .a4 .avail-day.selected:hover{
  background: var(--hover-bg);
  color: var(--hover-text);
}

/* disabled */
.dentist-card .a4 .avail-day:disabled,
.dentist-card .a4 .avail-day.is-disabled{
  background: var(--disabled-bg);
  color: var(--disabled-text);
  cursor: not-allowed;
  transform: none !important;
  filter: none !important;
}
.dentist-card .a4 .avail-day:disabled:hover{
  background: var(--disabled-bg);
  color: var(--disabled-text);
}

/* typography (same as test) */
.dentist-card .a4 .avail-dow{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.005em;
  opacity: .9;
  margin-bottom: 6px;
}
.dentist-card .a4 .avail-daynum{
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.0;
}
.dentist-card .a4 .avail-month{
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .85;
}

/* Variant A (same as test) */
.dentist-card .vA{
  --cell-bg: #F2F7FB;
  --avail-bg: rgba(9,139,192,.28);
  --avail-text: rgba(6,108,150,1);
  --selected-bg: rgba(9,139,192,.55);
  --selected-text: #fff;
  --hover-bg: rgba(9,139,192,.85);
  --hover-text: #fff;
}
/* CTA button under calendar */
.slots-hint-btn{
  width: 100%;
  margin: 10px 0 12px;
  padding: 10px 12px;

  border: 1px dashed #d7e1ec;
  background: #f7fafc;
  border-radius: 12px;

  color: #667085;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;

  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .08s ease;
}
.slots-hint-btn:hover{
  background:#f2f8fd;
  border-color:#098BC0;
}
.slots-hint-btn:active{
  transform: scale(0.99);
}


/* responsiveness (keep your layout logic) */
@media (max-width: 1100px){
  .dentist-card .dentist-availability{ flex-basis: 300px; }
  .dentist-card .a4{ --minh: 72px; }
  .dentist-card .a4 .avail-day{ min-height: var(--minh); padding: 10px 8px; }
}
@media (max-width: 799px){
  .dentist-card{ flex-direction:column; }
  .dentist-card .dentist-availability{
    flex: 1 1 auto;
    margin-left:0;
    padding: 10px 0 0;
  }
}

/* =========================
   WHEN row + 2-week range (moved from index.html <style>)
   ========================= */

/* Hide calendar column on first page */
.results.is-calendar-hidden { grid-template-columns: 1fr !important; }
.results.is-calendar-hidden #calendarColumn { display: none !important; }

/* When right column is shown, restore 2 columns */
.results.is-calendar-shown { grid-template-columns: 1fr 1fr !important; }

/* "When" row spans both columns, keep space for fixed map */
.when-row{
  margin: 10px 0 12px;
  margin-right: 33.3333%;
}

.when-panel{
  background:#fff;
  border:1px solid #e6edf4;
  border-radius:12px;
  padding:12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);

  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.when-left{
  flex: 1 1 auto;
  min-width: 280px;
}

.when-title{
  font-weight: 650;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  color:#111;
}

.when-options{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.when-chip{
  border:1px solid #d7e1ec;
  background:#eef3f8;
  color:#111;
  padding:8px 10px;
  border-radius:999px;
  cursor:pointer;
  font-size:14px;
  transition: background-color .2s, border-color .2s, transform .08s;
  user-select:none;
  white-space: nowrap;
}
.when-chip:hover{
  border-color:#098BC0;
  background:#f2f8fd;
}
.when-chip:active{ transform: scale(0.99); }
.when-chip.selected{
  border-color:#098BC0;
  background:#e6f5fc;
  color:#066c96;
  font-weight: 650;
}

.when-hint{
  margin-top: 8px;
  font-size: 13px;
  color:#667085;
}

/* Right side: 2-week range with arrows */
.when-right{
  margin-left: auto;
  padding-left: 10px;
  flex: 0 0 360px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  max-width: 360px;
}

.range-nav{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

.range-arrow{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid #e6edf4;
  background:#f7fafc;
  color:#098BC0;
  cursor:pointer;
  font-size:20px;
  line-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background-color .18s, border-color .18s, transform .08s;
  user-select:none;
  flex: 0 0 auto;
}
.range-arrow:hover{
  border-color:#098BC0;
  background:#f2f8fd;
}
.range-arrow:active{ transform: scale(0.99); }

/* Label with 2 lines per side */
.range-label{
  flex: 1 1 auto;
  min-width: 0;
  border:1px solid #e6edf4;
  background:#ffffff;
  border-radius:12px;
  padding:8px 10px;
  font-weight: 650;
  color:#111;
  letter-spacing:-0.01em;
  white-space: nowrap;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.range-side{
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1.05;
  min-width: 0;
}

.range-dow{
  font-size:12px;
  color:#667085;
  font-weight:650;
  letter-spacing:-0.01em;
}

.range-date{
  margin-top:3px;
  font-size:13px;
  font-weight:650;
  color:#111;
}

.range-sep{
  opacity:.45;
  font-weight:650;
  transform: translateY(1px);
  flex: 0 0 auto;
}

.range-sub{
  width: 100%;
  text-align:right;
  font-size:12px;
  color:#667085;
}

/* On small screens map is not fixed; remove right margin; stack */
@media (max-width: 799px){
  .when-row{ margin-right: 0; }
  .when-panel{ flex-direction:column; align-items:stretch; }
  .when-right{
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
    align-items:stretch;
    padding-left: 0;
  }
  .range-sub{ text-align:left; }
  .range-label{ justify-content:space-between; }
}