/* ===================================================
   NŪMIRA PEPTIDES — GLASSMORPHISM DESIGN UPGRADE
   Layered over style.css for premium dark-glass look
   =================================================== */

/* Google Font Override */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;

  /* Upgraded palette — deep teal-dark with vibrant accents */
  --primary:       #00D4AA;
  --primary-dark:  #00A896;
  --primary-light: #4DFFDB;
  --accent:        #0891B2;
  --accent2:       #7C3AED;

  /* Dark glassmorphism bg */
  --bg:            #060D12;
  --bg-2:          #0C1A22;
  --bg-card:       rgba(255,255,255,0.04);
  --bg-card-hover: rgba(255,255,255,0.08);
  --bg-glass:      rgba(12, 30, 40, 0.7);
  --border-glass:  rgba(0, 212, 170, 0.15);
  --border-subtle: rgba(255,255,255,0.07);

  /* Text */
  --text:          #F0F9FF;
  --text-light:    rgba(240,249,255,0.65);
  --text-muted:    rgba(240,249,255,0.40);

  /* Glow effects */
  --glow-primary:  0 0 30px rgba(0, 212, 170, 0.25);
  --glow-btn:      0 4px 24px rgba(0, 212, 170, 0.4);
  --shadow:        0 4px 24px rgba(0,0,0,0.4);
  --shadow-lg:     0 12px 48px rgba(0,0,0,0.5);

  --radius: 16px;
  --radius-sm: 10px;
  --transition: 0.25s ease;
}

/* ===== BASE ===== */
body {
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(0,212,170,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(8,145,178,0.06) 0%, transparent 60%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
}

/* Animated subtle noise texture */
body::after {
  content:'';
  position:fixed;
  inset:0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events:none;
  z-index:0;
  opacity:0.6;
}

a { color: var(--primary); }
a:hover { color: var(--primary-light); }

/* ===== HEADER ===== */
.header {
  background: rgba(6,13,18,0.75);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 1px 0 rgba(0,212,170,0.08);
}

.header.scrolled {
  background: rgba(6,13,18,0.92);
  box-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 1px 0 rgba(0,212,170,0.1);
}

.nav a {
  color: var(--text-light);
  border-radius: 8px;
  transition: all 0.2s;
}
.nav a:hover, .nav a.active {
  color: var(--primary);
  background: rgba(0,212,170,0.08);
}

.cart-icon svg { stroke: var(--text-light); }
.cart-icon:hover { background: rgba(0,212,170,0.08); }

/* ===== SHAKEPAY BANNER ===== */
.shakepay-top-banner {
  background: linear-gradient(90deg, #003d33, #00A896 50%, #003d33);
  border-bottom: 1px solid rgba(0,212,170,0.2);
  font-size: 0.88rem;
  letter-spacing: 0.3px;
}

/* ===== HERO ===== */
.hero {
  background: transparent;
  overflow: visible;
  position: relative;
}
.hero::before {
  background-image:
    radial-gradient(circle at 15% 50%, rgba(0,212,170,0.12) 0%, transparent 50%),
    radial-gradient(circle at 85% 20%, rgba(8,145,178,0.10) 0%, transparent 45%),
    radial-gradient(circle at 70% 85%, rgba(124,58,237,0.06) 0%, transparent 45%);
}
.hero::after {
  background: linear-gradient(90deg, transparent, var(--primary), var(--accent), var(--primary), transparent);
  opacity: 0.5;
  height: 1px;
}

.hero h1 { color: var(--text); }
.hero h1 span {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  background: rgba(0,212,170,0.1);
  border: 1px solid rgba(0,212,170,0.2);
  color: var(--primary);
  backdrop-filter: blur(8px);
}
.hero-subtitle::before { background: var(--primary); }

.hero-desc { color: var(--text-light); }

/* Glass cards on hero */
.hero-glass-card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}
.hero-glass-card:hover {
  box-shadow: 0 12px 48px rgba(0,0,0,0.5), var(--glow-primary), inset 0 1px 0 rgba(255,255,255,0.12);
  border-color: rgba(0,212,170,0.25);
}
.hero-glass-card--1 .card-label {
  background: rgba(0,212,170,0.12);
  color: var(--primary);
}
.hero-glass-card--1 .card-product-name { color: var(--text); }
.hero-glass-card--1 .card-product-meta { color: var(--text-light); }
.hero-glass-card--1 .card-product-price { color: var(--primary); }
.hero-glass-card--2 .card-stat-number { color: var(--primary); }
.hero-glass-card--2 .card-stat-label { color: var(--text-muted); }
.hero-glass-card--2 .card-stat-bar { background: rgba(0,212,170,0.08); }
.hero-glass-card--3 { background: rgba(255,255,255,0.03); }
.hero-glass-card--3 .card-ship-text h4 { color: var(--text); }
.hero-glass-card--3 .card-ship-text p { color: var(--text-muted); }

/* ===== BUTTONS ===== */
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #000;
  font-weight: 700;
  box-shadow: var(--glow-btn);
  letter-spacing: 0.2px;
}
.btn-primary:hover {
  box-shadow: 0 6px 32px rgba(0,212,170,0.55);
  color: #000;
  transform: translateY(-2px);
}

