/* doctors page styles (moved out of doctors.php) */

/* ================= GLOBAL STYLES ================= */
* { box-sizing: border-box; }

body { 
  margin: 0; 
  background: #f6f8fb; 
  color: #212529; 
  font-family: var(--font-sans); 
}

/* ================= HEADINGS ================= */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: #102a56;
}

/* ================= PARAGRAPHS ================= */
p, li, .small, .text-muted {
  font-weight: 400;
  color:rgba(37,37,41,0.75) !important; 
}

/* ================= MENU FIX ================= */
#menu {
  background-color: #ffffff;
  position: fixed;
  top: 0; 
  left: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.nav-space { height: 90px; }

/* ================= HERO SECTION ================= */
.doctors-hero {
  background: #eef3f9;
  padding: 40px 0;
  text-align: center;
}
.doctors-hero h1 { 
  margin-bottom: 15px; 
}
.doctors-hero p { 
  max-width: 700px; 
  margin: 0 auto; 
}

/* ================= SEARCH FORM ================= */
.search-form { 
  background: #fff; 
  padding: 30px; 
  border-radius: 16px; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
  margin-bottom: 40px; 
  margin-top: -30px; 
  position: relative; 
  z-index: 10; 
}
.search-form .form-label { 
  font-weight: 600; 
  color: #102a56; 
}
.search-form .btn { 
  background: #102a56; 
  border: none; 
  padding: 10px 20px; 
  width: 100%; 
  height: 100%; 
  display: flex; 
  align-items: center; 
  justify-content: center;
}
.search-form .btn:hover { 
  background: #0a1f3d; 
}

/* ================= DOCTOR CARDS ================= */
.doctor-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
  gap: 25px; 
  margin-bottom: 50px; 
}

.doctor-card { 
  background: #fff; 
  border-radius: 16px; 
  padding: 25px; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.05); 
  transition: transform 0.3s; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  text-align: center; 
}
.doctor-card:hover { 
  transform: translateY(-5px); 
  box-shadow: 0 10px 20px rgba(0,0,0,0.1); 
}

.doctor-img-container {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 15px;
  border: 3px solid #eef3f9;
  margin-left: auto;
  margin-right: auto;
}
.doctor-card img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

.doctor-card h5 { 
  font-size: var(--fs-lg); 
  line-height: var(--lh-tight);
  margin-bottom: 5px; 
  transition: color 0.3s;
}

/* Making the image and name clickable */
.profile-link {
  text-decoration: none;
  color: inherit;
  display: block;
  width: 100%;
}
.profile-link:hover h5 {
  color: #0d6efd;
}

.doctor-card .specialty { 
  color: #28a745; 
  font-weight: 600; 
  font-size: var(--fs-sm); 
  margin-bottom: 10px; 
  text-transform: uppercase; 
}
.doctor-card p { 
  margin: 5px 0; 
  color: #212529; 
  font-size: var(--fs-base); 
}
.doctor-card .rating { 
  color: #ffc107; 
  margin-bottom: 10px; 
}

.btn-book { 
  background: #28a745; 
  color: white; 
  border: none; 
  padding: 10px 20px; 
  border-radius: 50px; 
  font-weight: 600; 
  margin-top: auto; 
  width: 100%; 
  transition: 0.3s; 
  text-decoration: none;
  display: block;
}
.btn-book:hover { 
  background: #218838; 
  color: white;
}

/* ================= NO RESULTS ================= */
.no-results { 
  text-align: center; 
  color: #212529; 
  font-size: var(--fs-base); 
  padding: 50px; 
  width: 100%; 
  grid-column: 1 / -1; 
}

/* ================= MOBILE ================= */
@media(max-width:768px){
  .doctor-grid { grid-template-columns: 1fr; }
  .search-form { padding: 20px; }
}

/* ---- Former inline style="..." attributes ----
   :not(#_#_#_) gives these the same strength an inline style had:
   they beat normal rules but still lose to !important rules. */
.doctors-s1:not(#_#_#_) {
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 48px;
}

/* Doctor photo in JS-rendered cards */
.doctors-card-img:not(#_#_#_) {
  height: 120px;
}