/* MeySkincare custom styles - futuristic pink/purple gradient */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');
:root{
  --bg-start: #ffe6f8;
  --bg-end: #e9d6ff;
  --glass: rgba(255,255,255,0.06);
  --neon-1: #ff6ec7; /* pink */
  --neon-2: #7b61ff; /* purple */
  --muted: #2b2b3a;
  --surface: rgba(255,255,255,0.06); /* default card surface */
  --surface-contrast: rgba(243,236,255,0.06); /* slightly different for contrast */
  --card-bg: rgba(255,255,255,0.06);
.site-font{ font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif; }
.noise-bg{ position:fixed; inset:0; pointer-events:none; z-index:0; background-image: radial-gradient(1200px 400px at 10% 10%, rgba(123,97,255,0.12), transparent), linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 100%); }
html,body{
  height:100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color:var(--muted);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background: linear-gradient(180deg, #fff6fb 0%, #f3f0ff 30%, #efe8ff 100%);
}

h1,h2,h3,h4,h5,h6{ font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #2a2340; font-weight:700; letter-spacing:0.2px }
h1{ font-size:2.6rem; }
h2{ font-size:1.25rem; }
/* subtle noise overlay using translucent gradient pseudo-layer via element in body */
body::after{ content:''; position:fixed; inset:0; pointer-events:none; background-image: radial-gradient(circle at 10% 10%, rgba(123,97,255,0.06), transparent 10%), linear-gradient(180deg, rgba(255,110,199,0.02), rgba(123,97,255,0.02)); mix-blend-mode:overlay; z-index:0; }
.navbar{
  background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border-bottom: 1px solid rgba(123,97,255,0.08);
  box-shadow: 0 6px 30px rgba(123,97,255,0.03);
}
.brand{ color:var(--neon-2); font-weight:800; letter-spacing:0.6px; }
.hero{ padding:3rem 0; text-align:center; position:relative; }
.hero h1{ color:var(--neon-2); font-size:2.6rem; margin-bottom:.25rem; text-shadow: 0 6px 18px rgba(123,97,255,0.12); }
.hero .lead{ color:#4a3f57; opacity:0.95 }

.card.product{
  position:relative; border-radius:18px; overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 12px 50px rgba(88, 58, 141, 0.06), inset 0 1px 0 rgba(255,255,255,0.02);
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.card.product:hover{ transform: translateY(-10px) scale(1.01); box-shadow: 0 32px 80px rgba(123,97,255,0.12); border-color: rgba(123,97,255,0.18); }
/* subtle gradient border using pseudo-element */
.card.product::before{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:18px;
  padding:1px; background:linear-gradient(90deg, rgba(255,110,199,0.12), rgba(123,97,255,0.10));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:0.9;
}

/* glow border (animated) */
.card.product::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:18px;
  box-shadow: 0 8px 30px rgba(123,97,255,0); transition: box-shadow .28s ease, opacity .28s ease;
  opacity:0;
}
.card.product:hover::after{ box-shadow: 0 30px 80px rgba(123,97,255,0.14); opacity:1; }

/* slightly darker surface to contrast with page */
.card.product{ background-color: rgba(255,255,255,0.015); }

/* slightly darker card background inner area to create contrast with page */
.card.product .card-body{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:18px; }
.card.product .card-img-top{ height:220px; object-fit:cover; background:linear-gradient(120deg, rgba(255,110,199,0.06), rgba(123,97,255,0.04)); transition: transform .45s cubic-bezier(.2,.9,.2,1); cursor:zoom-in; }
.card.product .card-img-top{
  height:220px; object-fit:cover; background:linear-gradient(120deg, rgba(255,110,199,0.06), rgba(123,97,255,0.04));
  transition: transform .45s cubic-bezier(.2,.9,.2,1), filter .45s cubic-bezier(.2,.9,.2,1);
  cursor:zoom-in;
}
.card.product .card-img-top.zoomed{ transform: scale(1.06); filter: blur(1px); cursor:zoom-out; }
.card-body .price{ color:var(--neon-2); font-weight:800; font-size:1.05rem; text-shadow:0 2px 6px rgba(123,97,255,0.06); }
.btn-accent{ background:linear-gradient(90deg,var(--neon-1),var(--neon-2)); color:white; border-radius:12px; padding:10px 14px; box-shadow: 0 8px 30px rgba(123,97,255,0.12); border:0 }
.btn-accent:active, .btn-accent:focus{ box-shadow: 0 6px 18px rgba(123,97,255,0.14); transform: translateY(1px); }

/* image zoom overlay for modal-like effect */
.img-overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background: radial-gradient(ellipse at center, rgba(123,97,255,0.08), rgba(0,0,0,0.55)); z-index:1200; opacity:0; pointer-events:none; transition: opacity .28s ease; }
.img-overlay.show{ opacity:1; pointer-events:auto; }
.img-overlay .preview-wrap{ display:flex; gap:20px; align-items:flex-start; max-width:92%; }
.img-overlay img{ max-width:56%; max-height:80vh; border-radius:12px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); transform:scale(1); transition: transform .28s cubic-bezier(.2,.9,.2,1), filter .28s ease; }
.img-overlay .meta{ max-width:36%; color:#fff; }
.img-overlay .meta h4{ margin:0 0 8px 0; font-size:1.6rem; color: #fff; text-shadow:0 8px 30px rgba(0,0,0,0.6); }
.img-overlay .meta p{ margin:0; opacity:.95 }

/* product grid responsive tweaks */
@media (min-width:1200px){ .col-lg-3 { flex: 0 0 25%; max-width: 25%; } }
@media (max-width:575px){ .hero h1{ font-size:1.6rem } .card.product .card-img-top{ height:160px } }

/* cart badge modern */
.cart-badge{
  font-size:.75rem; padding:4px 8px; background: linear-gradient(90deg,var(--neon-1),var(--neon-2)); color:#fff; border-radius:999px; box-shadow: 0 8px 26px rgba(123,97,255,0.18); transform-origin:center; display:inline-block;
}

/* bounce animation when item added */
@keyframes badge-bounce{ 0%{ transform: scale(1) } 30%{ transform: scale(1.36) } 60%{ transform: scale(.92) } 100%{ transform: scale(1) } }
.cart-badge.bounce{ animation: badge-bounce .56s cubic-bezier(.2,.9,.2,1); }

/* futuristic cart button */
.cart-btn{ background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(123,97,255,0.06); padding:8px 12px; border-radius:12px }
.cart-btn svg{ filter: drop-shadow(0 6px 18px rgba(123,97,255,0.12)); }

/* footer */
footer{ padding:2rem 0; font-size:.95rem; color:#4b3f57 }

/* utility */
.text-muted.small{ font-size:0.85rem }

/* invoice modal tweaks */
.modal-body table td, .modal-body table th{ vertical-align:middle }