/* ================================================================
   RENACIDO PHARMACY — LIQUID GLASS v2
   Water-clear glass on buttons, nav, floating panels ONLY.
   Content cards, section backgrounds, images = NEVER blurred.
   ================================================================

   RULE: backdrop-filter only on elements that FLOAT ABOVE content:
     ✅ Nav bar (sticky, above everything)
     ✅ Buttons (opaque enough, specular top-edge only)
     ✅ Ghost buttons on hero (they ARE over an image)
     ✅ Drawers, overlays, toasts (float over page)
     ✅ Hero stat chips (float on hero image)
     ✅ Auth glass-container (on photo background)

   NEVER on:
     ❌ .card / .product-card / .feature-card
     ❌ Section backgrounds or inline-style divs
     ❌ Consultation cards, shop cards, any content tile
     ❌ Anything that could obscure a background image

   Glass effect = prismatic top edge + depth shadow.
   NOT = frosted-glass film over background images.
================================================================ */

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  --gl-ease: cubic-bezier(.4,0,.2,1);
  --gl-hi:   0 1px 0 rgba(255,255,255,.80) inset;
  --gl-hi2:  0 1px 0 rgba(255,255,255,.95) inset;
}

/* ══ 1. NAV BAR ════════════════════════════════════════════════ */
.rp-nav {
  background: rgba(252,253,255,.80) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: var(--gl-hi), 0 4px 24px rgba(30,64,175,.08) !important;
}
.rp-nav.rp-scrolled {
  background: rgba(250,252,255,.90) !important;
  box-shadow: var(--gl-hi2), 0 6px 32px rgba(30,64,175,.12) !important;
}

