*{box-sizing:border-box;margin:0;padding:0}
:root{--navy:#153574;--navy2:#0d285a;--red:#ef2429;--cream:#f7f8fb;--ink:#172238;--muted:#6c7484;--white:#fff;--line:#e5e8ef;--shadow:0 22px 60px rgba(17,40,84,.12)}
html{scroll-behavior:smooth}
body{font-family:"DM Sans",sans-serif;color:var(--ink);background:#fff;line-height:1.6;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1160px,calc(100% - 40px));margin:auto}
.topbar{background:var(--navy2);color:#dbe5ff;font-size:13px}
.topbar-inner{display:flex;justify-content:space-between;padding:9px 0}
.topbar a{color:#fff;font-weight:700}
.site-header{background:#fff;position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(20,50,110,.08)}
.nav-wrap{height:82px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:flex;align-items:center;gap:11px;min-width:max-content}
.brand img{width:55px;height:55px;object-fit:cover;border-radius:50%;background:var(--navy)}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-text strong{font-family:"Playfair Display",serif;font-size:36px;letter-spacing:.12px;color:var(--navy)}
.brand-text small{font-size:18px;letter-spacing:1.5px;color:#cf2424;margin-top:6px}
.main-nav{display:flex;align-items:center;gap:27px;font-size:14px;font-weight:600;color:#424b5d}
.main-nav a:hover{color:var(--red)}
.nav-cta{background:var(--red)!important;color:#fff!important;padding:12px 18px;border-radius:7px}
.menu-toggle{display:none;border:0;background:none;font-size:26px;color:var(--navy)}
.hero{position:relative;background:linear-gradient(180deg,#f8fbff 0%,#fff 100%);padding:88px 0 100px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:65px;position:relative;z-index:2}
.eyebrow{font-size:12px;letter-spacing:2px;color:var(--red);font-weight:800;margin-bottom:17px}
.eyebrow span{display:inline-block;width:26px;height:2px;background:var(--red);vertical-align:middle;margin-right:8px}
.hero h1,.section-heading h2,.about-copy h2,.pets-section h2,.appointment-copy h2,.contact-card h2{font-family:"Playfair Display",serif;line-height:1.08;color:var(--navy)}
.hero h1{font-size:clamp(43px,5.4vw,68px);letter-spacing:-1.8px}
.hero h1 em,.pets-section h2 em{color:var(--red);font-style:normal}
.hero-lead{font-size:17px;color:#626b7c;max-width:590px;margin:24px 0 30px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:15px 23px;border-radius:7px;font-weight:800;font-size:14px;border:1px solid transparent;transition:.2s transform,.2s box-shadow,.2s background}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 25px rgba(18,42,90,.13)}
.btn-primary{background:var(--red);color:#fff}
.btn-outline{border-color:#cdd4df;background:#fff;color:var(--navy)}
.btn-dark{background:var(--navy);color:#fff}
.hero-trust{display:flex;align-items:center;gap:14px;margin-top:38px;color:#687183}
.hero-trust .stars{color:#f3ad19;letter-spacing:2px;font-size:17px}
.hero-trust strong{display:block;color:var(--navy);font-size:15px}
.hero-trust span{font-size:11px}
.trust-divider{height:32px;width:1px;background:#dfe3e9}
.hero-visual{position:relative}
.image-card{position:relative;border-radius:28px;overflow:visible}
.image-card:before{content:"";position:absolute;inset:22px -18px -18px 18px;border:2px solid #e5eaf3;border-radius:28px;z-index:-1}
.image-card>img{height:570px;width:100%;object-fit:cover;border-radius:28px;box-shadow:var(--shadow)}
.floating-card{position:absolute;left:-34px;bottom:35px;background:#fff;border-radius:14px;box-shadow:0 18px 45px rgba(20,43,84,.18);padding:16px 20px;display:flex;gap:12px;align-items:center}
.floating-card strong{display:block;font-size:13px;color:var(--navy)}
.floating-card small{display:block;color:#7b8494;font-size:11px;margin-top:2px}
.floating-icon{width:37px;height:37px;display:grid;place-items:center;background:#fff0f0;color:var(--red);border-radius:50%}
.circle-doodle{position:absolute;right:-30px;top:-28px;width:90px;height:90px;border:2px dashed #e6a4a6;border-radius:50%;display:grid;place-items:center;font-size:28px;transform:rotate(13deg)}
.hero-shape{position:absolute;border-radius:50%;filter:blur(1px);opacity:.55}.hero-shape-one{width:300px;height:300px;background:#eaf0ff;right:-120px;top:-110px}.hero-shape-two{width:180px;height:180px;background:#fff1f1;left:-70px;bottom:-70px}
.quick-strip{background:var(--navy);color:#fff}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:23px 0}
.quick-grid>div{display:flex;align-items:center;gap:13px;padding:7px 25px;border-right:1px solid rgba(255,255,255,.14)}
.quick-grid>div:last-child{border-right:0}
.quick-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.1);font-size:18px}
.quick-grid strong{display:block;font-size:13px}.quick-grid small{display:block;color:#c3d0ee;font-size:11px}
.section{padding:100px 0}.services-section{background:#fff}
.section-heading{max-width:720px;margin-bottom:50px}.section-heading.centered{text-align:center;margin-left:auto;margin-right:auto}
.section-heading h2{font-size:clamp(35px,4vw,50px);letter-spacing:-1px}.section-heading p{color:var(--muted);margin-top:15px}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.service-card{padding:27px 24px;border:1px solid var(--line);border-radius:14px;background:#fff;min-height:275px;position:relative;transition:.25s box-shadow,.25s transform}
.service-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.service-card.featured{border-color:#f4b9bb;background:#fff8f8}
.service-number{position:absolute;right:18px;top:17px;font-size:11px;color:#a9afba;font-weight:700}
.service-icon{font-size:30px;margin-bottom:22px}
.service-card h3{font-family:"Playfair Display",serif;font-size:21px;color:var(--navy);line-height:1.2;margin-bottom:10px}
.service-card p{font-size:13px;color:var(--muted);line-height:1.65}
.service-card a{display:inline-block;color:var(--red);font-size:12px;font-weight:800;margin-top:18px}
.emergency-card{background:var(--navy);color:#fff;border-color:var(--navy)}.emergency-card h3{color:#fff}.emergency-card p{color:#c9d4ed}.emergency-card a{color:#fff}
.about-section{padding:100px 0;background:#f7f8fb}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}
.about-visual{position:relative;padding:0 20px 20px 0}
.about-visual img{width:100%;height:520px;object-fit:cover;border-radius:22px}
.about-visual:after{content:"";position:absolute;left:-20px;bottom:-1px;width:180px;height:180px;background:var(--red);opacity:.1;border-radius:50%;z-index:0}
.about-badge{position:absolute;right:-3px;bottom:0;background:#fff;padding:18px 23px;border-radius:12px;box-shadow:0 16px 40px rgba(15,39,82,.15);z-index:2}
.about-badge strong{display:block;font-family:"Playfair Display",serif;font-size:25px;color:var(--navy)}.about-badge span{font-size:11px;color:#7b8391}
.about-copy h2{font-size:48px}.about-copy>p{color:var(--muted);margin:22px 0}
.check-list{display:grid;gap:11px;margin:25px 0 30px}.check-list div{font-size:14px;font-weight:600}.check-list span{display:inline-grid;place-items:center;background:#eaf7ed;color:#24954d;border-radius:50%;width:22px;height:22px;margin-right:8px;font-size:12px}
.pets-section{background:var(--navy);color:#fff;padding:100px 0}.pets-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:75px;align-items:center}.eyebrow.light{color:#dbe5ff}.pets-section h2{font-size:55px;color:#fff}.pets-section p{color:#cbd5ec;margin:22px 0 25px;max-width:480px}.text-link{color:#fff;font-weight:800;font-size:13px;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:4px}
.pet-images{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;align-items:end}.pet-images img{width:100%;height:360px;object-fit:cover;border-radius:18px}.pet-images img+img{height:270px}
.reviews-section{padding:100px 0;background:#fff}
.review-summary{max-width:930px;margin:0 auto;padding:34px 40px;border:1px solid var(--line);border-radius:18px;display:grid;grid-template-columns:170px 1fr auto;gap:30px;align-items:center;box-shadow:0 12px 40px rgba(20,40,80,.06)}
.rating-big{border-right:1px solid var(--line);text-align:center;padding-right:28px}.rating-big strong{display:block;font-family:"Playfair Display",serif;font-size:54px;line-height:1;color:var(--navy)}.rating-big span{display:block;color:#f3ad19;letter-spacing:2px;font-size:18px;margin:6px 0}.rating-big small{color:#7b8390;font-size:11px}
.rating-copy strong{font-size:18px;color:var(--navy)}.rating-copy p{color:var(--muted);font-size:13px;margin-top:6px}
.review-note{max-width:930px;margin:18px auto 0;background:#f7f8fb;border-radius:12px;padding:17px 22px;display:flex;gap:12px}.review-note>span{color:#f3ad19;font-size:21px}.review-note strong{font-size:13px}.review-note p{font-size:11px;color:var(--muted);margin-top:2px}
.appointment-section{background:linear-gradient(135deg,var(--navy2),var(--navy));padding:95px 0;color:#fff}.appointment-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}.appointment-copy h2{font-size:49px;color:#fff}.appointment-copy>p{color:#c9d5ef;margin:22px 0 30px;max-width:470px}
.contact-mini{display:grid;gap:12px}.contact-mini a{display:flex;gap:13px;align-items:center;color:#fff}.contact-mini a>span{width:39px;height:39px;border:1px solid rgba(255,255,255,.18);border-radius:50%;display:grid;place-items:center}.contact-mini small{display:block;color:#aebedc;font-size:10px}.contact-mini strong{font-size:13px}
.appointment-form{background:#fff;color:var(--ink);border-radius:18px;padding:30px;box-shadow:0 20px 60px rgba(0,0,0,.18)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}label{display:block;font-size:11px;font-weight:800;color:#50596a;margin-bottom:14px}input,select,textarea{width:100%;font:inherit;font-size:13px;font-weight:500;border:1px solid #dfe4ec;border-radius:7px;padding:13px 14px;margin-top:7px;outline:none;background:#fff;color:#1c2639}input:focus,select:focus,textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(239,36,41,.08)}textarea{resize:vertical}.full{width:100%;border:0;cursor:pointer}.form-help{text-align:center;color:#8b93a1;font-size:10px;margin-top:10px}
.contact-section{padding:100px 0;background:#f7f8fb}.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:30px}.contact-card{background:#fff;border-radius:18px;padding:45px;box-shadow:var(--shadow)}.contact-card h2{font-size:44px;margin-bottom:35px}.contact-item{display:flex;gap:14px;margin:22px 0}.contact-item>span{font-size:20px;width:30px}.contact-item strong{display:block;color:var(--navy);font-size:13px}.contact-item p{font-size:13px;color:var(--muted);margin-top:2px}.contact-item a{color:var(--red);font-weight:800}.map-wrap{min-height:500px;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:#ddd}.map-wrap iframe{width:100%;height:100%;min-height:500px;border:0}
.site-footer{background:#0b2250;color:#d6def0;padding:45px 0 20px}.footer-grid{display:grid;grid-template-columns:1fr auto auto;gap:35px;align-items:center}.footer-brand{display:flex;align-items:center;gap:12px}.footer-brand img{width:80px;height:80px;border-radius:50%;object-fit:cover}.footer-brand strong{display:block;color:#fff;font-family:"Playfair Display",serif}.footer-brand span{font-size:10px;color:#9eafd2}.footer-links{display:flex;gap:20px;font-size:12px}.footer-links a:hover{color:#fff}.footer-contact{text-align:right;font-size:12px}.footer-contact a{display:block;color:#fff;font-weight:800}.footer-contact span{display:block;margin-top:3px}.copyright{border-top:1px solid rgba(255,255,255,.1);margin-top:30px;padding-top:18px;font-size:20px;color:#8fa1c5}
.mobile-actions{display:none}
@media(max-width:1000px){.main-nav{gap:15px}.hero-grid{gap:35px}.services-grid{grid-template-columns:repeat(2,1fr)}.quick-grid{grid-template-columns:repeat(2,1fr)}.quick-grid>div:nth-child(2){border-right:0}.quick-grid>div{border-bottom:1px solid rgba(255,255,255,.14)}.quick-grid>div:nth-last-child(-n+2){border-bottom:0}.about-grid{gap:50px}.pets-grid{gap:40px}}
@media(max-width:800px){.topbar{display:none}.site-header{position:sticky}.nav-wrap{height:72px}.brand-text strong{font-size:15px}.main-nav{position:absolute;top:72px;left:20px;right:20px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;display:none;flex-direction:column;align-items:stretch;gap:2px;box-shadow:var(--shadow)}.main-nav.open{display:flex}.main-nav a{padding:12px}.menu-toggle{display:block}.hero{padding:60px 0 75px}.hero-grid{grid-template-columns:1fr}.hero-visual{max-width:620px;margin:20px auto 0}.image-card>img{height:470px}.floating-card{left:14px}.hero-trust{flex-wrap:wrap}.quick-grid{grid-template-columns:1fr}.quick-grid>div,.quick-grid>div:nth-child(2){border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}.quick-grid>div:last-child{border-bottom:0}.about-grid,.pets-grid,.appointment-grid,.contact-grid{grid-template-columns:1fr}.about-visual{max-width:600px;margin:auto}.about-copy h2,.appointment-copy h2,.contact-card h2{font-size:40px}.pet-images{max-width:650px;margin:auto}.review-summary{grid-template-columns:1fr;text-align:center}.rating-big{border-right:0;border-bottom:1px solid var(--line);padding:0 0 20px}.footer-grid{grid-template-columns:1fr}.footer-contact{text-align:left}.footer-links{flex-wrap:wrap}.mobile-actions{position:fixed;left:0;right:0;bottom:0;height:58px;background:#fff;display:grid;grid-template-columns:repeat(3,1fr);z-index:60;box-shadow:0 -10px 30px rgba(0,0,0,.1)}.mobile-actions a{display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--navy);border-right:1px solid var(--line)}.mobile-actions a:last-child{border:0;background:var(--red);color:#fff}}
@media(max-width:560px){.container{width:min(100% - 28px,1160px)}.hero h1{font-size:42px}.hero-lead{font-size:15px}.hero-actions .btn{width:100%}.image-card>img{height:390px}.services-grid{grid-template-columns:1fr}.service-card{min-height:240px}.section,.about-section,.reviews-section,.contact-section{padding:75px 0}.pets-section,.appointment-section{padding:75px 0}.pets-section h2{font-size:43px}.pet-images{grid-template-columns:1fr 1fr}.pet-images img,.pet-images img+img{height:250px}.appointment-form{padding:20px}.form-row{grid-template-columns:1fr;gap:0}.contact-card{padding:28px}.map-wrap,.map-wrap iframe{min-height:380px}.footer-grid{padding-bottom:15px}}
.contact-mini a > span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-mini a > span .fa-whatsapp {
    font-size: 22px;
    color: #25D366;
}
.social-links {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
}

.social-links a {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    font-size: 21px;
    transition: all 0.25s ease;
}

.social-links a:hover {
    background: #ffffff;
    color: #153574;
    transform: translateY(-3px);
}

.social-links i {
    line-height: 1;
}
/* ===== MOBILE HEADER FIX ===== */
@media (max-width: 560px) {

    .nav-wrap {
        height: 68px;
        gap: 10px;
    }

    .brand {
        gap: 8px;
        min-width: 0;
        flex: 1;
    }

    .brand img {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
    }

    .brand-text {
        min-width: 0;
    }

    .brand-text strong {
        font-size: 18px;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .brand-text small {
        font-size: 10px;
        letter-spacing: 0.8px;
        margin-top: 4px;
        white-space: nowrap;
    }

    .menu-toggle {
        flex-shrink: 0;
        font-size: 24px;
    }
}
/* =========================================
   HERO TOP IMAGE SLIDER
   ========================================= */

.hero-banner {
  width: 100%;
  height: 170px;
  margin: 0 auto 35px;
  overflow: hidden;
  border-radius: 4px;
  position: relative;
  background: #f1f5f9;
}

.hero-banner-track {
  display: flex;
  width: 300%;
  height: 100%;
  animation: heroSlide 12s infinite;
}

.hero-banner-track img {
  width: 33.333333%;
  height: 100%;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Automatic horizontal sliding */

@keyframes heroSlide {

  0%,
  28% {
    transform: translateX(0);
  }

  33%,
  61% {
    transform: translateX(-33.333333%);
  }

  66%,
  94% {
    transform: translateX(-66.666666%);
  }

  100% {
    transform: translateX(0);
  }
}


/* Mobile */

@media (max-width: 768px) {

  .hero-banner {
    height: 110px;
    margin-bottom: 25px;
    border-radius: 3px;
  }

  .hero-banner-track {
    animation-duration: 10s;
  }

}
/* =========================================
   TOP HERO SLIDER - SEPARATE FROM HERO GRID
   ========================================= */

.hero-slider-wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto 35px;
  padding: 0 20px;
  box-sizing: border-box;
  
}

.hero-slider-wrap .hero-banner {
  width: 100%;
  height: 170px;
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
  position: relative;
}

.hero-slider-wrap .hero-banner-track {
  display: flex;
  width: 300%;
  height: 100%;
  animation: heroSlide 12s infinite;
}

.hero-slider-wrap .hero-banner-track img {
  width: 33.333333%;
  height: 100%;
  flex: 0 0 33.333333%;
  object-fit: cover;
  object-position: center;
  display: block;
}


/* IMPORTANT:
   Keep the original hero grid untouched
*/

.hero-grid {
  width: min(100% - 40px, 1160px);
  margin-left: auto;
  margin-right: auto;
}


/* Mobile */

@media (max-width: 768px) {

  .hero-slider-wrap {
    padding: 0 12px;
    margin-bottom: 25px;
  }

  .hero-slider-wrap .hero-banner {
    height: 200px;
  }

}
/* =========================================
   TOP SLIDER - MOBILE FIX
   ========================================= */

.hero-banner {
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
}

.hero-banner-track {
  display: flex;
  width: 300%;
  animation: heroSlider 15s infinite;
}

.hero-banner-track img {
  flex: 0 0 33.333333%;
  width: 33.333333%;
  height: auto !important;
  min-height: 0 !important;
  object-fit: contain !important;
  display: block;
}

/* Keep full image visible on mobile */
@media (max-width: 768px) {
  .hero-slider-wrap {
    width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
  }

  .hero-banner {
    height: auto !important;
  }

  .hero-banner-track img {
    width: 33.333333%;
    height: auto !important;
    object-fit: contain !important;
  }
}
/* =========================================
   MOBILE HERO SLIDER - POSITION & HEIGHT
   ========================================= */

@media (max-width: 768px) {

  .hero-banner-wrap {
    width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px !important;
  }

  .hero-banner {
    height: 65px !important;
    overflow: hidden;
    border-radius: 4px;
  }

  .hero-banner-track {
    height: 65px !important;
  }

  .hero-banner-track img {
    width: 33.333333% !important;
    height: 65px !important;
    min-height: 65px !important;
    object-fit: cover !important;
    display: block;
  }

}
/* =========================================
   MOBILE TOP SLIDER - FINAL POSITION FIX
   ========================================= */

@media (max-width: 768px) {

  .hero-slider-wrap {
    width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;

    /* Slider ko header ke qareeb lao */
    margin-top: -55px !important;

    margin-bottom: 25px !important;
    padding: 0 !important;
  }
}
/* =========================================
   DR. EHTISHAM - PHOTO + LINKEDIN
   ========================================= */

.doctor-photo-click {
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
  overflow: visible;
}

.doctor-photo-click img {
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
}

/* LinkedIn icon INSIDE photo - bottom left */
.doctor-linkedin {
  position: absolute !important;

  left: 18px !important;
  right: auto !important;
  bottom: 18px !important;

  width: 46px;
  height: 46px;

  display: flex !important;
  align-items: center;
  justify-content: center;

  background: #0A66C2;
  color: #ffffff;

  border-radius: 50%;

  text-decoration: none !important;

  font-size: 22px;
  line-height: 1;

  opacity: 0;
  visibility: hidden;

  transform: scale(0.7);

  pointer-events: none;

  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease;

  z-index: 9999;
}

/* Click/tap ke baad icon show */
.doctor-photo-click.linkedin-active .doctor-linkedin {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  pointer-events: auto;
}

/* Desktop hover */
@media (hover: hover) and (pointer: fine) {

  .doctor-photo-click:hover .doctor-linkedin {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    pointer-events: auto;
  }

}

/* LinkedIn icon hover */
.doctor-linkedin:hover {
  transform: scale(1.1) !important;
}

/* =========================================
   DOCTOR BADGE TEXT
   ========================================= */

.about-badge strong {
  display: block;
}

.about-badge medium {
  display: block;
  margin-top: 4px;
}

.about-badge span {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
}
.about-badge medium {
  display: block;
  margin-top: 4px;
  font-weight: 500;
}
/* =========================================
   DOCTOR PROFILE BUTTON
   ========================================= */

.doctor-profile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  margin-top: 12px;

  padding: 9px 15px;

  background: #153574;
  color: #ffffff;

  border-radius: 6px;

  font-size: 13px;
  font-weight: 700;

  text-decoration: none;

  transition: all 0.25s ease;
}

.doctor-profile-btn span {
  font-size: 16px;
  transition: transform 0.25s ease;
}

.doctor-profile-btn:hover {
  background: #f3262e;
  color: #ffffff;
  transform: translateY(-2px);
}

.doctor-profile-btn:hover span {
  transform: translateX(4px);
}
/* Doctor Profile Button */

.doctor-profile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 15px;
  background: #153574;
  color: #ffffff;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
}

.doctor-profile-btn span {
  font-size: 16px;
  transition: transform 0.25s ease;
}

.doctor-profile-btn:hover {
  background: #f3262e;
  color: #ffffff;
  transform: translateY(-2px);
}

.doctor-profile-btn:hover span {
  transform: translateX(4px);
}
/* SMALL DOCTOR BADGE */
.about-badge {
    padding: 12px 14px !important;
    width: fit-content !important;
    max-width: 210px !important;
}

.about-badge strong {
    font-size: 16px !important;
    line-height: 1.2 !important;
    display: block;
    margin-bottom: 4px !important;
}

.about-badge medium {
    display: block;
    font-size: 9px !important;
    line-height: 1.35 !important;
    margin-bottom: 2px !important;
}

.about-badge .doctor-profile-btn {
    font-size: 8px !important;
    padding: 6px 9px !important;
    margin-top: 5px !important;
}
@media (max-width: 768px) {
    .about-badge {
        padding: 8px 10px !important;
        max-width: 170px !important;
    }

    .about-badge strong {
        font-size: 13px !important;
    }

    .about-badge medium {
        font-size: 7px !important;
        line-height: 1.3 !important;
    }

    .about-badge .doctor-profile-btn {
        font-size: 7px !important;
        padding: 5px 7px !important;
    }
}
/* =======================================================
   PROFESSIONAL PET HEALTH HISTORY
   ======================================================= */

.pet-history-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.pet-history-modal.active {
  display: flex;
}

.pet-history-overlay {
  position: absolute;
  inset: 0;
  background: rgba(9, 24, 55, 0.72);
  backdrop-filter: blur(7px);
}

.pet-history-box {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 680px;
  max-height: 92vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 30px 90px rgba(8, 27, 60, 0.28);
  animation: petHistoryIn 0.25s ease;
}

@keyframes petHistoryIn {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* Close button */

.pet-history-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #effaf2;
  color: #153574;
  font-size: 17px;
  cursor: pointer;
  transition: 0.2s ease;
}

.pet-history-close:hover {
  background: #153574;
  color: #ffffff;
  transform: rotate(90deg);
}


/* Header */

.pet-history-header {
  text-align: center;
  padding: 4px 40px 26px;
}

.pet-history-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 13px;
  border-radius: 50%;
  background: #eef8f1;
  color: #1f9d55;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
}

.pet-history-kicker {
  display: block;
  margin-bottom: 6px;
  color: #1f9d55;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.pet-history-header h2 {
  margin: 0 0 8px;
  color: #153574;
  font-family: 'Playfair Display', serif;
  font-size: 30px;
}

.pet-history-header p {
  max-width: 470px;
  margin: 0 auto;
  color: #68768a;
  font-size: 13px;
  line-height: 1.6;
}


/* Search box */

.pet-history-search {
  padding: 20px;
  border: 1px solid #e3e9f0;
  border-radius: 17px;
  background: #f8fafc;
}

.pet-history-search-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.pet-history-field label {
  display: block;
  margin-bottom: 7px;
  color: #253858;
  font-size: 13px;
  font-weight: 700;
}

.pet-history-input-wrap {
  position: relative;
}

.pet-history-input-wrap > i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #1f9d55;
  font-size: 14px;
}

.pet-history-input-wrap input {
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  padding: 0 14px 0 40px;
  border: 1px solid #d7dee8;
  border-radius: 10px;
  background: #ffffff;
  color: #253858;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  outline: none;
  transition: 0.2s ease;
}

.pet-history-input-wrap input:focus {
  border-color: #153574;
  box-shadow: 0 0 0 3px rgba(21, 53, 116, 0.08);
}


/* Search button */

.pet-history-search-btn {
  width: 100%;
  height: 50px;
  margin-top: 15px;
  border: 0;
  border-radius: 10px;
  background: #153574;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.25s ease;
}

.pet-history-search-btn:hover {
  background: #0e285b;
  transform: translateY(-1px);
}

.pet-history-search-btn.loading {
  opacity: 0.75;
  pointer-events: none;
}


/* Results */

.pet-history-results {
  margin-top: 22px;
}


/* Pet profile */

.pet-history-profile {
  padding: 20px;
  border: 1px solid #e1e8f0;
  border-radius: 17px;
  background: #ffffff;
  box-shadow: 0 8px 25px rgba(21, 53, 116, 0.06);
}

.pet-history-profile-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pet-history-avatar {
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 50%;
  background: #eef3fb;
  color: #153574;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.pet-history-profile h3 {
  margin: 0 0 3px;
  color: #153574;
  font-size: 20px;
}

.pet-history-profile-owner {
  margin: 0;
  color: #68768a;
  font-size: 13px;
}

.pet-history-profile-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 17px;
  padding-top: 16px;
  border-top: 1px solid #edf0f4;
}

.pet-history-info-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pet-history-info-label {
  color: #8a96a6;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pet-history-info-value {
  color: #253858;
  font-size: 13px;
  font-weight: 600;
}


/* Summary cards */

.pet-history-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.pet-history-stat {
  padding: 14px;
  border: 1px solid #e6ebf1;
  border-radius: 13px;
  background: #fafbfd;
  text-align: center;
}

.pet-history-stat-number {
  display: block;
  margin-bottom: 3px;
  color: #153574;
  font-size: 21px;
  font-weight: 800;
}

.pet-history-stat-label {
  color: #7b8797;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}


/* History heading */

.pet-history-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 25px 2px 11px;
}

.pet-history-section-title h3 {
  margin: 0;
  color: #153574;
  font-size: 17px;
}

.pet-history-section-title span {
  color: #8a96a6;
  font-size: 12px;
}


/* History cards */

.pet-history-record {
  position: relative;
  margin-bottom: 11px;
  padding: 17px;
  border: 1px solid #e3e9f0;
  border-radius: 15px;
  background: #ffffff;
  transition: 0.2s ease;
}

.pet-history-record:hover {
  border-color: #cfd9e6;
  box-shadow: 0 8px 22px rgba(21, 53, 116, 0.06);
  transform: translateY(-1px);
}

.pet-history-record-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.pet-history-record-type {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pet-history-record-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pet-history-record-icon.vaccination {
  background: #edf3ff;
  color: #153574;
}

.pet-history-record-icon.deworming {
  background: #effaf3;
  color: #1f9d55;
}

.pet-history-record-title {
  margin: 0 0 3px;
  color: #253858;
  font-size: 14px;
  font-weight: 800;
}

.pet-history-record-subtitle {
  margin: 0;
  color: #8792a1;
  font-size: 11px;
}


/* Status */

.pet-history-status {
  padding: 6px 9px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.pet-history-status.sent {
  background: #eaf8ef;
  color: #168348;
}

.pet-history-status.pending {
  background: #fff6df;
  color: #9a6a00;
}


/* Record details */

.pet-history-record-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid #edf0f4;
}

.pet-history-detail {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pet-history-detail-label {
  color: #929dab;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.pet-history-detail-value {
  color: #33445f;
  font-size: 12px;
  font-weight: 700;
}


/* Empty / error */

.pet-history-message {
  padding: 25px 18px;
  border-radius: 15px;
  text-align: center;
  border: 1px solid #e5e9ef;
  background: #fafbfd;
}

.pet-history-message-icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: #f1f4f8;
  color: #7a8798;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pet-history-message h3 {
  margin: 0 0 5px;
  color: #253858;
  font-size: 15px;
}

.pet-history-message p {
  margin: 0;
  color: #7b8797;
  font-size: 12px;
  line-height: 1.5;
}


/* Mobile */

@media (max-width: 600px) {

  .pet-history-modal {
    padding: 10px;
  }

  .pet-history-box {
    max-height: 94vh;
    padding: 22px 16px;
    border-radius: 20px;
  }

  .pet-history-header {
    padding: 5px 28px 20px;
  }

  .pet-history-header h2 {
    font-size: 25px;
  }

  .pet-history-search {
    padding: 15px;
  }

  .pet-history-search-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .pet-history-summary {
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
  }

  .pet-history-stat {
    padding: 11px 5px;
  }

  .pet-history-stat-number {
    font-size: 18px;
  }

  .pet-history-stat-label {
    font-size: 8px;
  }

  .pet-history-record-top {
    align-items: flex-start;
  }

  .pet-history-status {
    font-size: 9px;
    padding: 5px 7px;
  }

  .pet-history-record-details {
    grid-template-columns: 1fr 1fr;
  }
}