/* ================================================================
   NEETECH PREMIUM UI  — additive polish layer
   Loads last. No overrides of functionality. Enhancement only.
================================================================ */

/* ---- 1. DESIGN TOKEN ADDITIONS ---- */
:root {
  /* Extra glow helpers — do NOT override existing tokens like --primary-text */
  --primary-glow-sm: rgba(253, 202, 0, 0.13);
  --primary-glow-md: rgba(253, 202, 0, 0.22);
  --card-hover-border: rgba(253, 202, 0, 0.28);
  --card-hover-glow: 0 22px 54px rgba(0, 0, 0, 0.13),
    0 0 0 1.5px rgba(253, 202, 0, 0.24);
}

/* ---- 2. TECH DOT-GRID BACKGROUND ---- */
/* Adds a very subtle repeating dot grid to the body background.
   Only adds background-image so existing background-color (#f5f5f5) is preserved. */
body {
  background-image: radial-gradient(
    circle,
    rgba(0, 0, 0, 0.042) 1px,
    transparent 1px
  );
  background-size: 26px 26px;
}

/* Dark sections must not show dots (they have their own bg-color that hides it,
   but be explicit to be safe) */
.home-final-services,
.footer,
.site-header {
  background-image: none;
}

/* ---- 3. HERO AMBIENT GLOW ---- */
/* Adds a subtle yellow corona at the very bottom of the hero on the home page */
.home-hero {
  position: relative;
}

.home-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(253, 202, 0, 0.6),
    transparent
  );
  pointer-events: none;
  z-index: 21;
}

/* ---- 4. PRODUCT CARD HOVER GLOW ---- */
/* All product card variants get yellow border + stronger shadow on hover.
   The base transform is already in each page CSS; we only ADD the border+glow. */

.computer-product-card:hover,
.storage-product-card:hover,
.monitors-product-card:hover,
.printers-product-card:hover,
.network-product-card:hover,
.cctv-product-card:hover,
.pc-product-card:hover,
.education-product-card:hover,
.related-product-card:hover,
.home-dynamic-products .product-card:hover,
.computer-service-card:hover,
.monitors-service-card:hover,
.printers-service-card:hover,
.network-service-card:hover,
.cctv-service-card:hover,
.pc-service-card:hover,
.education-service-card:hover,
.about-service-card:hover {
  border-color: var(--card-hover-border);
  box-shadow: var(--card-hover-glow);
}

/* ---- 5. HOME CARDS ENHANCEMENT ---- */
.home-category-card:hover {
  border-color: var(--card-hover-border);
  box-shadow: var(--card-hover-glow);
}

/* Icon micro-animation inside category cards */
.home-category-card i {
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.28s ease;
  will-change: transform;
}

.home-category-card:hover i {
  transform: scale(1.12) rotate(-4deg);
  background: var(--primary-glow-md);
}

.home-feature-card:hover {
  border-color: var(--card-hover-border);
}

.home-related-services article:hover {
  border-color: var(--card-hover-border);
  box-shadow: var(--card-hover-glow);
}

/* ---- 6. BRAND PILLS ---- */
.brand-pill:hover {
  box-shadow: 0 8px 28px rgba(253, 202, 0, 0.26);
}

/* ---- 7. CTA BOX AMBIENT CORNER GLOW ---- */
.cta-box {
  position: relative;
  overflow: hidden;
}

.cta-box::after {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 240px;
  height: 240px;
  background: radial-gradient(
    circle,
    rgba(253, 202, 0, 0.07) 0%,
    transparent 70%
  );
  pointer-events: none;
  border-radius: 50%;
}

/* ---- 8. BUTTON MICRO-INTERACTIONS ---- */
.btn:active {
  transform: scale(0.97) translateY(1px) !important;
  transition-duration: 0.08s !important;
}

.cart-btn:active,
.add-cart-btn:active,
.whatsapp-order-btn:active,
.reset-filter-btn:active,
.computer-filter-btn:active,
.back-btn:active {
  transform: scale(0.94) !important;
  transition-duration: 0.08s !important;
}

.details-btn:active {
  transform: scale(0.96) !important;
  transition-duration: 0.08s !important;
}

/* Slightly stronger primary button glow */
.btn-primary {
  box-shadow: 0 8px 22px rgba(253, 202, 0, 0.18), 0 16px 36px rgba(253, 202, 0, 0.1);
}

.btn-primary:hover {
  box-shadow: 0 10px 28px rgba(253, 202, 0, 0.3), 0 20px 42px rgba(253, 202, 0, 0.16);
}

/* ---- 9. SEARCH INPUT ENHANCED FOCUS ---- */
.desktop-search-input:focus {
  box-shadow: 0 0 0 3px rgba(253, 202, 0, 0.18), 0 4px 18px rgba(253, 202, 0, 0.1) !important;
}

/* ---- 10. FILTER ACCORDION — no hover tint ---- */
/* Only keep border-radius; removed background hover tint per design decision */
.filter-acc-head {
  border-radius: 8px;
}

/* ---- 11. CATEGORY TABS — uniform color + size ---- */
/* Safari/iOS renders <button> text blue by default when color is not set explicitly.
   Fix: force #111 on all tab button variants and normalise font size. */