/* ══ 2. PRIMARY BUTTONS ════════════════════════════════════════ */
.btn-primary, .rp-hbtn-primary {
  background: linear-gradient(160deg, #2563eb 0%, #0d9488 100%) !important;
  border: 1.5px solid rgba(255,255,255,.42) !important;
  box-shadow: var(--gl-hi), 0 4px 20px rgba(37,99,235,.36) !important;
  color: #fff !important;
  position: relative; overflow: hidden;
  transition: all .22s var(--gl-ease) !important;
}
.btn-primary::before, .rp-hbtn-primary::before {
  content:''; position:absolute; top:0; left:0; right:0; height:46%;
  background: linear-gradient(180deg,rgba(255,255,255,.26),transparent);
  border-radius:inherit; pointer-events:none; z-index:1;
}
.btn-primary:hover, .rp-hbtn-primary:hover {
  background: linear-gradient(160deg, #1d4ed8 0%, #0f766e 100%) !important;
  box-shadow: var(--gl-hi2), 0 10px 36px rgba(37,99,235,.50) !important;
  transform: translateY(-2px) !important; color:#fff !important;
}
.btn-primary:active, .rp-hbtn-primary:active {
  transform: scale(.97) !important;
  box-shadow: var(--gl-hi), 0 2px 8px rgba(37,99,235,.28) !important;
}

/* ══ 3. SECONDARY BUTTONS ══════════════════════════════════════ */
.btn-secondary, .rp-hbtn-secondary {
  background: linear-gradient(160deg, #0d9488 0%, #1e40af 100%) !important;
  border: 1.5px solid rgba(255,255,255,.38) !important;
  box-shadow: var(--gl-hi), 0 4px 18px rgba(13,148,136,.32) !important;
  color: #fff !important;
  position: relative; overflow: hidden;
  transition: all .22s var(--gl-ease) !important;
}
.btn-secondary::before { content:''; position:absolute; top:0; left:0; right:0; height:46%;
  background:linear-gradient(180deg,rgba(255,255,255,.24),transparent);
  border-radius:inherit; pointer-events:none; z-index:1; }
.btn-secondary:hover {
  transform:translateY(-2px) !important;
  box-shadow: var(--gl-hi2), 0 10px 32px rgba(13,148,136,.46) !important;
  color:#fff !important;
}

/* ══ 4. OUTLINE BUTTONS ════════════════════════════════════════ */
.btn-outline {
  background: rgba(255,255,255,.78) !important;
  border: 1.5px solid rgba(37,99,235,.28) !important;
  box-shadow: var(--gl-hi), 0 2px 10px rgba(30,64,175,.06) !important;
  color: #1d4ed8 !important;
  transition: all .22s var(--gl-ease) !important;
}
.btn-outline:hover {
  background: #eff6ff !important;
  border-color: rgba(37,99,235,.55) !important;
  box-shadow: var(--gl-hi2), 0 6px 20px rgba(30,64,175,.14) !important;
  transform: translateY(-1px) !important; color:#1e40af !important;
}

/* ══ 5. GHOST BUTTONS (over hero image — blur is correct here) ═ */
.rp-hbtn-ghost {
  background: rgba(255,255,255,.14) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  border: 1.5px solid rgba(255,255,255,.46) !important;
  box-shadow: var(--gl-hi) !important;
  color: #fff !important;
  transition: all .22s var(--gl-ease) !important;
}
.rp-hbtn-ghost:hover {
  background: rgba(255,255,255,.26) !important;
  border-color: rgba(255,255,255,.68) !important;
  transform: translateY(-2px) !important; color:#fff !important;
}

/* ══ 6. WHITE BUTTONS ══════════════════════════════════════════ */
.btn-white {
  background: rgba(255,255,255,.90) !important;
  border: 1.5px solid rgba(255,255,255,.80) !important;
  box-shadow: var(--gl-hi2), 0 4px 16px rgba(0,0,0,.11) !important;
  color: #1e40af !important;
  transition: all .22s var(--gl-ease) !important;
}
.btn-white:hover {
  background: #fff !important;
  box-shadow: var(--gl-hi2), 0 8px 26px rgba(0,0,0,.17) !important;
  transform: translateY(-2px) !important; color:#1e3a8a !important;
}

/* ══ 7. WHATSAPP BUTTON ════════════════════════════════════════ */
.btn-whatsapp {
  background: linear-gradient(160deg, #25D366 0%, #128C7E 100%) !important;
  border: 1.5px solid rgba(255,255,255,.40) !important;
  box-shadow: var(--gl-hi), 0 4px 18px rgba(37,211,102,.32) !important;
  color: #fff !important;
  position: relative; overflow: hidden;
  transition: all .22s var(--gl-ease) !important;
}
.btn-whatsapp::before { content:''; position:absolute; top:0; left:0; right:0; height:46%;
  background:linear-gradient(180deg,rgba(255,255,255,.24),transparent);
  border-radius:inherit; pointer-events:none; z-index:1; }
.btn-whatsapp:hover { transform:translateY(-2px) !important;
  box-shadow: var(--gl-hi2), 0 10px 30px rgba(37,211,102,.48) !important; color:#fff !important; }

/* ══ 8. NAV PILLS (Register, Sign In, Admin) ═══════════════════ */
.rp-pu, .rp-preg {
  background: linear-gradient(160deg, #1e40af 0%, #0d9488 100%) !important;
  border: 1px solid rgba(255,255,255,.40) !important;
  box-shadow: var(--gl-hi), 0 3px 14px rgba(30,64,175,.28) !important;
  color: #fff !important;
  position: relative; overflow: hidden;
  transition: all .22s var(--gl-ease) !important;
}
.rp-pu::before, .rp-preg::before { content:''; position:absolute; top:0; left:0; right:0; height:46%;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent);
  border-radius:inherit; pointer-events:none; }
.rp-pu:hover, .rp-preg:hover { transform:translateY(-1px) !important;
  box-shadow: var(--gl-hi2), 0 8px 24px rgba(30,64,175,.44) !important; color:#fff !important; }

.rp-pa {
  background: linear-gradient(160deg, #4f46e5 0%, #7c3aed 100%) !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  box-shadow: var(--gl-hi), 0 3px 14px rgba(79,70,229,.28) !important;
  color: #fff !important;
  position: relative; overflow: hidden;
  transition: all .22s var(--gl-ease) !important;
}
.rp-pa::before { content:''; position:absolute; top:0; left:0; right:0; height:46%;
  background:linear-gradient(180deg,rgba(255,255,255,.20),transparent);
  border-radius:inherit; pointer-events:none; }
.rp-pa:hover { transform:translateY(-1px) !important;
  box-shadow: var(--gl-hi2), 0 8px 24px rgba(79,70,229,.44) !important; color:#fff !important; }

.rp-pin {
  background: rgba(255,255,255,.82) !important;
  border: 1.5px solid rgba(30,64,175,.22) !important;
  box-shadow: var(--gl-hi2), 0 2px 8px rgba(30,64,175,.07) !important;
  color: #1e40af !important;
  transition: all .22s var(--gl-ease) !important;
}
.rp-pin:hover { background: #eff6ff !important; border-color: rgba(30,64,175,.40) !important; color:#1e40af !important; }

/* ══ 9. CART BUTTON ════════════════════════════════════════════ */
.rp-cart {
  background: rgba(240,249,255,.90) !important;
  border: 1.5px solid rgba(186,230,253,.72) !important;
  box-shadow: var(--gl-hi2), 0 2px 10px rgba(3,105,161,.08) !important;
  transition: all .22s var(--gl-ease) !important;
}
.rp-cart:hover {
  background: rgba(224,242,254,.96) !important;
  border-color: rgba(125,211,252,.88) !important;
  box-shadow: var(--gl-hi2), 0 6px 20px rgba(3,105,161,.16) !important;
  transform: translateY(-1px) !important;
}

/* ══ 10. HERO STAT CHIPS ═══════════════════════════════════════ */
.rp-hstat {
  background: rgba(255,255,255,.15) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  box-shadow: var(--gl-hi) !important;
}

/* ══ 11. AUTH GLASS CONTAINER ══════════════════════════════════ */
.glass-container {
  background: rgba(255,255,255,.80) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,.70) !important;
  box-shadow: var(--gl-hi2), 0 24px 64px rgba(30,64,175,.15), 0 6px 20px rgba(0,0,0,.08) !important;
}

/* ══ 12. CART DRAWER ═══════════════════════════════════════════ */
.rp-cdrawer {
  background: rgba(250,252,255,.97) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  border-left: 1px solid rgba(255,255,255,.62) !important;
}
.rp-cd-checkout {
  background: linear-gradient(160deg, #1e40af 0%, #0d9488 100%) !important;
  border: 1.5px solid rgba(255,255,255,.36) !important;
  box-shadow: var(--gl-hi), 0 6px 24px rgba(30,64,175,.38) !important;
  position: relative; overflow: hidden; color: #fff !important;
}
.rp-cd-checkout::before { content:''; position:absolute; top:0; left:0; right:0; height:46%;
  background:linear-gradient(180deg,rgba(255,255,255,.20),transparent);pointer-events:none; }
.rp-cd-checkout:hover { transform:translateY(-1px) !important;
  box-shadow: var(--gl-hi2), 0 12px 36px rgba(30,64,175,.52) !important; color:#fff !important; }

/* ══ 13. MOBILE DRAWER ═════════════════════════════════════════ */
.rp-dr {
  background: rgba(250,252,255,.97) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  border-left: 1px solid rgba(255,255,255,.55) !important;
}

/* ══ 14. TOAST ═════════════════════════════════════════════════ */
#cartToast {
  background: linear-gradient(160deg, rgba(30,64,175,.94), rgba(13,148,136,.92)) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  box-shadow: var(--gl-hi), 0 12px 40px rgba(30,64,175,.36) !important;
  color: #fff !important;
}

/* ══ 15. SEARCH OVERLAY ════════════════════════════════════════ */
#rp-search-overlay {
  background: rgba(10,22,80,.52) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
#rp-search-overlay input {
  background: rgba(255,255,255,.96) !important;
  border: 1.5px solid rgba(255,255,255,.72) !important;
  box-shadow: var(--gl-hi2), 0 8px 32px rgba(0,0,0,.16) !important;
  color: #0f172a !important;
}

/* ══ 16. AI CHAT WIDGET ════════════════════════════════════════ */
.rp-aichat-box {
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(255,255,255,.75) !important;
  box-shadow: var(--gl-hi2), 0 16px 48px rgba(0,0,0,.20) !important;
}
.rp-aichat-pill {
  background: rgba(255,255,255,.16) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  box-shadow: var(--gl-hi) !important;
  color: rgba(255,255,255,.94) !important;
}
.rp-aichat-pill:hover {
  background: rgba(255,255,255,.28) !important; color:#fff !important;
}
.rp-aichat-input {
  background: rgba(255,255,255,.96) !important;
  border: 1.5px solid rgba(203,213,225,.50) !important;
  box-shadow: var(--gl-hi2) !important; color: #1e293b !important;
}
.rp-aichat-send {
  background: linear-gradient(160deg, #fbbf24 0%, #f59e0b 100%) !important;
  border: 1.5px solid rgba(255,255,255,.44) !important;
  box-shadow: var(--gl-hi), 0 4px 16px rgba(251,191,36,.44) !important;
  color: #1e293b !important;
  position: relative; overflow: hidden;
}
.rp-aichat-send::before { content:''; position:absolute; top:0; left:0; right:0; height:46%;
  background:linear-gradient(180deg,rgba(255,255,255,.28),transparent);pointer-events:none; }
.rp-aichat-send:hover { transform:translateY(-1px) !important;
  box-shadow: var(--gl-hi2), 0 8px 26px rgba(251,191,36,.58) !important; color:#1e293b !important; }

/* ══ 17. PRODUCT CARDS — pristine white, no blur ══════════════ */
.product-card {
  background: #fff !important;
  border: 1px solid rgba(226,232,240,.80) !important;
  box-shadow: var(--gl-hi), 0 2px 12px rgba(30,64,175,.05), 0 1px 3px rgba(0,0,0,.04) !important;
  transition: transform .28s var(--gl-ease), box-shadow .28s var(--gl-ease) !important;
}
.product-card:hover {
  border-color: rgba(191,219,254,.90) !important;
  box-shadow: var(--gl-hi2), 0 14px 42px rgba(30,64,175,.13), 0 4px 10px rgba(0,0,0,.06) !important;
  transform: translateY(-5px) !important;
}
.product-name        { color: #0f172a !important; }
.product-price       { color: #1d4ed8 !important; font-weight:900 !important; }
.product-category    { color: #0d9488 !important; }
.product-description { color: #475569 !important; }

/* ══ 18. GENERAL .card — clean, no blur ═══════════════════════ */
.card {
  background: #fff !important;
  border: 1px solid rgba(226,232,240,.75) !important;
  box-shadow: var(--gl-hi), 0 2px 14px rgba(30,64,175,.06) !important;
  transition: transform .26s var(--gl-ease), box-shadow .26s var(--gl-ease) !important;
}
.card:hover {
  border-color: rgba(191,219,254,.85) !important;
  box-shadow: var(--gl-hi2), 0 12px 36px rgba(30,64,175,.12) !important;
  transform: translateY(-4px) !important;
}
.card-title { color: #0f172a !important; }
.card-text  { color: #475569 !important; }

/* ══ 19. FEATURE CARDS ═════════════════════════════════════════ */
.feature-card {
  background: #fff !important;
  border: 1.5px solid rgba(226,232,240,.75) !important;
  box-shadow: var(--gl-hi), 0 2px 14px rgba(30,64,175,.06) !important;
  transition: transform .26s var(--gl-ease), box-shadow .26s var(--gl-ease) !important;
}
.feature-card:hover {
  border-color: rgba(191,219,254,.85) !important;
  box-shadow: var(--gl-hi2), 0 14px 40px rgba(30,64,175,.13) !important;
  transform: translateY(-5px) !important;
}

/* ══ 20. BADGES ════════════════════════════════════════════════ */
.badge-blue  { background: #eff6ff !important; color: #1d4ed8 !important; border-color: #bfdbfe !important; }
.badge-teal  { background: #f0fdfa !important; color: #0f766e !important; border-color: #99f6e4 !important; }
.badge-green { background: #f0fdf4 !important; color: #15803d !important; border-color: #bbf7d0 !important; }
.badge-amber { background: #fffbeb !important; color: #92400e !important; border-color: #fde68a !important; }
.badge-red   { background: #fef2f2 !important; color: #b91c1c !important; border-color: #fecaca !important; }

/* ══ 21. FORM INPUTS ═══════════════════════════════════════════ */
.form-control, .glass-input {
  background: rgba(255,255,255,.92) !important;
  border: 1.5px solid rgba(203,213,225,.65) !important;
  box-shadow: var(--gl-hi) !important;
  color: #0f172a !important;
  transition: all .20s var(--gl-ease) !important;
}
.form-control:focus, .glass-input:focus {
  background: #fff !important;
  border-color: rgba(37,99,235,.55) !important;
  box-shadow: var(--gl-hi2), 0 0 0 3px rgba(37,99,235,.11) !important;
  outline: none !important;
}
.form-control::placeholder, .glass-input::placeholder { color: #94a3b8 !important; }

/* ══ 22. PRODUCT BADGES ════════════════════════════════════════ */
.product-badge { box-shadow: var(--gl-hi) !important; }
.product-badge.low-stock    { background: #fff7ed !important; color: #c2410c !important; }
.product-badge.out-of-stock { background: #fef2f2 !important; color: #b91c1c !important; }

/* ══ 23. HERO STAT CARDS (dark sections) ══════════════════════ */
.rp-stat-card {
  background: rgba(255,255,255,.14) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow: var(--gl-hi), 0 6px 24px rgba(0,0,0,.14) !important;
}

/* ══ 24. SHIMMER on hover ══════════════════════════════════════ */
@keyframes glassShimmer {
  from { transform: translateX(-100%) skewX(-15deg); }
  to   { transform: translateX(300%) skewX(-15deg); }
}
.btn-primary::after, .rp-hbtn-primary::after,
.rp-pu::after, .rp-preg::after, .rp-pa::after {
  content:''; position:absolute; top:0; left:0; width:35%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  border-radius:inherit; pointer-events:none; opacity:0;
}
.btn-primary:hover::after, .rp-hbtn-primary:hover::after,
.rp-pu:hover::after, .rp-preg:hover::after, .rp-pa:hover::after {
  opacity:1; animation: glassShimmer .55s ease forwards;
}

/* ══ 25. SCROLLBAR ═════════════════════════════════════════════ */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(30,64,175,.62), rgba(13,148,136,.62)) !important;
  border: 2px solid rgba(255,255,255,.55) !important;
  box-shadow: var(--gl-hi) !important;
}

/* ══ 26. REDUCE MOTION ═════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .btn-primary::before, .btn-primary::after,
  .rp-hbtn-primary::before, .rp-hbtn-primary::after,
  .btn-secondary::before, .btn-whatsapp::before,
  .rp-pu::before, .rp-pu::after, .rp-preg::before, .rp-preg::after,
  .rp-pa::before, .rp-pa::after, .rp-cd-checkout::before,
  .rp-aichat-send::before { display:none !important; }
  * { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ══ 27. COLOUR SAFETY NET ═════════════════════════════════════ */
.btn-primary, .btn-primary *, .rp-hbtn-primary, .rp-hbtn-primary * { color:#fff !important; }
.btn-secondary, .btn-secondary *, .rp-hbtn-secondary, .rp-hbtn-secondary * { color:#fff !important; }
.btn-outline, .btn-outline *          { color:#1d4ed8 !important; }
.rp-hbtn-ghost, .rp-hbtn-ghost *     { color:#fff !important; }
.btn-white, .btn-white *              { color:#1e40af !important; }
.btn-whatsapp, .btn-whatsapp *        { color:#fff !important; }
.rp-pu, .rp-pu *, .rp-preg, .rp-preg * { color:#fff !important; }
.rp-pa, .rp-pa *                      { color:#fff !important; }
.rp-pin, .rp-pin *                    { color:#1e40af !important; }
.card-title  { color:#0f172a !important; }
.card-body p { color:#475569 !important; }
input, textarea, select               { color:#0f172a !important; }
input::placeholder, textarea::placeholder { color:#94a3b8 !important; opacity:1 !important; }