/* style.css */

/* Theme Colors */
:root {
  --primary-color: #0c5eb9;     
  --secondary-color: #0088cc;   
  --text-color: #333;
  --background-color: #f9f9f9;
}

/* Reset & Base */
* {margin:0; padding:0; box-sizing:border-box;}
body {
  font-family:'Poppins', Arial, sans-serif;
  color: var(--text-color);
  background: var(--background-color);
  line-height:1.6;
}

/* Header */
header {
  position:fixed;
  top:0;
  width:100%;
  background: var(--primary-color);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 40px;
  z-index:1000;
}
header img {height:50px;}
nav a {
  color:#fff;
  margin:0 15px;
  text-decoration:none;
  font-weight:600;
  transition:color 0.3s;
}
nav a:hover {color:#87cefa;}

/* Hero Slider */
.slider {
  margin-top:80px;
  position:relative;
  max-width:100%;
  height:400px;
  overflow:hidden;
}
.slider img {width:100%; height:400px; object-fit:cover; display:none;}
.slider img.active {display:block; animation:fadeIn 1s;}
.slider-text {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  text-align:center;
  color:#fff;
  background:rgba(12,94,185,0.6);
  padding:20px 40px;
  border-radius:8px;
}
.slider-text h1 {font-size:2.5em; margin-bottom:10px;}
.slider-text p {font-size:1.2em;}

/* Sections */
section {padding:80px 20px; max-width:1200px; margin:auto;}
h2 {color: var(--primary-color); text-align:center; margin-bottom:40px; font-size:2em;}

/* Services Grid */
.services {display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px;}
.card {
  background:#fff;
  border-radius:8px;
  box-shadow:0 4px 8px rgba(0,0,0,0.1);
  padding:30px;
  text-align:center;
  transition:transform 0.3s;
}
.card:hover {transform:translateY(-5px);}
.card h3 {margin-bottom:15px; color: var(--primary-color);}

/* Clinic Gallery */
.clinic-gallery {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
}
.clinic-gallery img {
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,0.12);
  opacity:1;
  transition:opacity 0.45s ease-in-out;
}
.clinic-gallery img.fade-out {
  opacity:0;
}

/* Testimonials */
.testimonials {display:flex; flex-wrap:wrap; gap:20px; justify-content:center;}
.google-reviews-meta {
  text-align:center;
  margin:-22px 0 24px;
  color:#4c6788;
  font-weight:600;
}
.google-reviews-link {
  margin-left:10px;
  color: var(--primary-color);
  text-decoration: underline;
}
.testimonial {
  flex:1 1 300px;
  background:#fff;
  padding:20px;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
}
.testimonial p {font-style:italic;}
.testimonial h4 {margin-top:15px; color: var(--primary-color);}
.review-meta {
  margin-top:8px;
  color:#6b7f99;
  font-size:0.9rem;
}

/* Contact */
.contact {text-align:center; line-height:1.8;}
.google-qr-card {
  max-width:320px;
  margin:20px auto 10px;
  background:#fff;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,0.1);
  padding:16px;
  border:1px solid #dbe7f6;
}
.google-qr-card h3 {
  color:var(--primary-color);
  margin-bottom:6px;
  font-size:1.1rem;
}
.google-qr-card p {
  margin:0 0 12px;
  color:#4f647f;
  line-height:1.4;
}
.google-qr-card img {
  width:180px;
  height:180px;
  margin:0 auto 10px;
  border-radius:10px;
  border:1px solid #d9e5f2;
  display:block;
  background:#fff;
  padding:8px;
}
.google-qr-card a {
  color:var(--primary-color);
  text-decoration:underline;
  font-weight:600;
}
.contact iframe {
  width:100%;
  max-width:600px;
  height:300px;
  border:0;
  border-radius:8px;
  margin-top:20px;
}

/* Floating Button */
#telegramBookBtn {
  position:fixed;
  bottom:30px;
  right:30px;
  background: var(--secondary-color);
  color:white;
  padding:14px 20px;
  border-radius:50px;
  font-weight:600;
  cursor:pointer;
  z-index:999;
  box-shadow:0 4px 10px rgba(0,0,0,0.3);
}

/* Popup Form */
#appointmentPopup {
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
  z-index:1000;
  align-items:center;
  justify-content:center;
}
.popup-content {
  background:#fff;
  padding:30px;
  border-radius:10px;
  width:350px;
  max-width:90%;
  text-align:center;
  position:relative;
  box-shadow:0 6px 15px rgba(0,0,0,0.2);
}
.popup-content input,
.popup-content select {
  width:100%;
  padding:10px;
  margin:10px 0;
  border:2px solid var(--primary-color);
  border-radius:6px;
}
.popup-content label {
  display:block;
  text-align:left;
  font-size:0.9rem;
  font-weight:600;
  margin-top:8px;
}
.popup-content button {
  background: var(--primary-color);
  color:#fff;
  padding:10px;
  border:none;
  border-radius:6px;
  cursor:pointer;
  width:100%;
}
#closePopup {
  position:absolute;
  top:10px;
  right:15px;
  font-size:22px;
  cursor:pointer;
}

/* Footer */
footer {background: var(--primary-color); color:white; text-align:center; padding:20px; margin-top:40px;}
footer .admin-link {
  color: #d6e9ff;
  margin-left: 14px;
  text-decoration: underline;
  font-weight: 600;
}
footer .admin-link:hover { color: #ffffff; }

/* Animations */
@keyframes fadeIn {from{opacity:0;} to{opacity:1;}}