.computer-tab,
.storage-tab,
.monitors-tab,
.printers-tab,
.network-tab,
.pc-tab,
.education-tab,
.software-tab,
.services-tab,
.computer-tabs a,
.storage-tabs a,
.monitors-tabs a,
.printers-tabs a,
.network-tabs a,
.pc-tabs a,
.education-tabs a,
.software-tabs a,
.services-tabs a {
  color: #111111 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

/* Keep active tab readable (dark text on yellow bg) */
.computer-tab.active,
.storage-tab.active,
.monitors-tab.active,
.printers-tab.active,
.network-tab.active,
.pc-tab.active,
.education-tab.active,
.software-tab.active,
.services-tab.active,
.computer-tabs a.active,
.storage-tabs a.active,
.monitors-tabs a.active,
.printers-tabs a.active,
.network-tabs a.active,
.pc-tabs a.active,
.education-tabs a.active,
.software-tabs a.active,
.services-tabs a.active {
  color: #000000 !important;
}

/* ---- 11b. PRODUCT CARD BUTTON STABILITY ---- */
/* Reinforce flex column layout so bottom action row always stays pinned to the bottom,
   regardless of how short the product name or description is. */
.computer-product-body,
.storage-product-body,
.monitors-product-body,
.printers-product-body,
.network-product-body,
.cctv-product-body,
.pc-product-body,
.education-product-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.computer-product-bottom,
.storage-product-bottom,
.monitors-product-bottom,
.printers-product-bottom,
.network-product-bottom,
.cctv-product-bottom,
.pc-product-bottom,
.education-product-bottom {
  margin-top: auto !important;
}

/* ---- 12. FOOTER TOP GLOW LINE ---- */
.footer-main {
  position: relative;
}

.footer-main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(253, 202, 0, 0.55),
    transparent
  );
  pointer-events: none;
}

/* ---- 13. SCROLL REVEAL ANIMATIONS ---- */
/* Base: set opacity/translate to 0 when .animations-ready is on <html>.
   The JS adds .revealed when element enters viewport. */

.animations-ready .section-head,
.animations-ready .brands-strip,
.animations-ready .promo-wide-card,
.animations-ready .home-category-card,
.animations-ready .home-feature-card,
.animations-ready .home-service-card,
.animations-ready .home-related-services article,
.animations-ready .cta-box,
.animations-ready .filter-box,
.animations-ready .computer-topbar,
.animations-ready .monitors-topbar,
.animations-ready .storage-topbar,
.animations-ready .printers-topbar,
.animations-ready .network-topbar,
.animations-ready .pc-topbar,
.animations-ready .education-topbar {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.62s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.62s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.animations-ready .section-head.revealed,
.animations-ready .brands-strip.revealed,
.animations-ready .promo-wide-card.revealed,
.animations-ready .home-category-card.revealed,
.animations-ready .home-feature-card.revealed,
.animations-ready .home-service-card.revealed,
.animations-ready .home-related-services article.revealed,
.animations-ready .cta-box.revealed,
.animations-ready .filter-box.revealed,
.animations-ready .computer-topbar.revealed,
.animations-ready .monitors-topbar.revealed,
.animations-ready .storage-topbar.revealed,
.animations-ready .printers-topbar.revealed,
.animations-ready .network-topbar.revealed,
.animations-ready .pc-topbar.revealed,
.animations-ready .education-topbar.revealed {
  opacity: 1;
  transform: none;
}

/* ---- 14. REDUCED MOTION — disable everything ---- */
@media (prefers-reduced-motion: reduce) {
  .home-category-card i {
    transition: none !important;
  }

  .animations-ready .section-head,
  .animations-ready .brands-strip,
  .animations-ready .promo-wide-card,
  .animations-ready .home-category-card,
  .animations-ready .home-feature-card,
  .animations-ready .home-service-card,
  .animations-ready .home-related-services article,
  .animations-ready .cta-box,
  .animations-ready .filter-box,
  .animations-ready .computer-topbar,
  .animations-ready .monitors-topbar,
  .animations-ready .storage-topbar,
  .animations-ready .printers-topbar,
  .animations-ready .network-topbar,
  .animations-ready .pc-topbar,
  .animations-ready .education-topbar {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.05ms !important;
  }
}

/* ---- 15. MOBILE TWEAKS ---- */
/* Dot grid is subtle CSS — fine on mobile. But reduce size for smaller screens. */
@media (max-width: 480px) {
  body {
    background-size: 22px 22px;
    background-image: radial-gradient(
      circle,
      rgba(0, 0, 0, 0.032) 1px,
      transparent 1px
    );
  }
}

/* ---- 16. PROMO WIDE CARD POLISH ---- */
.promo-wide-card {
  transition: box-shadow 0.3s ease;
}

.promo-wide-card:hover {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12),
    0 0 0 1.5px rgba(253, 202, 0, 0.2);
}

/* ---- 17. PAGINATION BUTTON ACTIVE GLOW ---- */
.page-btn:hover,
.page-btn.active {
  box-shadow: 0 4px 16px rgba(253, 202, 0, 0.22);
}

/* ---- 18. HEADER NAV ROW POLISH ---- */
/* The yellow nav bar already looks good; add a subtle bottom shadow to separate it */
.header-nav-row {
  box-shadow: 0 2px 12px rgba(253, 202, 0, 0.14);
}

/* ---- 19. PRODUCT DETAILS PAGE ENHANCEMENTS ---- */
.main-product-image {
  transition: box-shadow 0.3s ease;
}

.main-product-image:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(253, 202, 0, 0.18);
}

.product-thumbs button:hover {
  box-shadow: 0 4px 14px rgba(253, 202, 0, 0.22);
}

/* ---- 20. COMPUTER TOPBAR / SORT AREA ---- */
.computer-topbar {
  transition: box-shadow 0.3s ease;
}

.computer-sort select {
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
  cursor: pointer;
}

.computer-sort select:focus {
  border-color: rgba(253, 202, 0, 0.5);
  box-shadow: 0 0 0 3px rgba(253, 202, 0, 0.14);
  outline: none;
}