/* ================================================================
   RENACIDO PHARMACY — PREMIUM CSS v12 (Enhanced Edition)
   Luxury medical aesthetic: deep navy + teal + gold accents
   Fonts: Syne (display) + Plus Jakarta Sans (body)
   ================================================================ */

:root {
  --gold: #d4a852;
  --gold-light: #f0c97a;
  --navy: #0a1628;
  --grad-main: linear-gradient(135deg, #1e40af 0%, #0d9488 100%);
  --grad-gold: linear-gradient(135deg, #d4a852 0%, #f0c97a 50%, #a07830 100%);
  --shadow-card: 0 4px 24px rgba(30,64,175,.08), 0 1px 4px rgba(0,0,0,.05);
  --shadow-card-hover: 0 20px 56px rgba(30,64,175,.16), 0 6px 16px rgba(0,0,0,.08);
  --radius-card: 1.25rem;
  --transition: all .28s cubic-bezier(.4,0,.2,1);
}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 7px; height: 7px }
::-webkit-scrollbar-track { background: #f1f5f9 }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#1e40af,#0d9488); border-radius: 99px }
::-webkit-scrollbar-thumb:hover { background: #1d4ed8 }
::selection { background: #1e40af; color: #fff }
:focus-visible { outline: 2.5px solid #2563eb; outline-offset: 3px; border-radius: .375rem }

/* ── Gradient text ──────────────────────────────────────────── */
.gradient-text { background: linear-gradient(135deg,#1e40af,#0d9488); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700 }
.gradient-text-warm { background: linear-gradient(135deg,#d97706,#dc2626); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700 }
.gradient-text-gold { background: linear-gradient(135deg,#d4a852,#f0c97a,#a07830); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700 }
.gradient-text-purple { background: linear-gradient(135deg,#7c3aed,#4f46e5); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700 }

/* ── Glass UI ───────────────────────────────────────────────── */
.glass-input { width: 100%; background: rgba(255,255,255,.65)!important; border: 1.5px solid rgba(30,64,175,.22)!important; border-radius: .875rem; padding: .9rem 1.05rem; font-size: .95rem; color: #0f172a!important; transition: var(--transition); backdrop-filter: blur(8px) }
.glass-input:focus { background: rgba(255,255,255,.95)!important; border-color: rgba(30,64,175,.55)!important; box-shadow: 0 0 0 3.5px rgba(30,64,175,.12)!important; outline: none }
.glass-input::placeholder { color: #94a3b8 }
.glass-container { background: rgba(255,255,255,.78); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.35); border-radius: 1.5rem; padding: 2.5rem; box-shadow: 0 12px 48px rgba(30,64,175,.13),0 4px 16px rgba(0,0,0,.06) }

/* ═══════════════════════════════════════════════════
   HERO — Cinematic full viewport with grain texture
═══════════════════════════════════════════════════ */
.rp-hero { position: relative; min-height: min(92vh,680px); display: flex; align-items: center; overflow: hidden; background: #0a1628 }
.rp-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.06); transition: transform 9s ease-out; will-change: transform }
.rp-hero:hover .rp-hero-bg { transform: scale(1.0) }
.rp-hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(6,13,31,.9) 0%, rgba(10,22,60,.8) 45%, rgba(13,148,136,.3) 100%); z-index: 1 }
.rp-hero-body { position: relative; z-index: 2; padding: 4rem 0 3.5rem; display: flex; flex-direction: column; align-items: center; text-align: center }

.rp-hero-pill {
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(255,255,255,.1); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.2); border-radius: 99px;
  padding: .45rem 1.25rem .45rem .8rem; font-size: .775rem; font-weight: 700;
  color: rgba(255,255,255,.92); letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 1.75rem; animation: fadeDown .6s .1s both;
  position: relative; overflow: hidden
}
.rp-hero-pill::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  animation: shimmer 3.5s ease-in-out infinite
}
@keyframes shimmer { 0%{left:-100%} 60%{left:120%} 100%{left:120%} }

.rp-hero-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg,#34d399,#10b981); box-shadow: 0 0 0 2px rgba(52,211,153,.3); animation: heroPulse 2.2s infinite; flex-shrink: 0 }
@keyframes heroPulse { 0%,100%{box-shadow:0 0 0 2px rgba(52,211,153,.3)} 50%{box-shadow:0 0 0 7px rgba(52,211,153,.08)} }

.rp-hero-h1 { font-family: 'Syne',sans-serif; font-size: clamp(2.4rem,5.5vw,4rem); font-weight: 900; color: #fff; line-height: 1.1; letter-spacing: -.04em; margin: 0 auto 1.35rem; max-width: 760px; text-align: center; animation: fadeUp .7s .2s both; text-shadow: 0 2px 30px rgba(0,0,0,.3) }
.rp-hero-accent { background: linear-gradient(135deg,#38bdf8 0%,#34d399 60%,#a3e635 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text }
.rp-hero-sub { font-size: clamp(.95rem,1.8vw,1.2rem); color: rgba(255,255,255,.76); line-height: 1.78; margin: 0 auto 2.25rem; max-width: 560px; text-align: center; animation: fadeUp .7s .35s both }
.rp-hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-bottom: 2.75rem; animation: fadeUp .7s .45s both }

.rp-hbtn { display: inline-flex; align-items: center; gap: .6rem; padding: .875rem 2rem; font-size: 1rem; font-weight: 800; border-radius: .875rem; border: 2px solid transparent; text-decoration: none; transition: var(--transition); line-height: 1; white-space: nowrap; cursor: pointer; font-family: inherit }
.rp-hbtn-primary { background: linear-gradient(135deg,#2563eb 0%,#0d9488 100%); color: #fff!important; border-color: transparent; box-shadow: 0 6px 32px rgba(37,99,235,.55) }
.rp-hbtn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(37,99,235,.7); color: #fff!important }
.rp-hbtn-ghost { background: rgba(255,255,255,.12); color: #fff!important; border-color: rgba(255,255,255,.32); backdrop-filter: blur(10px) }
.rp-hbtn-ghost:hover { background: rgba(255,255,255,.24); transform: translateY(-3px); color: #fff!important }
.rp-hbtn-purple { background: linear-gradient(135deg,#7c3aed 0%,#4f46e5 100%); color: #fff!important; border-color: transparent; box-shadow: 0 6px 32px rgba(124,58,237,.48) }
.rp-hbtn-purple:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(124,58,237,.68); color: #fff!important }

.rp-hero-stats { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; animation: fadeUp .7s .6s both }
.rp-hstat { display: flex; flex-direction: column; align-items: center; gap: .25rem; background: rgba(255,255,255,.08); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.14); border-radius: 1rem; padding: 1rem 1.25rem; min-width: 108px; text-align: center; transition: var(--transition) }
.rp-hstat:hover { background: rgba(255,255,255,.16); transform: translateY(-3px); border-color: rgba(255,255,255,.24) }
.rp-hstat-ico { font-size: 1.5rem; line-height: 1; margin-bottom: .15rem }
.rp-hstat-val { color: #fff; font-family: 'Syne',sans-serif; font-size: 1.5rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums }
.rp-hstat-lbl { color: rgba(255,255,255,.55); font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap }

@keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeDown { from{opacity:0;transform:translateY(-18px)} to{opacity:1;transform:translateY(0)} }

/* ═══════════════════════════════════════════════════
   TRUST BAR
═══════════════════════════════════════════════════ */
.rp-trustbar { background: linear-gradient(90deg,#0d1e3d 0%,#0f766e 50%,#0d1e3d 100%); padding: .9rem 0; overflow: hidden }
.rp-trustbar-inner { display: flex; align-items: center; justify-content: center; gap: 2.5rem; flex-wrap: wrap }
.rp-trust-item { display: flex; align-items: center; gap: .55rem; color: rgba(255,255,255,.9); font-size: .8125rem; font-weight: 700; white-space: nowrap }
.rp-trust-item span:first-child { font-size: 1.1rem }

/* ═══════════════════════════════════════════════════
   SECTIONS
═══════════════════════════════════════════════════ */
.rp-section { padding: clamp(3.5rem,7vw,6rem) 0 }
.rp-section-sm { padding: clamp(1.75rem,4vw,3rem) 0 }
.rp-bg-white { background: #f8fafc }
.rp-bg-dark { background: #0f172a }
.rp-img-section { position: relative; overflow: hidden }
.rp-img-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; opacity: .45 }
.rp-img-overlay { position: absolute; inset: 0; z-index: 1 }
.rp-img-section > .container { position: relative; z-index: 2 }

.section-title { text-align: center; margin-bottom: clamp(2rem,4.5vw,3.5rem) }
.section-title .badge { margin-bottom: .875rem; display: inline-block }
.section-title h2 { margin-bottom: .875rem; color: #0f172a; font-family: 'Syne',sans-serif; position: relative; display: inline-block }
.section-title h2::after { content: ''; display: block; width: 56px; height: 3px; background: linear-gradient(90deg,#1e40af,#0d9488); border-radius: 2px; margin: .875rem auto 0 }
.section-title p { color: #64748b; font-size: 1.0625rem; max-width: 580px; margin-inline: auto; line-height: 1.78 }

/* ═══════════════════════════════════════════════════
   BADGES
═══════════════════════════════════════════════════ */
.badge { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .875rem; font-size: .75rem; font-weight: 800; border-radius: 99px; border: 1.5px solid transparent; letter-spacing: .02em; line-height: 1.4 }
.badge-blue   { background: #eff6ff; color: #1d4ed8!important; border-color: #bfdbfe }
.badge-teal   { background: #f0fdfa; color: #0f766e!important; border-color: #99f6e4 }
.badge-green  { background: #f0fdf4; color: #15803d!important; border-color: #bbf7d0 }
.badge-amber  { background: #fffbeb; color: #92400e!important; border-color: #fde68a }
.badge-red    { background: #fef2f2; color: #b91c1c!important; border-color: #fecaca }
.badge-purple { background: #f5f3ff; color: #6d28d9!important; border-color: #ddd6fe }
.badge-gold   { background: linear-gradient(135deg,#fffbf0,#fef3c7); color: #92400e!important; border-color: #fcd34d }

/* ═══════════════════════════════════════════════════
   CARDS — Premium system
═══════════════════════════════════════════════════ */
.card { background: #fff; border: 1.5px solid #e2e8f0; border-radius: var(--radius-card); overflow: hidden; transition: var(--transition); box-shadow: var(--shadow-card) }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); border-color: #bfdbfe }
.card-body { padding: 1.625rem }
.card-title { font-size: 1.075rem; font-weight: 800; margin-bottom: .5rem; color: #0f172a!important; line-height: 1.35; font-family: 'Syne',sans-serif }
.card-text { color: #64748b!important; font-size: .9375rem; line-height: 1.75 }

/* Product cards */
.product-card { background: #fff; border: 1.5px solid #e2e8f0; border-radius: var(--radius-card); overflow: hidden; transition: var(--transition); box-shadow: var(--shadow-card); display: flex; flex-direction: column; position: relative }
.product-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-card-hover); border-color: #93c5fd }
.product-image { position: relative; overflow: hidden; aspect-ratio: 4/3; background: linear-gradient(135deg,#f0f9ff,#f0fdfa) }
.product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.4,0,.2,1) }
.product-card:hover .product-image img { transform: scale(1.08) }
.product-image::after { content: '🔍 Quick View'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(30,64,175,.55); backdrop-filter: blur(4px); color: #fff; font-size: .8125rem; font-weight: 800; letter-spacing: .04em; opacity: 0; transition: opacity .28s; text-transform: uppercase }
.product-card:hover .product-image::after { opacity: 1 }
.product-info { padding: 1.125rem; flex: 1; display: flex; flex-direction: column }
.product-category { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #0d9488!important; margin-bottom: .35rem }
.product-name { font-size: 1rem; font-weight: 800; color: #0f172a!important; margin-bottom: .35rem; line-height: 1.35; font-family: 'Syne',sans-serif }
.product-description { font-size: .8125rem; color: #64748b!important; line-height: 1.65; margin-bottom: .875rem; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.product-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap }
.product-price { font-size: 1.15rem; font-weight: 900; color: #1d4ed8!important; font-variant-numeric: tabular-nums }
.product-badge { position: absolute; top: .625rem; left: .625rem; z-index: 2; display: flex; flex-direction: column; gap: .3rem }
.badge-low-stock { background: #fffbeb; color: #92400e; border-color: #fde68a; font-size: .64rem; padding: .2rem .55rem }
.badge-out       { background: #fef2f2; color: #b91c1c; border-color: #fecaca; font-size: .64rem; padding: .2rem .55rem }
.badge-rx        { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; font-size: .64rem; padding: .2rem .55rem }
.badge-new       { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; font-size: .64rem; padding: .2rem .55rem }
.add-to-cart-btn { flex-shrink: 0; padding: .5rem .95rem; font-size: .8125rem; font-weight: 800; border-radius: .75rem; background: linear-gradient(135deg,#1d4ed8,#0d9488); color: #fff!important; border: none; cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; line-height: 1; box-shadow: 0 4px 16px rgba(29,78,216,.3) }
.add-to-cart-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(29,78,216,.5); color: #fff!important }
.add-to-cart-btn:active { transform: scale(.95) }

/* Category cards */
.rp-cats-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill,minmax(min(130px,100%),1fr)) }
.rp-cat-card { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 1.375rem .875rem; background: #fff; border: 1.5px solid #e2e8f0; border-radius: var(--radius-card); text-decoration: none; transition: var(--transition); box-shadow: var(--shadow-card); text-align: center }
.rp-cat-card:hover { transform: translateY(-6px); border-color: #93c5fd; box-shadow: var(--shadow-card-hover); background: linear-gradient(135deg,#eff6ff,#f0fdfa) }
.rp-cat-ico { font-size: 2rem; line-height: 1; transition: transform .3s cubic-bezier(.34,1.56,.64,1) }
.rp-cat-card:hover .rp-cat-ico { transform: scale(1.22) rotate(-6deg) }
.rp-cat-lbl { font-size: .72rem; font-weight: 800; color: #374151!important; line-height: 1.3; text-align: center }

/* Feature cards */
.feature-card { background: #fff; border: 1.5px solid #e2e8f0; border-radius: var(--radius-card); padding: 2rem 1.75rem; transition: var(--transition); box-shadow: var(--shadow-card); position: relative; overflow: hidden }
.feature-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-main); transform: scaleX(0); transform-origin: left; transition: transform .35s ease }
.feature-card:hover::after { transform: scaleX(1) }
.feature-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-card-hover); border-color: #bfdbfe }
.feature-card h4 { margin-bottom: .625rem; color: #0f172a; font-size: 1.0625rem; font-family: 'Syne',sans-serif }
.feature-card p { color: #64748b; font-size: .9375rem; line-height: 1.75; margin: 0 }

/* Stats */
.rp-stats-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill,minmax(min(200px,100%),1fr)) }
.rp-stat-card { border-radius: var(--radius-card); padding: 2rem 1.75rem; text-align: center; border: 1px solid rgba(255,255,255,.1); transition: var(--transition); box-shadow: 0 4px 20px rgba(0,0,0,.2); position: relative; overflow: hidden }
.rp-stat-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.32) }
.rp-stat-ico { font-size: 2.5rem; margin-bottom: .75rem; line-height: 1; filter: drop-shadow(0 2px 10px rgba(0,0,0,.2)) }
.rp-stat { font-size: clamp(1.875rem,4vw,2.75rem); font-weight: 900; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.03em; font-family: 'Syne',sans-serif }
.rp-stat-lbl { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-top: .4rem; opacity: .68 }

/* ═══════════════════════════════════════════════════
   AI CHAT WIDGET
═══════════════════════════════════════════════════ */
.rp-aichat-box { background: rgba(255,255,255,.07); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.14); border-radius: 1.25rem; padding: 1.125rem; min-height: 200px; max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; scroll-behavior: smooth }
.rp-aichat-msg { padding: .75rem 1.125rem; border-radius: 1rem; font-size: .875rem; line-height: 1.65; max-width: 88% }
.rp-aichat-msg-bot { background: rgba(255,255,255,.13); color: #fff; border-bottom-left-radius: .25rem; align-self: flex-start; border-left: 3px solid rgba(56,189,248,.5) }
.rp-aichat-msg-user { background: linear-gradient(135deg,#2563eb,#0d9488); color: #fff; border-bottom-right-radius: .25rem; align-self: flex-end; box-shadow: 0 4px 16px rgba(37,99,235,.4) }
.rp-aichat-msg-loading { background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); align-self: flex-start; font-style: italic; font-size: .8125rem }
.rp-aichat-pills { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .875rem }
.rp-aichat-pill { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 99px; padding: .35rem 1rem; font-size: .75rem; font-weight: 700; color: rgba(255,255,255,.88); cursor: pointer; white-space: nowrap; transition: var(--transition); font-family: inherit }
.rp-aichat-pill:hover { background: rgba(255,255,255,.24); color: #fff; transform: translateY(-2px) }
.rp-aichat-row { display: flex; gap: .625rem; align-items: center }
.rp-aichat-input { flex: 1; background: rgba(255,255,255,.1); color: #fff!important; border: 1.5px solid rgba(255,255,255,.2); border-radius: .875rem; padding: .75rem 1.125rem; font-size: .9rem; font-family: inherit; transition: border-color .2s; min-width: 0 }
.rp-aichat-input::placeholder { color: rgba(255,255,255,.42) }
.rp-aichat-input:focus { outline: none; border-color: rgba(251,191,36,.7); background: rgba(255,255,255,.16) }
.rp-aichat-send { padding: .75rem 1.5rem; background: linear-gradient(135deg,#fbbf24,#f59e0b); color: #1e3a8a!important; font-weight: 800; border: none; border-radius: .875rem; cursor: pointer; font-size: .9rem; font-family: inherit; white-space: nowrap; transition: var(--transition); box-shadow: 0 4px 18px rgba(251,191,36,.45) }
.rp-aichat-send:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(251,191,36,.7); color: #1e3a8a!important }

/* ═══════════════════════════════════════════════════
   SHOP PAGE
═══════════════════════════════════════════════════ */
.rp-shop-wrap { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: start }
.rp-filters { background: #fff; border: 1.5px solid #e2e8f0; border-radius: var(--radius-card); padding: 1.625rem; box-shadow: var(--shadow-card); position: sticky; top: 88px }
.rp-filter-title { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #374151; margin-bottom: 1rem; padding-bottom: .625rem; border-bottom: 2px solid #f1f5f9 }
.rp-filter-item { display: flex; align-items: center; justify-content: space-between; padding: .5rem .75rem; border-radius: .75rem; cursor: pointer; font-size: .875rem; font-weight: 600; color: #374151; text-decoration: none; transition: var(--transition); margin-bottom: .2rem }
.rp-filter-item:hover { background: #eff6ff; color: #1d4ed8 }
.rp-filter-item.active { background: linear-gradient(135deg,#1d4ed8,#0d9488); color: #fff!important; font-weight: 700; box-shadow: 0 4px 16px rgba(29,78,216,.28) }
.rp-filter-count { font-size: .72rem; font-weight: 700; background: #f1f5f9; color: #64748b; border-radius: 99px; padding: .1rem .5rem; min-width: 22px; text-align: center }
.rp-filter-item.active .rp-filter-count { background: rgba(255,255,255,.25); color: #fff }

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: .4rem; flex-wrap: wrap; margin-top: 2.75rem }
.page-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: .75rem; font-size: .875rem; font-weight: 700; border: 1.5px solid #e2e8f0; background: #fff; color: #374151; cursor: pointer; text-decoration: none; transition: var(--transition); font-family: inherit }
.page-btn:hover { border-color: #93c5fd; color: #1d4ed8; background: #eff6ff }
.page-btn.active { background: linear-gradient(135deg,#1d4ed8,#0d9488); border-color: transparent; color: #fff!important; box-shadow: 0 4px 18px rgba(29,78,216,.38) }
.page-btn:disabled { opacity: .4; cursor: not-allowed }

/* ═══════════════════════════════════════════════════
   CONSULTATION CARDS
═══════════════════════════════════════════════════ */
.svc-card { background: #fff; border: 1.5px solid #e2e8f0; border-radius: var(--radius-card); overflow: hidden; transition: var(--transition); box-shadow: var(--shadow-card); display: flex; flex-direction: column }
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); border-color: #bfdbfe }
.svc-card-header { background: linear-gradient(135deg,#eff6ff,#f0fdfa); padding: 1.625rem; display: flex; align-items: center; gap: 1.125rem; border-bottom: 1px solid #e2e8f0 }
.svc-card-icon { width: 60px; height: 60px; border-radius: 1.125rem; background: linear-gradient(135deg,#1d4ed8,#0d9488); display: flex; align-items: center; justify-content: center; font-size: 1.875rem; flex-shrink: 0; box-shadow: 0 6px 20px rgba(29,78,216,.32) }
.svc-card-name { font-size: 1.075rem; font-weight: 800; color: #0f172a; line-height: 1.3; font-family: 'Syne',sans-serif }
.svc-card-desc { font-size: .875rem; color: #64748b; line-height: 1.65; margin-top: .3rem }
.svc-card-footer { padding: 1.375rem 1.625rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .875rem; border-top: 1px solid #f1f5f9; margin-top: auto }
.svc-card-price { font-size: 1.25rem; font-weight: 900; color: #1d4ed8 }
.svc-card-price.free { color: #059669 }
.svc-card-duration { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; color: #64748b; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 99px; padding: .28rem .75rem }

/* ═══════════════════════════════════════════════════
   USER DASHBOARD
═══════════════════════════════════════════════════ */
.ud-layout { display: grid; grid-template-columns: 250px 1fr; gap: 1.75rem; align-items: start; max-width: 1200px; margin: 0 auto }
.ud-sidebar { background: #fff; border: 1.5px solid #e2e8f0; border-radius: var(--radius-card); padding: 1.375rem; box-shadow: var(--shadow-card); position: sticky; top: 88px; overflow: hidden }
.ud-sidebar::before { content: ''; display: block; height: 4px; background: var(--grad-main); margin: -1.375rem -1.375rem 1.375rem }
.ud-nav-item { display: flex; align-items: center; gap: .75rem; padding: .65rem .9rem; border-radius: .875rem; font-weight: 600; font-size: .9rem; color: #374151; text-decoration: none; transition: var(--transition); margin-bottom: .3rem }
.ud-nav-item:hover { background: #eff6ff; color: #1d4ed8 }
.ud-nav-item.active { background: linear-gradient(135deg,#1d4ed8,#0d9488); color: #fff!important; font-weight: 700; box-shadow: 0 4px 14px rgba(29,78,216,.28) }
.ud-nav-ico { font-size: 1.125rem; width: 22px; text-align: center; flex-shrink: 0 }
.ud-stat { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 1.125rem; padding: 1.125rem 1.375rem; box-shadow: var(--shadow-card); transition: var(--transition) }
.ud-stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: #bfdbfe }
.ud-main-grid { display: grid; grid-template-columns: 1fr 320px; gap: 1.375rem; align-items: start }

/* ═══════════════════════════════════════════════════
   STATUS BADGES
═══════════════════════════════════════════════════ */
.status-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .875rem; font-size: .72rem; font-weight: 800; border-radius: 99px; border: 1.5px solid; letter-spacing: .02em }
.status-pending    { background: #fffbeb; color: #92400e; border-color: #fde68a }
.status-confirmed  { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe }
.status-processing { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe }
.status-shipped    { background: #f0fdf4; color: #15803d; border-color: #bbf7d0 }
.status-completed  { background: #f0fdf4; color: #059669; border-color: #a7f3d0 }
.status-cancelled  { background: #fef2f2; color: #b91c1c; border-color: #fecaca }
.status-approved   { background: #f0fdf4; color: #059669; border-color: #a7f3d0 }
.status-rejected   { background: #fef2f2; color: #b91c1c; border-color: #fecaca }
.status-verified   { background: #ecfdf5; color: #047857; border-color: #6ee7b7 }
.status-paid       { background: #f0fdf4; color: #15803d; border-color: #bbf7d0 }
.status-requested  { background: #fef3c7; color: #92400e; border-color: #fde68a }
.status-open       { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe }
.status-resolved   { background: #f0fdf4; color: #059669; border-color: #a7f3d0 }

/* ═══════════════════════════════════════════════════
   FORMS
═══════════════════════════════════════════════════ */
.form-group { margin-bottom: 1.375rem }
.form-label { display: block; font-size: .875rem; font-weight: 700; color: #374151!important; margin-bottom: .5rem }
.form-control { display: block; width: 100%; padding: .85rem 1.125rem; background: #fff; border: 1.5px solid #d1d5db; border-radius: .875rem; font-size: .9375rem; color: #0f172a!important; font-family: inherit; line-height: 1.5; transition: border-color .22s,box-shadow .22s }
.form-control:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,.1) }
.form-control::placeholder { color: #94a3b8 }
.form-control:disabled,.form-control[readonly] { background: #f8fafc; color: #64748b!important; cursor: not-allowed }
textarea.form-control { resize: vertical; min-height: 108px }
.input-group { position: relative }
.input-group-icon { position: absolute; left: 1.125rem; top: 50%; transform: translateY(-50%); font-size: 1rem; pointer-events: none; z-index: 1 }
.input-group .form-control { padding-left: 3rem }

/* Alerts */
.alert { display: flex; align-items: flex-start; gap: .875rem; padding: 1rem 1.25rem; border-radius: 1rem; border: 1.5px solid; margin-bottom: 1.375rem; font-size: .9125rem; line-height: 1.65 }
.alert-success { background: #f0fdf4; color: #15803d!important; border-color: #bbf7d0 }
.alert-error   { background: #fef2f2; color: #b91c1c!important; border-color: #fecaca }
.alert-warning { background: #fffbeb; color: #92400e!important; border-color: #fde68a }
.alert-info    { background: #eff6ff; color: #1e40af!important; border-color: #bfdbfe }

/* ═══════════════════════════════════════════════════
   TABLES
═══════════════════════════════════════════════════ */
.table { width: 100%; border-collapse: collapse; font-size: .875rem }
.table th { padding: .875rem 1.125rem; text-align: left; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #374151!important; background: #f8fafc; border-bottom: 2px solid #e2e8f0; white-space: nowrap }
.table td { padding: .875rem 1.125rem; color: #475569!important; border-bottom: 1px solid #f1f5f9; vertical-align: middle; transition: background .15s }
.table tr:hover td { background: #fafbff }
.table tr:last-child td { border-bottom: none }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-card); border: 1.5px solid #e2e8f0; box-shadow: var(--shadow-card) }

/* ═══════════════════════════════════════════════════
   BUTTONS — special variants
═══════════════════════════════════════════════════ */
.btn-whatsapp { background: linear-gradient(135deg,#25D366,#128C7E); color: #fff!important; border-color: transparent; box-shadow: 0 4px 18px rgba(37,211,102,.38) }
.btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(37,211,102,.6); color: #fff!important }

/* ═══════════════════════════════════════════════════
   ABOUT PAGE STATS
═══════════════════════════════════════════════════ */
.about-hero-stats { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem }
.about-stat-card { background: rgba(255,255,255,.14); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.2); border-radius: 1rem; padding: 1rem 1.375rem; min-width: 120px; text-align: center; transition: var(--transition) }
.about-stat-card:hover { background: rgba(255,255,255,.26); transform: translateY(-3px) }
.about-stat-val { font-size: 1.625rem; font-weight: 900; color: #fff; line-height: 1.1; display: block; font-family: 'Syne',sans-serif }
.about-stat-lbl { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.6); margin-top: .25rem; display: block }

/* ═══════════════════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1) }
.reveal-left { opacity: 0; transform: translateX(-36px); transition: opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1) }
.reveal-right { opacity: 0; transform: translateX(36px); transition: opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1) }
.reveal-scale { opacity: 0; transform: scale(.92); transition: opacity .65s cubic-bezier(.4,0,.2,1),transform .65s cubic-bezier(.4,0,.2,1) }
.revealed { opacity: 1!important; transform: none!important }
@media(prefers-reduced-motion:reduce) { .reveal,.reveal-left,.reveal-right,.reveal-scale { transition: none!important; opacity: 1; transform: none } }

/* ═══════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════ */
.rp-toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(24px); padding: .875rem 1.75rem; border-radius: 1rem; font-size: .9rem; font-weight: 700; z-index: 99999; box-shadow: 0 12px 40px rgba(0,0,0,.22); pointer-events: none; opacity: 0; transition: all .32s cubic-bezier(.4,0,.2,1); white-space: nowrap; max-width: calc(100vw - 2.5rem); text-align: center; display: flex; align-items: center; gap: .625rem }
.rp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0) }
.rp-toast.success { background: linear-gradient(135deg,#059669,#0d9488); color: #fff }
.rp-toast.error   { background: linear-gradient(135deg,#dc2626,#ef4444); color: #fff }
.rp-toast.info    { background: linear-gradient(135deg,#1d4ed8,#2563eb); color: #fff }

/* ═══════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════ */
.rp-fgrid { display: grid; gap: 3rem; grid-template-columns: 1.6fr 1fr 1fr 1.3fr }

/* ═══════════════════════════════════════════════════
   BLOG CARDS
═══════════════════════════════════════════════════ */
.blog-card { background: #fff; border: 1.5px solid #e2e8f0; border-radius: var(--radius-card); overflow: hidden; transition: var(--transition); box-shadow: var(--shadow-card); display: flex; flex-direction: column }
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); border-color: #bfdbfe }
.blog-card-img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform .45s cubic-bezier(.4,0,.2,1) }
.blog-card:hover .blog-card-img { transform: scale(1.05) }
.blog-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column }
.blog-card-tag { margin-bottom: .75rem }
.blog-card-title { font-size: 1.075rem; font-weight: 800; color: #0f172a; line-height: 1.38; margin-bottom: .625rem; font-family: 'Syne',sans-serif }
.blog-card-excerpt { color: #64748b; font-size: .9rem; line-height: 1.75; flex: 1; margin-bottom: 1.125rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.blog-card-meta { display: flex; align-items: center; gap: .875rem; font-size: .78rem; color: #94a3b8; flex-wrap: wrap; margin-top: auto }

/* ═══════════════════════════════════════════════════
   TESTIMONIAL CARDS
═══════════════════════════════════════════════════ */
.testi-card { background: #fff; border: 1.5px solid #e2e8f0; border-radius: var(--radius-card); padding: 1.75rem; box-shadow: var(--shadow-card); transition: var(--transition); position: relative; overflow: hidden }
.testi-card::before { content: '\201C'; position: absolute; top: -1rem; right: 1.25rem; font-size: 8rem; font-family: Georgia,serif; color: #eff6ff; line-height: 1; pointer-events: none }
.testi-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); border-color: #bfdbfe }
.testi-stars { display: flex; gap: .2rem; margin-bottom: 1rem }
.testi-star { color: #f59e0b; font-size: 1.05rem }
.testi-text { color: #374151; font-size: .9375rem; line-height: 1.8; margin-bottom: 1.25rem; font-style: italic; position: relative; z-index: 1 }
.testi-author { display: flex; align-items: center; gap: .875rem }
.testi-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg,#1d4ed8,#0d9488); display: flex; align-items: center; justify-content: center; font-weight: 900; color: #fff; font-size: 1.1rem; box-shadow: 0 4px 14px rgba(29,78,216,.28) }
.testi-name { font-weight: 800; font-size: .9375rem; color: #0f172a }
.testi-location { font-size: .78rem; color: #94a3b8; margin-top: .15rem }

/* ═══════════════════════════════════════════════════
   EMPTY STATE + UTILITIES
═══════════════════════════════════════════════════ */
.empty-state { text-align: center; padding: 4rem 2rem; display: flex; flex-direction: column; align-items: center; gap: 1.125rem }
.empty-state-icon { font-size: 4rem; line-height: 1; opacity: .65 }
.empty-state h3 { color: #0f172a; margin: 0 }
.empty-state p { color: #64748b; margin: 0; font-size: .9375rem; max-width: 380px }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid rgba(29,78,216,.2); border-top-color: #2563eb; animation: spin .7s linear infinite; display: inline-block }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes rpFP { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.skeleton { background: linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%); background-size: 200% 100%; animation: skeleton-shine 1.6s infinite; border-radius: .625rem }
@keyframes skeleton-shine { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.hover-lift { transition: transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s }
.hover-lift:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.12) }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.popular-tag { position: absolute; top: -.5rem; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg,#f59e0b,#d97706); color: #fff; font-size: .72rem; font-weight: 800; padding: .25rem 1rem; border-radius: 99px; white-space: nowrap; letter-spacing: .04em; box-shadow: 0 4px 14px rgba(245,158,11,.45); z-index: 3 }
.notif-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,.25); animation: notifPulse 2s ease-in-out infinite }
@keyframes notifPulse { 0%,100%{box-shadow:0 0 0 2px rgba(239,68,68,.25)} 50%{box-shadow:0 0 0 5px rgba(239,68,68,.1)} }
.rp-divider-gradient { height: 3px; background: linear-gradient(90deg,#1e40af,#0d9488,#38bdf8,#0d9488,#1e40af); background-size: 200% 100%; animation: gradientShift 4s linear infinite }
@keyframes gradientShift { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

/* Cart item rows */
.ci-row { display: flex; gap: 1rem; align-items: flex-start; padding: 1.125rem 0; border-bottom: 1px solid #f1f5f9 }
.ci-row:last-child { border-bottom: none }
.ci-row img { width: 68px; height: 68px; object-fit: cover; border-radius: .875rem; border: 1.5px solid #e2e8f0; flex-shrink: 0 }
.ci-info { flex: 1; min-width: 0 }
.ci-cat { font-size: .67rem; font-weight: 800; color: #0d9488; text-transform: uppercase; letter-spacing: .05em }
.ci-name { font-size: .9375rem; font-weight: 800; color: #0f172a; margin: .2rem 0 .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ci-unit { font-size: .8rem; color: #64748b }
.ci-right { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; flex-shrink: 0 }
.ci-sub { font-weight: 900; color: #1e40af; font-size: .95rem; white-space: nowrap }
.ci-stepper { display: flex; align-items: center; background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: .625rem; overflow: hidden }
.ci-step { width: 30px; height: 30px; border: none; background: none; cursor: pointer; font-size: 1rem; font-weight: 700; color: #374151; transition: background .15s; line-height: 1; display: flex; align-items: center; justify-content: center }
.ci-step:hover { background: #e2e8f0 }
.ci-step:disabled { opacity: .35; cursor: not-allowed }
.ci-qinp { width: 34px; text-align: center; font-size: .85rem; font-weight: 700; color: #0f172a; border: none; background: transparent; -moz-appearance: textfield; padding: 0 }
.ci-qinp::-webkit-outer-spin-button,.ci-qinp::-webkit-inner-spin-button { -webkit-appearance: none }
.ci-remove { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: .75rem; font-weight: 600; padding: .15rem; transition: color .15s; font-family: inherit }
.ci-remove:hover { color: #ef4444 }
.ci-summary-card { background: linear-gradient(135deg,#f8fafc,#eff6ff); border: 1.5px solid #e2e8f0; border-radius: var(--radius-card); padding: 1.625rem; box-shadow: var(--shadow-card) }
.ci-sumline { display: flex; justify-content: space-between; align-items: center; font-size: .875rem; padding: .4rem 0; color: #475569 }

/* ═══════════════════════════════════════════════════
   GLOBAL VISIBILITY FIXES
═══════════════════════════════════════════════════ */
body { background: #fff }
.rp-bg-white h1,.rp-bg-white h2,.rp-bg-white h3,.rp-bg-white h4 { color: #0f172a }
.rp-bg-white p,.rp-bg-white li { color: #64748b }
.product-name { color: #0f172a!important }
.product-price { color: #1d4ed8!important; font-weight: 900!important }
.product-category { color: #0d9488!important }
.product-description { color: #64748b!important }
.card-title { color: #0f172a!important }
.card-text { color: #64748b!important }
.btn-primary { color: #fff!important }
.btn-secondary { color: #fff!important }
.btn-white { color: #1d4ed8!important; background: #fff!important }
.btn-white:hover { color: #1e3a8a!important }
.btn-outline { color: #1d4ed8!important; background: #fff; border-color: #bfdbfe }
.btn-outline:hover { background: #eff6ff!important; color: #1e40af!important }
.btn-ghost { color: #1d4ed8!important }
.btn-ghost:hover { background: #eff6ff }
.form-label { color: #374151!important }
.form-control { color: #0f172a!important; border-color: #d1d5db; background: #fff }
.form-control:focus { border-color: #2563eb!important }
.form-control::placeholder { color: #94a3b8 }
.table th { color: #374151!important }
.table td { color: #475569!important }
.section-title h2 { color: #0f172a }
.section-title p { color: #64748b }
img { max-width: 100%; height: auto }
.product-image img { width: 100%; height: 100%; object-fit: cover }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */
@media(max-width:1200px) { .rp-shop-wrap{grid-template-columns:220px 1fr} .rp-fgrid{grid-template-columns:1fr 1fr} .ud-layout{grid-template-columns:1fr} }
@media(max-width:1024px) { .rp-shop-wrap{grid-template-columns:1fr} .rp-filters{position:static;display:none} .rp-filters.mobile-open{display:block} .ud-main-grid{grid-template-columns:1fr!important} }
@media(max-width:860px) { .rp-hero-stats{gap:.875rem} .rp-hstat{min-width:90px;padding:.75rem 1rem} .rp-hero-ctas{gap:.75rem} .rp-hbtn{padding:.8rem 1.7rem;font-size:.95rem} .rp-fgrid{grid-template-columns:1fr 1fr;gap:2.25rem} .ud-layout{grid-template-columns:1fr} .ud-sidebar{position:static;top:unset} }
@media(max-width:760px) { .ud-main-grid{grid-template-columns:1fr!important} }
@media(max-width:640px) { .rp-fgrid{grid-template-columns:1fr!important} .rp-stats-grid{grid-template-columns:repeat(2,1fr)} .svc-card-footer{flex-direction:column;align-items:flex-start} }
@media(max-width:600px) { .rp-hero-h1{font-size:clamp(1.9rem,8vw,2.6rem)} .rp-hero-ctas{flex-direction:column;align-items:center} .rp-hbtn{width:min(100%,340px);justify-content:center} .rp-hero-stats{gap:.625rem} .rp-hstat{min-width:80px} .rp-cats-grid{grid-template-columns:repeat(3,1fr)} .rp-trustbar-inner{gap:1.5rem} .about-hero-stats{gap:.625rem} .about-stat-card{min-width:92px;padding:.75rem 1rem} .testi-card{padding:1.25rem} .blog-card-img{height:180px} .rp-aichat-box{min-height:150px;max-height:210px} }
@media(max-width:480px) { .rp-stats-grid{grid-template-columns:1fr 1fr} .rp-cats-grid{grid-template-columns:repeat(2,1fr)} .pagination{gap:.3rem} .page-btn{width:36px;height:36px;font-size:.8125rem} .glass-container{padding:1.875rem 1.375rem} .svc-card-icon{width:50px;height:50px;font-size:1.5625rem} }
@media(min-width:481px) and (max-width:760px) { .products-grid{grid-template-columns:repeat(2,1fr)!important} .rp-stats-grid{grid-template-columns:repeat(2,1fr)} }
@media print { .rp-nav,.rp-topbar,footer,.rp-float-wrap,.rp-float-panel,.btn{display:none!important} body{background:#fff!important;color:#000!important} .card,.product-card{box-shadow:none!important;border:1px solid #ccc!important} }