.btn-outline {
  background: rgba(0,212,170,0.07);
  color: var(--primary);
  border: 1.5px solid rgba(0,212,170,0.35);
  backdrop-filter: blur(8px);
}
.btn-outline:hover {
  background: var(--primary);
  color: #000;
  border-color: var(--primary);
}

/* ===== SECTION ===== */
.section { background: transparent; }
.section-title h2 { color: var(--text); font-family: var(--font-display); }
.section-title p { color: var(--text-light); }

/* ===== PRODUCT CARDS — Deep Glass ===== */
.product-card {
  background: var(--bg-card);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: 0 4px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
/* Glow line at top on hover */
.product-card::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity:0;
  transition: opacity 0.3s;
}
.product-card:hover::before { opacity:1; }
.product-card:hover {
  background: var(--bg-card-hover);
  border-color: rgba(0,212,170,0.2);
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), var(--glow-primary), inset 0 1px 0 rgba(255,255,255,0.08);
}

.product-card .product-img {
  background: linear-gradient(135deg, rgba(0,212,170,0.06), rgba(8,145,178,0.04));
}

.product-card .product-name { color: var(--text); font-family: var(--font-display); font-weight: 600; }
.product-card .product-desc { color: var(--text-light); }
.product-card .product-price { color: var(--primary); }
.product-card .product-price small { color: var(--text-muted); }

.product-card .research-badge {
  background: rgba(0,212,170,0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,212,170,0.25);
  color: var(--primary);
}

/* Set of badge + singles badge */
.set-of-badge {
  background: rgba(0,212,170,0.08);
  border: 1px solid rgba(0,212,170,0.18);
  color: var(--primary);
}
.product-set-total { color: var(--text-muted); }

/* ===== FEATURES ===== */
.feature-card {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  transition: all 0.3s;
}
.feature-card:hover {
  border-color: rgba(0,212,170,0.2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), var(--glow-primary);
  transform: translateY(-4px);
}
.feature-card .icon {
  background: rgba(0,212,170,0.1);
  border: 1px solid rgba(0,212,170,0.15);
}
.feature-card .icon svg { stroke: var(--primary); }
.feature-card h3 { color: var(--text); }
.feature-card p { color: var(--text-light); }

/* ===== PRODUCT DETAIL ===== */
.product-detail-info h1 { color: var(--text); font-family: var(--font-display); }
.product-detail-info .product-price { color: var(--primary); }

.product-detail-image, .product-detail-img {
  background: rgba(0,212,170,0.04);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}

.product-specs {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-sm);
}
.product-specs h3 { color: var(--text); }
.product-specs td { border-bottom: 1px solid rgba(255,255,255,0.05); }
.product-specs td:first-child { color: var(--text); }
.product-specs td:last-child { color: var(--text-light); }

