:root{
  --navy:#0B2E38;
  --teal:#2E93B0;
  --teal-dark:#1D6E85;
  --teal-light:#7FD1D9;
  --mint:#EAF7F8;
  --amber:#F2A93B;
  --whatsapp:#25D366;
  --whatsapp-dark:#1ebe57;
  --card-radius:16px;
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
  font-family:'Tajawal',Tahoma,sans-serif;
  background:var(--mint);
  color:var(--navy);
}

h1,h2,h3,.brand-name{font-family:'Cairo',Tahoma,sans-serif;}

/* Header */
.site-header{
  background:linear-gradient(90deg,var(--navy) 0%,var(--teal-dark) 100%);
  padding:14px 0;
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:0 4px 18px rgba(0,0,0,.15);
}

.brand-wrap{display:flex;align-items:center;gap:14px;}

.logo-circle{
  width:54px;height:54px;border-radius:50%;
  background:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 0 0 3px rgba(255,255,255,.15), 0 6px 14px rgba(0,0,0,.35);
  overflow:hidden;
  padding:3px;
}

.logo-circle img{
  width:100%;height:100%;
  border-radius:50%;
  object-fit:cover;
}

.brand-text .brand-name{color:#fff;font-weight:800;font-size:22px;line-height:1.1;}
.brand-text .brand-tag{color:#BFE3DF;font-size:12.5px;font-weight:500;}

/* Hero */
.hero{
  background:linear-gradient(135deg,var(--teal) 0%,var(--teal-dark) 55%,var(--navy) 100%);
  color:#fff;
  padding:56px 0 30px;
  text-align:center;
  position:relative;
  overflow:hidden;
}

.hero h1{font-weight:900;font-size:clamp(24px,4vw,40px);margin-bottom:12px;}
.hero p{color:#D9F0EC;font-size:16px;max-width:640px;margin:0 auto 8px;}

.pulse-wrap{margin-top:26px;width:100%;max-width:820px;margin-inline:auto;opacity:.9;}

.pulse-line{
  stroke:#7EE0D3;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:900;stroke-dashoffset:900;
  animation:draw 2.6s ease-out forwards .3s;
}

@keyframes draw{to{stroke-dashoffset:0;}}

/* Filters */
.filters-card{
  background:#fff;border-radius:var(--card-radius);
  box-shadow:0 10px 30px rgba(11,37,69,.08);
  padding:20px;margin-top:-34px;position:relative;z-index:10;
}

.filters-card label{font-size:13px;font-weight:700;color:var(--teal-dark);margin-bottom:6px;display:block;}
.filters-card .form-select,.filters-card .form-control{
  border-radius:10px;border:1px solid #dde6ea;padding:10px 14px;font-family:'Tajawal',sans-serif;
}
.filters-card .form-select:focus,.filters-card .form-control:focus{
  border-color:var(--teal);box-shadow:0 0 0 .2rem rgba(14,124,134,.15);
}

.btn-reset{
  background:var(--navy);color:#fff;border:none;border-radius:10px;padding:10px 18px;
  font-weight:700;width:100%;transition:.2s;
}
.btn-reset:hover{background:#132f5c;color:#fff;}

.results-counter{margin:20px 4px 10px;font-weight:700;color:var(--teal-dark);font-size:16px;}

/* Doctor Cards */
.doctor-card{
  background:#fff;border-radius:var(--card-radius);
  box-shadow:0 6px 20px rgba(11,37,69,.07);
  padding:20px;height:100%;display:flex;flex-direction:column;gap:10px;
  opacity:0;transform:translateY(24px);
  transition:opacity .55s ease, transform .55s ease, box-shadow .25s ease;
  position:relative;
}

.doctor-card.visible{opacity:1;transform:translateY(0);}
.doctor-card:hover{box-shadow:0 14px 30px rgba(11,37,69,.16);transform:translateY(-4px);}

.card-top{display:flex;align-items:center;gap:14px;}

.avatar-circle{
  width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,var(--teal-light),var(--teal-dark));
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;
}

.doctor-name{font-family:'Cairo',sans-serif;font-weight:800;font-size:16.5px;color:var(--navy);margin-bottom:2px;}

.clinic-badge{
  display:inline-block;background:var(--mint);color:var(--teal-dark);
  font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:20px;
}

.available-badge{
  position:absolute;top:14px;left:14px;background:var(--amber);color:#3b2600;
  font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:20px;
  display:flex;align-items:center;gap:4px;
  animation:pulseBadge 1.8s infinite;
}

@keyframes pulseBadge{
  0%,100%{box-shadow:0 0 0 0 rgba(242,169,59,.5);}
  50%{box-shadow:0 0 0 6px rgba(242,169,59,0);}
}

.info-row{display:flex;align-items:center;gap:8px;font-size:14px;color:#3b4b5c;}
.info-row i{color:var(--teal);width:18px;text-align:center;}

.price-row{font-size:15px;font-weight:800;color:var(--navy);}
.price-row span{color:var(--teal-dark);}

.note-row{font-size:12.5px;color:#8a97a3;font-style:italic;}

.book-btn{
  margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--whatsapp);color:#fff;border:none;border-radius:30px;padding:11px;
  font-weight:800;font-size:15px;text-decoration:none;transition:background .2s, transform .1s;
}
.book-btn:hover{background:var(--whatsapp-dark);color:#fff;}
.book-btn:active{transform:scale(.97);}

.empty-state{text-align:center;padding:50px 20px;color:#8a97a3;}
.empty-state i{font-size:42px;color:var(--teal-light);margin-bottom:14px;}

/* Footer */
footer{
  background:var(--navy);color:#cfe3df;text-align:center;padding:26px 14px;
  margin-top:50px;font-size:13.5px;line-height:1.9;
}
footer a{color:#7EE0D3;text-decoration:none;font-weight:700;}
footer a:hover{text-decoration:underline;}
footer .foot-brand{font-family:'Cairo',sans-serif;font-weight:800;color:#fff;font-size:15px;}

@media (max-width:576px){
  .hero{padding:40px 0 24px;}
  .filters-card{margin-top:-20px;}
}