/* ============================================================
   MAXKIND Pet Healthcare — Main Stylesheet
   ============================================================ */

:root {
  --green:      #1a7a2e;
  --green-dark: #145f24;
  --green-light:#e8f5e9;
  --purple:     #7c3aed;
  --orange:     #ea580c;
  --blue:       #2563eb;
  --pink:       #db2777;
  --teal:       #0891b2;
  --text:       #1e293b;
  --text-muted: #64748b;
  --border:     #e2e8f0;
  --bg-soft:    #f8fafc;
  --white:      #ffffff;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow-md:  0 4px 20px rgba(0,0,0,.10);
  --shadow-lg:  0 8px 40px rgba(0,0,0,.12);
  --radius:     12px;
  --radius-lg:  20px;
  --transition: .25s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
}

h1,h2,h3,.display-font { font-family: 'Playfair Display', serif; }

a { color: inherit; text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--green); }

img { max-width: 100%; height: auto; }

/* ─── Top Bar ─── */
.topbar {
  background: var(--green-dark);
  color: rgba(255,255,255,.88);
  font-size:.8rem;
  padding:.35rem 0;
}
.topbar .tagline-text { font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:.7rem; }
.topbar a { color:rgba(255,255,255,.9); }
.topbar a:hover { color:#fff; }

/* ─── Navbar ─── */
.main-navbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
  padding: .5rem 0;
  z-index: 1030;
}
.main-navbar.scrolled { box-shadow: var(--shadow-md); }
.main-navbar .nav-link {
  font-weight: 500;
  color: var(--text);
  font-size: .9rem;
  padding: .45rem .85rem;
  border-radius: 8px;
  transition: background var(--transition), color var(--transition);
}
.main-navbar .nav-link:hover,
.main-navbar .nav-link.active {
  background: var(--green-light);
  color: var(--green);
}
.btn-inquire {
  background: var(--green) !important;
  color: #fff !important;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: .85rem;
  padding: .45rem 1.1rem;
  transition: background var(--transition);
}
.btn-inquire:hover { background: var(--green-dark) !important; }

/* ─── Search ─── */
.search-wrapper { position: relative; }
.search-input {
  width: 220px;
  border-radius: 30px;
  border: 1.5px solid var(--border);
  padding: .4rem 2.6rem .4rem 1rem;
  font-size: .85rem;
  transition: border var(--transition);
}
.search-input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(26,122,46,.12); }
.btn-voice {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  padding: .25rem; border-radius: 50%; transition: color var(--transition);
}
.btn-voice:hover { color: var(--green); }
.btn-voice.listening { color: var(--green); animation: pulse-green 1s infinite; }

@keyframes pulse-green { 0%,100%{opacity:1}50%{opacity:.5} }

.search-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md); z-index: 999; max-height: 300px; overflow-y: auto;
}
.search-dropdown .sd-item {
  display: flex; align-items: center; gap: 10px; padding: .65rem 1rem;
  cursor: pointer; transition: background var(--transition); font-size: .875rem;
}
.search-dropdown .sd-item:hover { background: var(--green-light); }
.search-dropdown .sd-item img { width:40px; height:40px; object-fit:cover; border-radius:6px; }

/* ─── Voice Overlay ─── */
.voice-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 9999; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.voice-modal {
  background: #fff; border-radius: 20px; padding: 2.5rem 3rem;
  text-align: center; box-shadow: var(--shadow-lg);
}
.voice-mic-anim { position: relative; display: inline-flex; align-items:center; justify-content:center; width:90px; height:90px; }
.mic-ring {
  position: absolute; border-radius: 50%; border: 2px solid var(--green);
  animation: ripple 1.6s infinite;
}
.r1 { width:90px; height:90px; animation-delay:0s; }
.r2 { width:66px; height:66px; animation-delay:.3s; }
.r3 { width:44px; height:44px; animation-delay:.6s; }
.mic-icon { font-size:1.8rem; color:var(--green); position:relative; z-index:1; }
@keyframes ripple { 0%{opacity:1;transform:scale(.8)} 100%{opacity:0;transform:scale(1.4)} }
.voice-status { font-weight: 600; font-size: 1.1rem; color: var(--green); }