.product-set-info {
  background: rgba(0,212,170,0.05);
  border: 1px solid rgba(0,212,170,0.15);
  color: var(--text-light);
  backdrop-filter: blur(8px);
}
.product-set-info strong { color: var(--primary); }
.set-total-price { color: var(--primary); }

/* ===== QUANTITY SELECTOR ===== */
.quantity-selector {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  backdrop-filter: blur(8px);
}
.quantity-selector button { color: var(--text); }
.quantity-selector button:hover { background: rgba(0,212,170,0.1); }
.quantity-selector input { color: var(--text); background: transparent; }

/* ===== SIZE BUTTONS ===== */
.size-btn {
  border: 1.5px solid rgba(0,212,170,0.25);
  background: rgba(0,212,170,0.04);
  color: var(--text-light);
  backdrop-filter: blur(4px);
}
.size-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(0,212,170,0.08); }
.size-btn.active { background: linear-gradient(135deg,var(--primary),var(--primary-dark)); border-color: var(--primary); color: #000; font-weight: 700; }

/* ===== PURCHASE TYPE SELECTOR ===== */
.purchase-type-selector {
  background: rgba(0,212,170,0.05) !important;
  border: 1px solid rgba(0,212,170,0.18) !important;
  backdrop-filter: blur(12px);
}
.purchase-type-selector h4 { color: var(--text) !important; }
.purchase-type-selector span { color: var(--text-light) !important; }
.purchase-type-selector input[type=radio] { accent-color: var(--primary) !important; }

/* ===== CART SIDEBAR ===== */
.cart-sidebar {
  background: rgba(8,18,25,0.96);
  backdrop-filter: blur(24px);
  border-left: 1px solid var(--border-subtle);
  box-shadow: -8px 0 40px rgba(0,0,0,0.6);
}
.cart-header { border-bottom: 1px solid var(--border-subtle); }
.cart-header h3 { color: var(--text); }
.cart-close { color: var(--text-muted); }
.cart-item { border-bottom: 1px solid var(--border-subtle); }
.cart-item-name { color: var(--text); }
.cart-item-price { color: var(--primary); }
.cart-item-set-badge { background: rgba(0,212,170,0.1); color: var(--primary); }
.cart-item-remove { color: var(--text-muted); }
.cart-item-remove:hover { color: #ff6b6b; }
.cart-empty { color: var(--text-muted); }
.cart-footer { border-top: 1px solid var(--border-subtle); }
.cart-total { color: var(--text); }
.cart-total span:last-child { color: var(--primary); }
.cart-shipping-note { color: var(--text-muted); }
.cart-item-img { background: rgba(0,212,170,0.05); border: 1px solid var(--border-subtle); }
.cart-overlay { background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); }

/* ===== PAGE HEADER ===== */
.page-header {
  background: transparent;
  border-bottom: 1px solid var(--border-subtle);
}
.page-header h1 { color: var(--text); font-family: var(--font-display); }
.page-header p { color: var(--text-light); }

/* ===== PAGE CONTENT ===== */
.page-content h2, .page-content h3 { color: var(--text); }
.page-content p, .page-content li { color: var(--text-light); }

/* ===== CONTACT ===== */
.contact-info-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(16px);
}
.contact-info-card h3 { color: var(--text); }
.contact-info-item .icon { background: rgba(0,212,170,0.08); }
.contact-info-item h4 { color: var(--text); }
.contact-info-item p { color: var(--text-light); }

.contact-form label { color: var(--text); }
.contact-form input,
.contact-form textarea,
.contact-form select {
  background: rgba(255,255,255,0.04);
  border: 1.5px solid var(--border-subtle);
  color: var(--text);
  backdrop-filter: blur(8px);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--text-muted); }
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--primary);
  background: rgba(0,212,170,0.05);
  box-shadow: 0 0 0 3px rgba(0,212,170,0.12);
}

