/* InstaMart — Server Boost / Neon Purple Theme */
:root {
  --im-bg: #03020a;
  --im-bg-2: #070313;
  --im-panel: rgba(10, 6, 24, .82);
  --im-panel-2: rgba(14, 8, 31, .92);
  --im-purple: #7e24ff;
  --im-purple-2: #4b1aeb;
  --im-purple-3: #ac3dff;
  --im-purple-soft: #a56ff6;
  --im-border: rgba(126, 36, 255, .30);
  --im-border-soft: rgba(126, 36, 255, .16);
  --im-muted: rgba(255,255,255,.54);
}

html { background: var(--im-bg) !important; }
body {
  background:
    radial-gradient(900px 520px at 50% -12%, rgba(126,36,255,.18), transparent 67%),
    radial-gradient(700px 500px at 8% 45%, rgba(75,26,235,.10), transparent 68%),
    radial-gradient(700px 500px at 92% 65%, rgba(172,61,255,.09), transparent 68%),
    linear-gradient(180deg, #020108 0%, #05020d 48%, #03020a 100%) !important;
  color: #fff;
}

#particles-js { opacity: .06; pointer-events: none; }
#app > .flex { max-width: 92rem !important; }

/* Global purple glow */
::selection { background: rgba(126,36,255,.38); color: #fff; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #020108; }
::-webkit-scrollbar-thumb { background: #2b105b; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #6f20e8; }

/* Announcement */
.component[data-component-id="announcement"] > div {
  border: 1px solid var(--im-border-soft) !important;
  background: linear-gradient(90deg, rgba(75,26,235,.13), rgba(126,36,255,.07), rgba(172,61,255,.13)) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.24), 0 0 30px rgba(126,36,255,.05), inset 0 1px rgba(255,255,255,.035);
}

/* Navbar */
nav.component > div {
  background: rgba(5,3,13,.78) !important;
  border: 1px solid rgba(126,36,255,.18) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.38), 0 0 30px rgba(126,36,255,.05), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(18px);
}
nav.component img { filter: drop-shadow(0 0 15px rgba(126,36,255,.40)); }
nav.component a, nav.component button { transition: .22s ease !important; }
nav.component .text-t-primary\/80:hover,
nav.component .text-t-primary:hover { color: #fff !important; }
nav.component .bg-accent-500,
nav.component .bg-accent-700 {
  background: linear-gradient(135deg, #ac3dff, #7e24ff 52%, #4b1aeb) !important;
  box-shadow: 0 0 22px rgba(126,36,255,.22);
}
nav.component .border-accent-500 { border-color: rgba(126,36,255,.55) !important; }

/* Hero */
.component[data-component-id="hero"] { position: relative; overflow: hidden; }
.component[data-component-id="hero"]:before {
  content: "";
  position: absolute;
  width: 760px; height: 620px;
  left: 50%; top: -300px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(126,36,255,.25), rgba(75,26,235,.09) 38%, transparent 70%);
  filter: blur(12px);
  pointer-events: none;
}
.component[data-component-id="hero"] > div { padding-top: 8rem !important; padding-bottom: 7rem !important; }
.component[data-component-id="hero"] h1 {
  font-size: clamp(3rem, 8vw, 6.8rem) !important;
  line-height: .98 !important;
  letter-spacing: -.055em;
  font-weight: 700 !important;
  text-shadow: 0 0 45px rgba(126,36,255,.15);
}
.component[data-component-id="hero"] h1 .text-accent-500,
.component[data-component-id="hero"] .text-accent-500 { color: #a56ff6 !important; }
.component[data-component-id="hero"] p {
  color: rgba(255,255,255,.60) !important;
  max-width: 720px;
  margin-left: auto; margin-right: auto;
  font-size: 1.08rem !important;
  line-height: 1.8;
}
.component[data-component-id="hero"] .searchbar,
.component[data-component-id="hero"] input { border-radius: 14px !important; }

/* Sections */
.component h1, .component h2, .component h3 { letter-spacing: -.025em; }
.component > div { position: relative; }

/* Product section */
.component[data-component-id="products"] > div {
  padding-top: 3.5rem !important;
  padding-bottom: 3.5rem !important;
}
.component[data-component-id="products"] h1 {
  font-size: clamp(1.7rem, 3vw, 2.4rem) !important;
}
.component[data-component-id="products"] hr {
  width: 48px !important;
  border: 0 !important;
  height: 3px;
  background: linear-gradient(90deg, #4b1aeb, #7e24ff, #ac3dff) !important;
  border-radius: 99px;
  box-shadow: 0 0 15px rgba(126,36,255,.42);
}
.component[data-component-id="products"] input { color:#fff !important; }
.component[data-component-id="products"] input::placeholder { color: rgba(255,255,255,.34); }
.component[data-component-id="products"] .bg-card\/75 {
  background: rgba(8,4,19,.72) !important;
  border-color: var(--im-border-soft) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(14px);
}

/* Product cards — target Server Boost reference look */
a.product-card-luxury {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: 24px !important;
  background:
    linear-gradient(180deg, rgba(12,6,27,.96) 0%, rgba(6,3,15,.98) 100%) !important;
  border: 1px solid rgba(126,36,255,.25) !important;
  box-shadow:
    0 18px 55px rgba(0,0,0,.38),
    0 0 30px rgba(126,36,255,.045),
    inset 0 1px rgba(255,255,255,.035);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease !important;
}
a.product-card-luxury:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(500px 180px at 50% 0%, rgba(126,36,255,.09), transparent 70%);
}
a.product-card-luxury:hover {
  transform: translateY(-6px);
  border-color: rgba(126,36,255,.62) !important;
  box-shadow:
    0 24px 65px rgba(0,0,0,.46),
    0 0 34px rgba(126,36,255,.13),
    inset 0 1px rgba(255,255,255,.045);
}

/* Product image / banner area */
a.product-card-luxury .product-card-image {
  position: relative;
  padding: 12px !important;
  border-bottom: 1px solid rgba(126,36,255,.16) !important;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(18,5,42,.18)) !important;
}
a.product-card-luxury .product-card-image:after {
  content: "";
  position: absolute;
  left: 8%; right: 8%; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #7e24ff 30%, #ac3dff 50%, #7e24ff 70%, transparent);
  box-shadow: 0 0 18px rgba(126,36,255,.85);
  pointer-events: none;
}
a.product-card-luxury .product-card-image img {
  border-radius: 17px !important;
  transition: transform .45s ease, filter .45s ease;
}
a.product-card-luxury:hover .product-card-image img {
  transform: scale(1.025);
  filter: saturate(1.08) brightness(1.04);
}

/* Card content */
a.product-card-luxury .product-card-content {
  padding: 22px 22px 20px !important;
}
a.product-card-luxury .product-card-title {
  color: #fff !important;
  font-size: 1.15rem !important;
  line-height: 1.25;
}
a.product-card-luxury .product-card-meta {
  color: rgba(255,255,255,.50) !important;
}
a.product-card-luxury .product-card-price,
a.product-card-luxury .text-accent-500 {
  color: #8f35ff !important;
}
a.product-card-luxury .product-card-price {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
}

/* View Details */
a.product-card-luxury .product-view-details {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
  border: 1px solid rgba(126,36,255,.58) !important;
  border-radius: 11px !important;
  color: #b77bff !important;
  background: rgba(126,36,255,.045) !important;
  box-shadow: inset 0 0 18px rgba(126,36,255,.025);
  transition: .22s ease !important;
}
a.product-card-luxury:hover .product-view-details {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #ac3dff 0%, #7e24ff 48%, #4b1aeb 100%) !important;
  box-shadow: 0 0 24px rgba(126,36,255,.24);
}

/* Badge */
a.product-card-luxury .badges > div {
  border-radius: 8px !important;
  box-shadow: 0 0 15px rgba(126,36,255,.14);
}

/* Modal */
.component[data-component-id="products"] .bg-background {
  background: rgba(5,2,12,.98) !important;
  border: 1px solid rgba(126,36,255,.25) !important;
  border-radius: 22px !important;
  box-shadow: 0 30px 100px rgba(0,0,0,.65), 0 0 40px rgba(126,36,255,.08);
}

/* Buttons */
button, a[class*="bg-accent"], .btn-primary {
  border-radius: 11px !important;
}

/* Features / feedback */
.component[data-component-id="features"] > div > div,
.component[data-component-id^="feedbacks"] .bg-card\/75 {
  border-radius: 18px !important;
  border-color: rgba(126,36,255,.14) !important;
}

/* Footer */
footer { opacity: .92; }
footer a:hover { color: #ac3dff !important; }

@media (max-width: 768px) {
  .component[data-component-id="hero"] > div { padding-top: 5.5rem !important; padding-bottom: 4.5rem !important; }
  .component[data-component-id="hero"] h1 { font-size: clamp(2.8rem, 15vw, 4.5rem) !important; }
  nav.component > div { border-radius: 14px !important; }
  a.product-card-luxury { border-radius: 20px !important; }
  a.product-card-luxury .product-card-content { padding: 18px !important; }
}