/* ─── Hero Slider ─── */
.hero-carousel .carousel-item { height: 88vh; min-height: 520px; }
.hero-carousel .carousel-item img { width:100%; height:100%; object-fit:cover; filter:brightness(.55); }
.hero-carousel .carousel-caption {
  bottom: auto; top: 50%; transform: translateY(-50%);
  text-align: left; left: 8%; right: auto; max-width: 560px;
}
.hero-badge {
  display: inline-block; background: var(--green); color:#fff;
  font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:.3rem .9rem; border-radius:30px; margin-bottom:1rem;
}
.hero-carousel h1 {
  font-size: clamp(2.2rem,5vw,4rem);
  font-weight: 700; line-height:1.1; margin-bottom:.9rem;
}
.hero-carousel p { font-size:1.05rem; opacity:.9; margin-bottom:1.5rem; }
.btn-hero-primary {
  background:var(--green); color:#fff; border:none;
  padding:.7rem 1.8rem; border-radius:30px; font-weight:600;
  transition: background var(--transition);
}
.btn-hero-primary:hover { background:var(--green-dark); color:#fff; }
.btn-hero-outline {
  background:transparent; color:#fff; border:2px solid rgba(255,255,255,.7);
  padding:.7rem 1.8rem; border-radius:30px; font-weight:600;
  transition: background var(--transition), color var(--transition);
}
.btn-hero-outline:hover { background:#fff; color:var(--green); }

/* ─── Section Headings ─── */
.section-tag {
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--green); margin-bottom:.5rem;
}
.section-title { font-size:clamp(1.6rem,3vw,2.4rem); font-weight:700; color:var(--text); }
.section-subtitle { color:var(--text-muted); font-size:1rem; max-width:540px; margin:0 auto; }

/* ─── Stats ─── */
.stats-section { background:var(--green); padding:4rem 0; }
.stat-card { text-align:center; color:#fff; }
.stat-number { font-size:2.8rem; font-weight:800; font-family:'Playfair Display',serif; }
.stat-label { font-size:.85rem; opacity:.85; text-transform:uppercase; letter-spacing:.08em; margin-top:.2rem; }

/* ─── Product Cards ─── */
.product-card {
  background:#fff; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform var(--transition),box-shadow var(--transition);
  border:1px solid var(--border);
}
.product-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.product-card .card-img-wrap {
  position:relative; overflow:hidden; height:220px; background:var(--bg-soft);
}
.product-card .card-img-wrap img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.product-card:hover .card-img-wrap img { transform:scale(1.06); }
.product-badge {
  position:absolute; top:.75rem; left:.75rem;
  background:var(--green); color:#fff;
  font-size:.65rem; font-weight:700; padding:.25rem .6rem;
  border-radius:30px; text-transform:uppercase; letter-spacing:.06em;
}
.product-badge.badge-new    { background:var(--blue); }
.product-badge.badge-vet    { background:var(--purple); }
.product-badge.badge-puppy  { background:var(--pink); }
.product-badge.badge-best   { background:var(--orange); }
.product-card .card-body { padding:1.25rem; }
.product-card .cat-tag {
  font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--green); margin-bottom:.4rem;
}
.product-card h5 { font-size:1.05rem; font-weight:700; margin-bottom:.4rem; color:var(--text); }
.product-card p  { font-size:.82rem; color:var(--text-muted); margin-bottom:1rem; line-height:1.5; }
.product-card .card-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.btn-view  { background:var(--green-light); color:var(--green); border:none; font-weight:600; font-size:.8rem; border-radius:8px; padding:.4rem .9rem; }
.btn-view:hover { background:var(--green); color:#fff; }
.btn-inq   { background:var(--green); color:#fff; border:none; font-weight:600; font-size:.8rem; border-radius:8px; padding:.4rem .9rem; }
.btn-inq:hover { background:var(--green-dark); color:#fff; }

/* ─── Category Cards ─── */
.cat-card {
  border-radius:var(--radius-lg); padding:2rem 1.5rem; text-align:center;
  background:#fff; border:1px solid var(--border);
  box-shadow:var(--shadow-sm); transition:transform var(--transition),box-shadow var(--transition);
  cursor:pointer; display:block;
}
.cat-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.cat-icon {
  width:64px; height:64px; border-radius:16px; display:inline-flex;
  align-items:center; justify-content:center; font-size:1.6rem;
  margin-bottom:1rem;
}
.cat-card h6 { font-weight:700; font-size:.95rem; margin-bottom:.3rem; }
.cat-card p  { font-size:.78rem; color:var(--text-muted); margin:0; }
.cat-count   { display:inline-block; font-size:.7rem; background:var(--green-light); color:var(--green); padding:.1rem .5rem; border-radius:30px; font-weight:600; margin-top:.4rem; }

/* ─── Testimonials ─── */
.testimonial-card {
  background:#fff; border-radius:var(--radius-lg); padding:1.75rem;
  box-shadow:var(--shadow-sm); border:1px solid var(--border);
}
.testimonial-card .reviewer-img { width:52px; height:52px; border-radius:50%; object-fit:cover; }
.testimonial-card .review-text { font-size:.9rem; color:var(--text-muted); line-height:1.7; font-style:italic; }
.quote-icon { color:var(--green); font-size:2rem; opacity:.2; line-height:1; }

/* ─── Blog Cards ─── */
.blog-card {
  border-radius:var(--radius-lg); overflow:hidden; background:#fff;
  box-shadow:var(--shadow-sm); border:1px solid var(--border);
  transition:transform var(--transition),box-shadow var(--transition);
}
.blog-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.blog-card .blog-img { height:200px; width:100%; object-fit:cover; }
.blog-card .card-body { padding:1.25rem; }
.blog-cat-tag { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--green); }
.blog-card h5 { font-size:1rem; font-weight:700; margin:.4rem 0 .5rem; }
.blog-meta { font-size:.75rem; color:var(--text-muted); display:flex; gap:.8rem; flex-wrap:wrap; }
.blog-card .excerpt { font-size:.82rem; color:var(--text-muted); line-height:1.6; margin-top:.5rem; }

/* ─── Why Choose MAXKIND ─── */
.why-card {
  display:flex; align-items:flex-start; gap:1rem; padding:1.5rem;
  border-radius:var(--radius); border:1px solid var(--border);
  transition:box-shadow var(--transition); background:#fff;
}
.why-card:hover { box-shadow:var(--shadow-md); }
.why-icon {
  width:48px; height:48px; min-width:48px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
}
.why-card h6 { font-weight:700; margin-bottom:.3rem; font-size:.95rem; }
.why-card p  { font-size:.82rem; color:var(--text-muted); margin:0; }

/* ─── Dealer CTA ─── */
.dealer-cta {
  background:linear-gradient(135deg,var(--green-dark) 0%,var(--green) 100%);
  color:#fff; border-radius:var(--radius-lg); padding:3.5rem 2.5rem;
}
.dealer-cta h2 { font-size:clamp(1.5rem,3vw,2.2rem); margin-bottom:1rem; }

/* ─── Contact Section ─── */
.contact-info-card { background:#fff; border-radius:var(--radius-lg); padding:2rem; box-shadow:var(--shadow-sm); border:1px solid var(--border); }
.contact-info-item { display:flex; gap:1rem; align-items:flex-start; padding:1rem 0; border-bottom:1px solid var(--border); }
.contact-info-item:last-child { border-bottom:none; }
.contact-icon { width:40px; height:40px; min-width:40px; border-radius:10px; background:var(--green-light); color:var(--green); display:flex; align-items:center; justify-content:center; }

/* ─── Form Cards ─── */
.form-card { background:#fff; border-radius:var(--radius-lg); padding:2rem; box-shadow:var(--shadow-sm); border:1px solid var(--border); }
.form-control, .form-select {
  border-radius:10px; border:1.5px solid var(--border); padding:.55rem .9rem;
  font-size:.88rem; transition:border var(--transition);
}
.form-control:focus, .form-select:focus {
  border-color:var(--green); box-shadow:0 0 0 3px rgba(26,122,46,.1); outline:none;
}
.btn-submit {
  background:var(--green); color:#fff; border:none; border-radius:10px;
  font-weight:700; padding:.65rem 1.8rem; transition:background var(--transition);
}
.btn-submit:hover { background:var(--green-dark); color:#fff; }

/* ─── Breadcrumb ─── */
.page-hero { background:linear-gradient(135deg,var(--green-dark),var(--green)); padding:3.5rem 0 2.5rem; color:#fff; }
.page-hero h1 { font-size:clamp(1.8rem,3.5vw,2.8rem); margin-bottom:.5rem; }
.breadcrumb { background:none; padding:0; margin:0; }
.breadcrumb-item { color:rgba(255,255,255,.75); font-size:.85rem; }
.breadcrumb-item.active { color:#fff; }
.breadcrumb-item+.breadcrumb-item::before { color:rgba(255,255,255,.5); }
.breadcrumb-item a { color:rgba(255,255,255,.8); }
.breadcrumb-item a:hover { color:#fff; }

/* ─── Product Detail ─── */
.product-gallery-main { border-radius:var(--radius-lg); overflow:hidden; height:420px; background:var(--bg-soft); }
.product-gallery-main img { width:100%; height:100%; object-fit:cover; }
.benefit-item { display:flex; align-items:flex-start; gap:.6rem; padding:.5rem 0; }
.benefit-item i { color:var(--green); margin-top:.15rem; font-size:.85rem; }
.benefit-item span { font-size:.9rem; color:var(--text-muted); }
.accordion-button:not(.collapsed) { background:var(--green-light); color:var(--green); box-shadow:none; }
.accordion-button:focus { box-shadow:none; }

/* ─── Glassmorphism Section ─── */
.glass-section {
  background:linear-gradient(135deg,rgba(26,122,46,.06),rgba(37,99,235,.06));
  backdrop-filter:blur(6px); border-radius:var(--radius-lg);
  padding:3rem 2rem; border:1px solid rgba(26,122,46,.1);
}

/* ─── About Page ─── */
.mission-card { background:var(--green-light); border-radius:var(--radius-lg); padding:2rem; }
.value-card { background:#fff; border-radius:var(--radius); padding:1.5rem; border:1px solid var(--border); text-align:center; }
.value-icon { font-size:2rem; margin-bottom:.75rem; }

/* ─── Admin ─── */
.admin-sidebar { width:260px; min-height:100vh; background:var(--green-dark); color:#fff; position:fixed; top:0; left:0; overflow-y:auto; z-index:100; }
.admin-sidebar .sidebar-brand { padding:1.25rem 1.5rem; border-bottom:1px solid rgba(255,255,255,.1); }
.admin-sidebar .nav-link { color:rgba(255,255,255,.82); padding:.65rem 1.5rem; border-radius:0; font-size:.875rem; display:flex; align-items:center; gap:.7rem; }
.admin-sidebar .nav-link:hover,.admin-sidebar .nav-link.active { background:rgba(255,255,255,.12); color:#fff; }
.admin-main { margin-left:260px; padding:0; }
.admin-topbar { background:#fff; border-bottom:1px solid var(--border); padding:.75rem 1.5rem; display:flex; justify-content:space-between; align-items:center; }
.admin-content { padding:1.5rem; background:var(--bg-soft); min-height:calc(100vh - 60px); }
.stat-box { background:#fff; border-radius:var(--radius); padding:1.25rem 1.5rem; box-shadow:var(--shadow-sm); border:1px solid var(--border); }
.stat-box .stat-box-val { font-size:2rem; font-weight:800; }
.badge-new-inq { background:var(--green); color:#fff; font-size:.65rem; border-radius:30px; padding:.15rem .5rem; }
.table th { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); background:var(--bg-soft); }

/* ─── Floating WhatsApp ─── */
.whatsapp-float {
  position:fixed; bottom:1.5rem; right:1.5rem; width:52px; height:52px;
  border-radius:50%; background:#25D366; color:#fff; font-size:1.6rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(37,211,102,.5); z-index:9000;
  animation:wa-bounce 2s infinite;
  transition:transform var(--transition);
}
.whatsapp-float:hover { transform:scale(1.1); color:#fff; }
@keyframes wa-bounce { 0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)} }

/* ─── Filter Tabs ─── */
.filter-tabs { display:flex; gap:.5rem; flex-wrap:wrap; }
.filter-tab { background:#fff; border:1.5px solid var(--border); border-radius:30px; padding:.35rem 1rem; font-size:.82rem; font-weight:600; cursor:pointer; transition:all var(--transition); color:var(--text); }
.filter-tab:hover,.filter-tab.active { background:var(--green); border-color:var(--green); color:#fff; }

/* ─── Map Placeholder ─── */
.map-placeholder { background:var(--bg-soft); border-radius:var(--radius-lg); height:320px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); }

/* ─── Responsive ─── */
@media (max-width:991px) {
  .hero-carousel .carousel-item { height:70vw; min-height:350px; }
  .admin-sidebar { width:100%; min-height:auto; position:static; }
  .admin-main { margin-left:0; }
}
@media (max-width:767px) {
  .hero-carousel .carousel-caption { left:5%; max-width:90%; }
  .hero-carousel h1 { font-size:1.8rem; }
  .product-gallery-main { height:260px; }
}

/* ─── Utilities ─── */
.section-pad { padding:5rem 0; }
.section-pad-sm { padding:3rem 0; }
.bg-soft { background:var(--bg-soft); }
.text-green { color:var(--green) !important; }
.bg-green { background:var(--green) !important; }
.rounded-xl { border-radius:var(--radius-lg) !important; }
.shadow-card { box-shadow:var(--shadow-md); }