/* ===== FAQ ===== */
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(16px);
  transition: all 0.25s;
}
.faq-item:hover { border-color: rgba(0,212,170,0.2); }
.faq-item.active { border-color: rgba(0,212,170,0.3); box-shadow: var(--glow-primary); }
.faq-question { color: var(--text); }
.faq-question:hover { background: rgba(0,212,170,0.04); }
.faq-question .arrow { color: var(--primary); }
.faq-answer-inner { color: var(--text-light); }

/* ===== FOOTER ===== */
.footer {
  background: rgba(4,10,15,0.97);
  border-top: 1px solid var(--border-subtle);
}
.footer h4 { color: var(--text); }
.footer p { color: var(--text-light); }
.footer ul a { color: var(--text-muted); }
.footer ul a:hover { color: var(--primary); }
.footer-bottom { border-top: 1px solid var(--border-subtle); color: var(--text-muted); }
.footer-disclaimer { background: rgba(255,255,255,0.02); border: 1px solid var(--border-subtle); color: var(--text-muted); }

/* ===== TOAST ===== */
.toast {
  background: rgba(12,30,40,0.95);
  border: 1px solid rgba(0,212,170,0.25);
  color: var(--text);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), var(--glow-primary);
}

/* ===== CHECKOUT MODAL ===== */
.checkout-modal-overlay {
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(12px);
}
.checkout-modal {
  background: rgba(8,18,25,0.97);
  border: 1px solid var(--border-glass);
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), var(--glow-primary);
  backdrop-filter: blur(30px);
  color: var(--text);
}
.checkout-modal-close { color: var(--text-muted); }
.checkout-modal-close:hover { color: var(--text); }
.checkout-header h2 { color: var(--text); }
.checkout-subtitle { color: var(--text-muted); }

.checkout-order-summary {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.checkout-order-summary h3 { color: var(--text-muted); }
.checkout-order-summary li { color: var(--text-light); }
.checkout-total-cad { color: var(--primary); }
.checkout-total-row { border-top-color: rgba(255,255,255,0.07); color: var(--text); }

.checkout-payment-method h3 { color: var(--text-muted); }
.payment-option-inner {
  border: 1.5px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
  border-radius: var(--radius-sm);
}
.payment-option.selected .payment-option-inner,
.payment-option:hover .payment-option-inner {
  border-color: var(--primary);
  background: rgba(0,212,170,0.06);
}
.payment-name { color: var(--text); }
.payment-desc { color: var(--text-muted); }

.checkout-shakepay-info { color: var(--text-light); }
.step-text { color: var(--text-light); }
.checkout-address-area {
  background: rgba(0,212,170,0.05);
  border: 1px solid rgba(0,212,170,0.18);
}
.address-label { color: var(--text-light); }
.address-box {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}
.address-box code { color: var(--text); }
.checkout-shipping-form h3 { color: var(--text-muted); }
.checkout-shipping-form .form-group label { color: var(--text-muted); }
.checkout-shipping-form .form-group input {
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.07);
  color: var(--text);
}
.checkout-shipping-form .form-group input::placeholder { color: var(--text-muted); }
.checkout-shipping-form .form-group input:focus {
  border-color: var(--primary);
  background: rgba(0,212,170,0.05);
}

/* Address dropdown */
.addr-autocomplete-drop {
  background: rgba(12,26,36,0.98);
  border: 1.5px solid rgba(0,212,170,0.25);
  backdrop-filter: blur(12px);
}
.addr-opt { border-bottom: 1px solid rgba(255,255,255,0.05); }
.addr-opt-active, .addr-opt:hover { background: rgba(0,212,170,0.07); }
.addr-opt-street { color: var(--text); }
.addr-opt-rest { color: var(--text-muted); }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(0,212,170,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ===== MICRO-ANIMATIONS ===== */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

.hero-glass-card--2 { animation: float 5s ease-in-out infinite; }
.hero-glass-card--4 { animation: float 7s ease-in-out infinite 1s; }

/* ===== RESPONSIVE DARK OVERLAY ON MOBILE NAV ===== */
@media (max-width: 768px) {
  .nav {
    background: rgba(6,13,18,0.98);
    border-left: 1px solid var(--border-subtle);
    backdrop-filter: blur(20px);
  }
}