/* ============================================================
   BLUE THEME — Enhanced  |  BoosterHub
   Full blue palette, smooth animations, zero jank
   ============================================================ */

/* ─────────────────────────────────────────
   1. ANIMATED BACKGROUND LINES
───────────────────────────────────────── */
.lines {
  top: 0; bottom: 0; left: 50%;
  width: 100%; display: flex;
  position: absolute;
  transform: translateX(-50%);
  z-index: -1;
}

.line {
  width: 12.5%; height: 100%;
  position: relative; display: inline-block;
  border-left: 1px solid rgba(59,130,246,0.08) !important;
}

.lines .line::before {
  content: '';
  position: absolute;
  right: -3px !important;
  width: 5px;
  height: 70px;
  border-radius: 100%;
  background-image: linear-gradient(0deg, rgba(59,130,246,0.9), transparent);
}

.lines .line:nth-child(odd)::before  { animation: lineAnim2 4s linear infinite; }
.lines .line:nth-child(even)::before { animation: lineAnim1 4s linear infinite; animation-delay: -2s; }

@keyframes lineAnim1 {
  0%   { top: 0;   opacity: 1; }
  50%  { top: 50%; }
  100% { top: 100%; opacity: 0.6; }
}
@keyframes lineAnim2 {
  0%   { bottom: 0;   opacity: 1; }
  50%  { bottom: 50%; }
  100% { bottom: 100%; opacity: 0.6; }
}


