/* ================================================================
   MEDKINGS PHARMACY — iOS LIQUID GLASS DESIGN SYSTEM v3
   Light, airy, frosted-glass aesthetic
   Inspired by iOS 18 liquid glass — translucent, luminous, alive
================================================================ */

:root {
  /* Glass tokens */
  --gl-ease:    cubic-bezier(.4,0,.2,1);
  --gl-spring:  cubic-bezier(.34,1.56,.64,1);
  --glass-bg:   rgba(255,255,255,.72);
  --glass-border: rgba(255,255,255,.85);
  --glass-shadow: 0 8px 32px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.9) inset;
  --glass-blur:   blur(24px) saturate(180%);

  /* Brand */
  --mk-primary:  #059669;
  --mk-primary2: #047857;
  --mk-blue:     #1e40af;
  --mk-gold:     #f59e0b;

  /* Page background — soft gradient mesh */
  --page-bg: linear-gradient(135deg, #f0fdf9 0%, #eff6ff 35%, #f8faff 65%, #ecfdf5 100%);
}

/* ── BODY BACKGROUND (mesh gradient + subtle pattern) ── */
body {
  background: var(--page-bg) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%,   rgba(5,150,105,.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%,  rgba(30,64,175,.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 20%,   rgba(245,158,11,.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}
main { position: relative; z-index: 1; }

/* ══ NAV BAR — frosted glass ══ */
.rp-nav {
  background: rgba(255,255,255,.75) !important;
  backdrop-filter: blur(32px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
  border-bottom: 1px solid rgba(255,255,255,.88) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 4px 24px rgba(5,150,105,.06) !important;
}
.rp-nav.rp-scrolled {
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 8px 32px rgba(5,150,105,.1) !important;
}

/* ══ BUTTONS ══ */
.btn-primary, .rp-hbtn-primary, .mk-hbtn-primary {
  background: linear-gradient(160deg, #059669 0%, #047857 100%) !important;
  border: 1.5px solid rgba(255,255,255,.45) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 4px 20px rgba(5,150,105,.32) !important;
  color: #fff !important;
}
.btn-primary:hover, .rp-hbtn-primary:hover, .mk-hbtn-primary:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 8px 28px rgba(5,150,105,.45) !important;
  transform: translateY(-2px) !important;
  color: #fff !important;
}

/* ══ GLASS CARDS (sections, feature cards) ══ */
.mk-pcard, .mk-why-card, .mk-step, .mk-blog-card, .mk-testi-card,
.card, .product-card, .blog-card, .feature-card, .testi-card {
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,.9) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 8px 32px rgba(0,0,0,.06) !important;
}
.mk-pcard:hover, .mk-why-card:hover, .mk-step:hover, .mk-blog-card:hover, .mk-testi-card:hover,
.card:hover, .product-card:hover {
  background: rgba(255,255,255,.95) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 16px 48px rgba(5,150,105,.12) !important;
  border-color: rgba(5,150,105,.25) !important;
}

/* ══ SECTION BACKGROUNDS ══ */
.mk-section, section[class*="rp-section"] {
  background: transparent !important;
  position: relative;
}
.mk-section.glass-section, .rp-section.glass-section {
  background: rgba(255,255,255,.4) !important;
  backdrop-filter: blur(12px) !important;
}

/* ══ HERO ══ */
.mk-hero {
  background: linear-gradient(135deg, #0a1628 0%, #0d2b1a 60%, #061a10 100%) !important;
}
.mk-hero-card {
  background: rgba(255,255,255,.08) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 20px 60px rgba(0,0,0,.25) !important;
}

/* ══ STATS SECTION ══ */
.mk-stats-section {
  background: linear-gradient(135deg, #050e1a 0%, #061812 100%) !important;
}
.mk-stat-card {
  background: rgba(255,255,255,.05) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset !important;
}
.mk-stat-card:hover {
  background: rgba(16,185,129,.1) !important;
  border-color: rgba(16,185,129,.3) !important;
}

/* ══ AI SECTION ══ */
.mk-ai-section {
  background: linear-gradient(135deg, #030912 0%, #041410 100%) !important;
}
.mk-aichat {
  background: rgba(255,255,255,.04) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}

/* ══ DRAWERS & OVERLAYS ══ */
.rp-cdrawer {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(32px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
  border-left: 1px solid rgba(255,255,255,.9) !important;
}
.rp-dr {
  background: rgba(255,255,255,.95) !important;
  backdrop-filter: blur(32px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
}

/* ══ SEARCH OVERLAY ══ */
.rp-search-box {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(32px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
  border: 1px solid rgba(255,255,255,.9) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 32px 80px rgba(0,0,0,.2) !important;
}

/* ══ FLOAT AI PANEL ══ */
#rp-float-panel {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(32px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
  border: 1px solid rgba(255,255,255,.9) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 24px 64px rgba(0,0,0,.18) !important;
}

/* ══ TRUSTBAR ══ */
.mk-trustbar {
  background: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-top: 1px solid rgba(255,255,255,.8) !important;
  border-bottom: 1px solid rgba(255,255,255,.8) !important;
}
.mk-trust-item { color: #334155 !important; }
.mk-trust-item span:first-child { filter: none !important; }

/* ══ NEWSLETTER SECTION ══ */
.mk-nl-section {
  background: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* ══ SECTION BACKGROUNDS — lighten all dark sections ══ */
section[style*="background:#f8fafc"],
section[style*="background: #f8fafc"] {
  background: rgba(248,250,252,.7) !important;
}
section[style*="background:#fff"],
section[style*="background: #fff"] {
  background: rgba(255,255,255,.65) !important;
}

/* ══ PRODUCT CATEGORIES ══ */
.mk-cat {
  background: rgba(255,255,255,.75) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,.9) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
}
.mk-cat:hover {
  background: rgba(255,255,255,.95) !important;
  border-color: rgba(5,150,105,.2) !important;
  box-shadow: 0 8px 24px rgba(5,150,105,.1) !important;
}

/* ══ REVEAL ANIMATIONS ══ */
.reveal, .reveal-left, .reveal-right, .reveal-scale {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--gl-ease), transform .6s var(--gl-ease);
}
.reveal-left  { transform: translateX(-24px); }
.reveal-right { transform: translateX(24px); }
.reveal-scale { transform: scale(.96); }
.revealed {
  opacity: 1 !important;
  transform: none !important;
}

/* ══ SCROLL-TO-TOP ══ */
#rp-scroll-top {
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,.9) !important;
  color: #059669 !important;
  box-shadow: 0 4px 18px rgba(5,150,105,.2) !important;
}

/* ══ FLOAT BOT BUTTON ══ */
#rp-float-btn {
  background: linear-gradient(135deg, #059669, #047857) !important;
  border: 2px solid rgba(255,255,255,.35) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 8px 28px rgba(5,150,105,.45) !important;
}

/* ══ RESPONSIVE / MOBILE FIXES ══ */
@media (max-width: 768px) {
  /* Hero */
  .mk-hero { padding: 3rem 1rem 3rem; }
  .mk-hero > .container { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .mk-hero-card { display: none !important; }
  .mk-hero h1 { font-size: clamp(2rem,8vw,3.2rem) !important; }
  .mk-hero-stats { gap: 1.25rem !important; }

  /* Trust bar */
  .mk-trustbar-inner { animation-duration: 18s !important; }

  /* Products grid */
  .mk-pgrid { grid-template-columns: repeat(auto-fill,minmax(160px,1fr)) !important; gap: 1rem !important; }
  .mk-pcard-img { height: 150px !important; }

  /* Sections */
  .mk-sec { padding: 3rem 1rem !important; }
  .mk-sec-hd h2 { font-size: 1.6rem !important; }

  /* Why grid */
  .mk-why-grid { grid-template-columns: 1fr !important; }

  /* Steps */
  .mk-steps { grid-template-columns: 1fr !important; gap: 1rem !important; }

  /* Blog */
  .mk-blog-grid { grid-template-columns: 1fr !important; }

  /* Testimonials */
  .mk-testi-grid { grid-template-columns: 1fr !important; }

  /* Services */
  .mk-svc-grid { grid-template-columns: 1fr !important; }

  /* Stats */
  .mk-stats-grid { grid-template-columns: repeat(2,1fr) !important; }

  /* Cart drawer */
  .rp-cdrawer { width: 100vw !important; }

  /* Footer message widget */
  #mk-msg-panel { width: calc(100vw - 1rem) !important; right: .5rem !important; }
}

@media (max-width: 480px) {
  .mk-hero h1 { font-size: clamp(1.75rem,8vw,2.5rem) !important; }
  .mk-hero-btns { flex-direction: column !important; }
  .mk-hbtn { justify-content: center !important; }
  .mk-stats-grid { grid-template-columns: 1fr 1fr !important; }
  .mk-pgrid { grid-template-columns: 1fr 1fr !important; }
  .container { padding: 0 .875rem !important; }

  /* Message widget full width mobile */
  #mk-msg-wrap { bottom: .75rem !important; right: .75rem !important; }
}

/* ══ DESKTOP LARGE SCREENS ══ */
@media (min-width: 1400px) {
  .container { max-width: 1320px !important; }
}

/* ══ PRINT ══ */
@media print {
  .rp-nav, footer, #mk-msg-wrap, #mk-msg-panel { display: none !important; }
}