/* ─────────────────────────────────────────
   2. FLOATING NAVBAR
───────────────────────────────────────── */
.backdropme {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.component10 {
  position: fixed; top:20px; left:50%; transform:translateX(-50%);
  width: clamp(300px,80%,1200px); z-index:9999;
  border-radius: 20px;
  background: rgba(5,13,31,0.62);
  border: 1px solid rgba(59,130,246,.22);
  box-shadow: 0 4px 28px rgba(0,0,0,.45), var(--glow-sm);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  transition: width .65s var(--ease-out), top .4s var(--ease-out), background .45s ease, box-shadow .45s ease, border-color .45s ease;
  will-change: width, top;
}
.component10::before {
  content:''; position:absolute;
  top:0; left:12%; right:12%; height:1px;
  background: linear-gradient(90deg, transparent, rgba(96,165,250,.55), transparent);
  border-radius:1px;
}
.component10:hover {
  border-color: rgba(59,130,246,.48);
  box-shadow: 0 4px 36px rgba(0,0,0,.5), var(--glow-md);
}
.component10.scrolled {
  top:12px; 
  background: rgba(3,8,20,.84);
  border-color: rgba(59,130,246,.32);
  box-shadow: 0 8px 44px rgba(0,0,0,.6), var(--glow-md);
}
.component10.scrolled:hover { box-shadow: 0 8px 44px rgba(0,0,0,.6), var(--glow-lg); }
.component10 a, .component10 button { transition: color .2s ease, background .2s ease; }
@media(max-width:1024px){ .component10{width:90%;top:16px;} .component10.scrolled{width:90%;} }
@media(max-width:600px) {
  .component10{width:94%;top:12px;border-radius:16px;}
  .component10.scrolled{top:8px;}
  .component10 a,.component10 button{min-height:44px;display:inline-flex;align-items:center;}
}

/* ─────────────────────────────────────────
   3. FOOTER
───────────────────────────────────────── */
footer {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: transparent !important;
  border-radius: 0 !important;
  width: 100%;
  padding-top: 50px;
  box-shadow: 0 0 18px 2px rgba(59,130,246,0.35);
}

footer .designer {
  padding: 25px;
  text-align: left;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  backdrop-filter: blur(10px);
  width: 100%;
  background-color: rgba(var(--cl-card), .25);
  opacity: 0.7;
  white-space: nowrap;
  gap: 5px;
}

footer .payments {
  padding: 25px;
  text-align: right;
  display: flex;
  flex-flow: column;
  justify-self: right;
  backdrop-filter: blur(10px);
  width: 100%;
  background-color: rgba(var(--cl-card), .25);
}
footer .payments h3 { margin-bottom: 20px; }

.payment-logos {
  display: flex; justify-content: flex-end;
  gap: 15px; flex-wrap: wrap;
}
.payment-logos img { margin-top: 10px; height: 30px; width: auto; }

.bluez { color: #3b82f6; margin-right: 3px; }


/* ─────────────────────────────────────────
   4. PRODUCT CARDS
───────────────────────────────────────── */
/* override any old red shadow */
.w-full.grid {
  box-shadow: none !important;
}

.snapbox {
  clip-path: polygon(100% 0, 100% 100%, .75rem 100%, 0 calc(100% - .75rem), 0 0);
  -webkit-clip-path: polygon(100% 0, 100% 100%, .75rem 100%, 0 calc(100% - .75rem), 0 0);
  border-radius: 0 !important;
}

.shadowcard {
  box-shadow: -1px -1px 8px 3px rgba(59,130,246,0.35);
  border-color: rgba(59,130,246,0.35);
  transition: box-shadow 0.35s ease;
}

.container-hover img {
  transition: transform 0.4s cubic-bezier(.4,0,.2,1);
}
.container-hover:hover img {
  transform: scale(1.08);
}
.container-hover:hover .shadowcard {
  box-shadow: -1px -1px 16px 6px rgba(59,130,246,0.55);
}


/* ─────────────────────────────────────────
   5. MISC UTILITIES
───────────────────────────────────────── */
.image-container { position: relative; overflow: hidden; }

.snow-overlay {
  background-image: url('https://i.postimg.cc/0jvqqY5P/snow02.gif');
  position: absolute; top: 0; left: 0;
  z-index: 99; width: 100%; height: 100%;
  pointer-events: none; opacity: 0.6;
}

/* Blue gradient text */
.rainbowText {
  font-family: inherit;
  background-image: linear-gradient(90deg, #1d4ed8, #3b82f6, #38bdf8, #3b82f6, #1d4ed8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 300% 100%;
  animation: rainbowMove 8s linear infinite;
}
@keyframes rainbowMove {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Container spacings */
.container.my-14 { margin-top:140px; margin-bottom:140px; }
.container.my-12 { margin-top:120px; margin-bottom:120px; }
.container.my-11 { margin-top:110px; margin-bottom:110px; }
.container.my-10 { margin-top:100px; margin-bottom:100px; }
.container.my-9  { margin-top:90px;  margin-bottom:90px;  }
.container.my-8  { margin-top:80px;  margin-bottom:80px;  }
.container.my-7  { margin-top:70px;  margin-bottom:70px;  }
.container.my-6  { margin-top:60px;  margin-bottom:60px;  }
.container.my-5  { margin-top:50px;  margin-bottom:50px;  }
.container.my-1  { margin-top:10px;  margin-bottom:10px;  }

/* navbox overlay helper */
.navbox1 {
  -webkit-mask-image: linear-gradient(black, black);
  mask-image: linear-gradient(black, black);
  box-shadow: 0 0 8px 3px rgba(59,130,246,0.45);
}

/* ─────────────────────────────────────────
   6. LAYOUT OFFSET FOR FIXED NAVBAR
───────────────────────────────────────── */
.has-fixed-navbar #app > div > div:first-child {
  padding-top: 88px;
}

.reveal-pending {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(.4,0,.2,1), transform 0.6s cubic-bezier(.4,0,.2,1);
}

.reveal-pending.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ─────────────────────────────────────────
   7. MOBILE
───────────────────────────────────────── */
@media (max-width: 640px) {
  .container.my-14,
  .container.my-12,
  .container.my-11,
  .container.my-10,
  .container.my-9,
  .container.my-8,
  .container.my-7,
  .container.my-6,
  .container.my-5 {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }

  footer .designer {
    white-space: normal; flex-wrap: wrap;
    padding: 15px; justify-content: center; text-align: center;
  }
  footer .payments {
    text-align: center; justify-self: center; padding: 15px;
  }
  .payment-logos { justify-content: center; }
  .payment-logos img { height: 24px; }

  .line { border-left-width: 1px !important; }
  .lines .line::before { right: -2px !important; width: 3px; height: 40px; }

  .component10 { top: 10px; }
  body { padding-top: 70px; }
}