/* =========================================================
   TERAQOON • Premium CSS for Zid Store
   Author: Lovable
   Version: 2.0
   Theme: Dark Tech / Red & Blue Neon Accents (RTL)
   ========================================================= */

/* =========================================================
   0) FONT
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&family=Cairo:wght@600;700;800;900&display=swap');

/* =========================================================
   1) DESIGN TOKENS
========================================================= */
:root {
  /* Brand */
  --tq-black:      #05060A;
  --tq-dark:       #0B0E14;
  --tq-dark-2:     #141821;
  --tq-dark-3:     #1E2330;

  --tq-red:        #E50914;
  --tq-red-2:      #FF2B35;
  --tq-red-glow:   rgba(229, 9, 20, .55);

  --tq-blue:       #0A84FF;
  --tq-blue-2:     #29B6FF;
  --tq-blue-glow:  rgba(41, 182, 255, .55);

  /* Surfaces */
  --tq-bg:         #F4F6FA;
  --tq-surface:    #FFFFFF;
  --tq-surface-2:  #FAFBFD;

  /* Text */
  --tq-text:       #0E1320;
  --tq-text-2:     #2A3142;
  --tq-muted:      #6B7385;
  --tq-silver:     #C9CDD3;

  /* Effects */
  --tq-radius:     18px;
  --tq-radius-sm:  12px;
  --tq-radius-lg:  24px;

  --tq-shadow-sm:  0 4px 14px rgba(11, 14, 20, .06);
  --tq-shadow:     0 12px 30px rgba(11, 14, 20, .09);
  --tq-shadow-lg:  0 22px 48px rgba(11, 14, 20, .15);
  --tq-shadow-red: 0 14px 34px rgba(229, 9, 20, .28);

  --tq-grad-red:   linear-gradient(135deg, #FF2B35 0%, #E50914 55%, #B3060F 100%);
  --tq-grad-blue:  linear-gradient(135deg, #29B6FF 0%, #0A84FF 100%);
  --tq-grad-mix:   linear-gradient(90deg, #E50914 0%, #FF2B35 35%, #0A84FF 100%);
  --tq-grad-dark:  linear-gradient(135deg, #05060A 0%, #0B0E14 50%, #141821 100%);

  --tq-ease:       cubic-bezier(.22,.61,.36,1);
}

/* =========================================================
   2) BASE
========================================================= */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html { scroll-behavior: smooth; }

body {
  background: var(--tq-bg) !important;
  color: var(--tq-text) !important;
  font-family: "Tajawal", "Cairo", "Segoe UI", Arial, sans-serif !important;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0;
}

a { color: var(--tq-blue); text-decoration: none; transition: color .25s var(--tq-ease); }
a:hover { color: var(--tq-red); }

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--tq-red); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--tq-bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--tq-red), #8a060d);
  border-radius: 99px;
}

/* Container */
.container,
.main-content,
.page-content,
.home-page,
main {
  max-width: 1240px;
  margin-right: auto !important;
  margin-left: auto !important;
}

section, .section { margin-top: 36px !important; margin-bottom: 36px !important; }

/* =========================================================
   3) HEADER / NAVBAR
========================================================= */
header, .store-header, .navbar, .main-header {
  background: var(--tq-grad-dark) !important;
  border-bottom: 1px solid rgba(229, 9, 20, .25) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
  position: relative;
  backdrop-filter: saturate(140%) blur(8px);
}

header::after,
.store-header::after,
.main-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--tq-grad-mix);
  opacity: .85;
}

header a, .store-header a, .navbar a, .main-header a {
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  position: relative;
}

header a:hover, .store-header a:hover, .navbar a:hover, .main-header a:hover {
  color: var(--tq-red-2) !important;
}

/* Hover effect for menu links (clean, no overlay) */
header nav a, .navbar nav a, .main-header nav a {
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color .25s var(--tq-ease), border-color .25s var(--tq-ease);
}
header nav a:hover,
.navbar nav a:hover,
.main-header nav a:hover {
  color: var(--tq-red-2) !important;
  border-bottom-color: var(--tq-red-2);
}

header svg, .store-header svg, .navbar svg, .main-header svg {
  fill: currentColor;
  color: #fff !important;
  transition: transform .25s var(--tq-ease);
}
header svg:hover, .store-header svg:hover, .navbar svg:hover, .main-header svg:hover {
  transform: scale(1.12);
}

/* Cart badge */
.cart-count, .header-cart .count, [class*="cart"] .badge {
  background: var(--tq-red) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  box-shadow: 0 0 0 2px var(--tq-dark);
}

/* =========================================================
   4) HERO / MAIN SLIDER
========================================================= */
.hero, .banner, .main-slider, .home-slider, .slider {
  position: relative;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: var(--tq-black) !important;
}

.hero img, .banner img, .main-slider img, .home-slider img, .slider img {
  width: 100%;
  transition: transform 8s ease-out;
}

.hero:hover img, .banner:hover img, .main-slider:hover img, .slider:hover img {
  transform: scale(1.03);
}

.hero h1, .hero h2, .hero h3,
.banner h1, .banner h2, .banner h3,
.main-slider h1, .main-slider h2, .main-slider h3,
.home-slider h1, .home-slider h2, .home-slider h3,
.slider h1, .slider h2, .slider h3 {
  color: #fff !important;
  font-weight: 900 !important;
  letter-spacing: -.5px;
  text-shadow: 0 4px 22px rgba(0, 0, 0, .55) !important;
}

.hero p, .banner p, .main-slider p, .home-slider p, .slider p,
.hero span, .banner span, .main-slider span, .home-slider span, .slider span {
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55) !important;
}

/* Slider dots */
.slick-dots li button:before,
.swiper-pagination-bullet {
  background: rgba(255,255,255,.55) !important;
  opacity: 1 !important;
}
.slick-dots li.slick-active button:before,
.swiper-pagination-bullet-active {
  background: var(--tq-red) !important;
  box-shadow: 0 0 14px var(--tq-red-glow);
}

/* Slider arrows */
.slick-arrow, .swiper-button-next, .swiper-button-prev {
  background: rgba(0,0,0,.55) !important;
  border-radius: 50% !important;
  width: 44px !important; height: 44px !important;
  color: #fff !important;
  transition: all .25s var(--tq-ease);
}
.slick-arrow:hover, .swiper-button-next:hover, .swiper-button-prev:hover {
  background: var(--tq-red) !important;
  box-shadow: 0 8px 22px var(--tq-red-glow);
}

/* =========================================================
   5) SECTION TITLES
========================================================= */
h1, h2, h3, h4 { color: var(--tq-text); letter-spacing: -.3px; }

.section-title,
section h2,
.section h2 {
  text-align: center !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  margin-bottom: 28px !important;
  color: var(--tq-text) !important;
  position: relative;
  padding-bottom: 14px;
}

.section-title::after,
section h2::after,
.section h2::after {
  content: "";
  display: block;
  width: 90px; height: 4px;
  margin: 12px auto 0;
  border-radius: 99px;
  background: var(--tq-grad-mix);
  box-shadow: 0 4px 14px rgba(229, 9, 20, .35);
}

/* =========================================================
   6) CATEGORY CARDS
========================================================= */
.category-card,
.category-item,
.categories .item,
.category-box {
  background: var(--tq-surface) !important;
  border: 1px solid rgba(11, 14, 20, .06) !important;
  border-radius: var(--tq-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--tq-shadow) !important;
  transition: transform .35s var(--tq-ease), box-shadow .35s var(--tq-ease), border-color .35s var(--tq-ease) !important;
  position: relative;
}

.category-card::before,
.category-item::before,
.categories .item::before,
.category-box::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--tq-grad-mix);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s var(--tq-ease);
  pointer-events: none;
}

.category-card:hover,
.category-item:hover,
.categories .item:hover,
.category-box:hover {
  transform: translateY(-6px);
  box-shadow: var(--tq-shadow-lg) !important;
}
.category-card:hover::before,
.category-item:hover::before,
.categories .item:hover::before,
.category-box:hover::before { opacity: 1; }

.category-card img,
.category-item img,
.categories .item img,
.category-box img {
  width: 100% !important;
  border-radius: 14px !important;
  transition: transform .5s var(--tq-ease);
}
.category-card:hover img,
.category-item:hover img,
.categories .item:hover img,
.category-box:hover img { transform: scale(1.04); }

.category-card .title,
.category-item .title,
.category-box .title,
.categories .item .title {
  color: var(--tq-text) !important;
  font-weight: 800 !important;
}

/* =========================================================
   7) PROMO BANNERS
========================================================= */
.promo-banner,
.home-banner,
section .banner,
.section .banner {
  border-radius: var(--tq-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--tq-shadow) !important;
  transition: transform .35s var(--tq-ease), box-shadow .35s var(--tq-ease);
}
.promo-banner:hover,
.home-banner:hover,
section .banner:hover,
.section .banner:hover {
  transform: translateY(-3px);
  box-shadow: var(--tq-shadow-lg) !important;
}

/* =========================================================
   8) PRODUCT CARDS
========================================================= */
.product-card,
.product-item,
.store-product,
.product-box,
.products-list .item,
.products-grid .item {
  background: var(--tq-surface) !important;
  border: 1px solid rgba(11, 14, 20, .07) !important;
  border-radius: var(--tq-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--tq-shadow-sm) !important;
  transition: transform .35s var(--tq-ease), box-shadow .35s var(--tq-ease), border-color .35s var(--tq-ease) !important;
  padding-bottom: 14px !important;
  position: relative;
}

.product-card:hover,
.product-item:hover,
.store-product:hover,
.product-box:hover,
.products-list .item:hover,
.products-grid .item:hover {
  transform: translateY(-8px);
  box-shadow: var(--tq-shadow-lg) !important;
  border-color: rgba(229, 9, 20, .25) !important;
}

/* Image */
.product-card img,
.product-item img,
.store-product img,
.product-box img,
.products-list .item img,
.products-grid .item img {
  width: 100% !important;
  height: 250px !important;
  object-fit: contain !important;
  background: linear-gradient(180deg, #fff 0%, #f4f6fa 100%) !important;
  padding: 16px !important;
  transition: transform .5s var(--tq-ease);
}
.product-card:hover img,
.product-item:hover img,
.store-product:hover img,
.product-box:hover img,
.products-list .item:hover img,
.products-grid .item:hover img {
  transform: scale(1.06);
}

/* Title */
.product-card h3, .product-item h3, .store-product h3, .product-box h3,
.product-card .title, .product-item .title, .store-product .title, .product-box .title,
.products-list .item h3, .products-grid .item h3 {
  color: var(--tq-text) !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
  margin: 12px 14px 8px !important;
  min-height: 46px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Price */
.price, .product-price, .sale-price, .current-price {
  color: var(--tq-red) !important;
  font-weight: 900 !important;
  font-size: 16px !important;
}

.old-price, .compare-price, .price-before, .regular-price {
  color: var(--tq-muted) !important;
  text-decoration: line-through !important;
  font-size: 13px !important;
  margin-inline-start: 6px;
}

.price, .product-price, .price-wrapper {
  margin-right: 14px !important;
  margin-left: 14px !important;
}

/* Discount badge */
.badge, .discount-badge, .sale-badge, .tag-sale {
  background: var(--tq-grad-red) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  box-shadow: 0 6px 16px var(--tq-red-glow);
  letter-spacing: .3px;
}

/* Star rating in card */
.product-card .stars, .product-item .stars,
.product-card .rating, .product-item .rating {
  margin: 0 14px 6px !important;
}

/* =========================================================
   9) BUTTONS
========================================================= */
button, .btn, .button, a.btn,
input[type="submit"],
.add-to-cart, .add-to-cart-btn,
.product-form button {
  background: var(--tq-grad-red) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .3px;
  padding: 10px 18px !important;
  position: relative;
  overflow: hidden;
  transition: transform .25s var(--tq-ease), box-shadow .25s var(--tq-ease), background .35s var(--tq-ease) !important;
  box-shadow: 0 10px 22px var(--tq-red-glow) !important;
  cursor: pointer;
}

button::before, .btn::before, .button::before,
.add-to-cart::before, .add-to-cart-btn::before,
.product-form button::before {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transition: left .6s var(--tq-ease);
}

button:hover, .btn:hover, .button:hover, a.btn:hover,
input[type="submit"]:hover,
.add-to-cart:hover, .add-to-cart-btn:hover,
.product-form button:hover {
  background: linear-gradient(135deg, #FF2B35 0%, #0A84FF 100%) !important;
  color: #fff !important;
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(10, 132, 255, .35) !important;
}

button:hover::before, .btn:hover::before, .button:hover::before,
.add-to-cart:hover::before, .add-to-cart-btn:hover::before,
.product-form button:hover::before { left: 130%; }

button:active, .btn:active, .button:active { transform: translateY(0); }

/* Secondary / outline button */
.btn-outline, .button-outline, .btn-secondary {
  background: transparent !important;
  color: var(--tq-text) !important;
  border: 2px solid var(--tq-dark-3) !important;
  box-shadow: none !important;
}
.btn-outline:hover, .button-outline:hover, .btn-secondary:hover {
  background: var(--tq-text) !important;
  color: #fff !important;
}

/* Product card buttons */
.add-to-cart, .add-to-cart-btn, .product-form button {
  margin: 12px 14px 0 !important;
  min-height: 44px !important;
  width: calc(100% - 28px);
}

/* =========================================================
   10) FORMS / SEARCH
========================================================= */
input, textarea, select {
  background: #fff !important;
  color: var(--tq-text) !important;
  border: 1.5px solid rgba(11, 14, 20, .12) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  transition: border-color .25s var(--tq-ease), box-shadow .25s var(--tq-ease) !important;
  font-family: inherit;
}

input::placeholder, textarea::placeholder { color: var(--tq-muted); }

input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--tq-blue) !important;
  box-shadow: 0 0 0 4px rgba(10, 132, 255, .15) !important;
}

/* Search bar in header */
header input, .navbar input, .store-header input {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.15) !important;
}
header input::placeholder { color: rgba(255,255,255,.65) !important; }
header input:focus {
  background: rgba(255,255,255,.14) !important;
  border-color: var(--tq-red-2) !important;
  box-shadow: 0 0 0 3px rgba(229,9,20,.25) !important;
}

/* =========================================================
   11) TESTIMONIALS / REVIEWS
========================================================= */
.testimonial,
.review-card,
.reviews .item,
.testimonials .item {
  background: var(--tq-surface) !important;
  border: 1px solid rgba(11, 14, 20, .07) !important;
  border-radius: var(--tq-radius) !important;
  box-shadow: var(--tq-shadow-sm) !important;
  padding: 22px !important;
  transition: transform .3s var(--tq-ease), box-shadow .3s var(--tq-ease);
  position: relative;
}
.testimonial:hover,
.review-card:hover,
.reviews .item:hover,
.testimonials .item:hover {
  transform: translateY(-4px);
  box-shadow: var(--tq-shadow) !important;
}

.testimonial::before,
.review-card::before {
  content: "“";
  position: absolute;
  top: 8px; right: 18px;
  font-size: 64px;
  color: var(--tq-red);
  opacity: .14;
  font-family: Georgia, serif;
  line-height: 1;
}

.star, .stars, .rating i { color: #FFC107 !important; }

/* =========================================================
   12) GALLERY
========================================================= */
.gallery, .image-gallery {
  display: grid;
  gap: 14px;
}

.gallery img, .image-gallery img, .gallery-item img {
  border-radius: 14px !important;
  overflow: hidden;
  transition: transform .35s var(--tq-ease), box-shadow .35s var(--tq-ease);
  box-shadow: var(--tq-shadow-sm);
}

.gallery img:hover,
.image-gallery img:hover,
.gallery-item img:hover {
  transform: scale(1.04);
  box-shadow: var(--tq-shadow-lg);
}

/* =========================================================
   13) PAYMENT BANNER
========================================================= */
.payment-banner, .payments-banner {
  border-radius: var(--tq-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--tq-shadow) !important;
}

/* =========================================================
   14) FOOTER
========================================================= */
footer, .footer, .store-footer, .s-footer, .footer-wrapper {
  background: linear-gradient(180deg, #FFFFFF 0%, #EEF1F6 100%) !important;
  color: var(--tq-text) !important;
  border-top: 3px solid transparent !important;
  border-image: var(--tq-grad-mix) 1;
  padding-top: 40px !important;
  padding-bottom: 20px !important;
  position: relative;
}

footer *, .footer *, .store-footer *, .s-footer *, .footer-wrapper * {
  color: var(--tq-text-2) !important;
}

footer a, .footer a, .store-footer a, .s-footer a, .footer-wrapper a {
  color: var(--tq-text) !important;
  font-weight: 600 !important;
  transition: color .2s var(--tq-ease);
}

footer a:hover, .footer a:hover, .store-footer a:hover, .s-footer a:hover, .footer-wrapper a:hover {
  color: var(--tq-red) !important;
}

footer h3, footer h4, .footer h3, .footer h4, .s-footer h3, .s-footer h4 {
  color: var(--tq-black) !important;
  font-weight: 900 !important;
  letter-spacing: -.2px;
}

footer hr, .footer hr, .s-footer hr {
  border-color: #D9DDE3 !important;
  opacity: 1 !important;
}

/* Social icons */
.social a, footer .social a, .footer .social a {
  width: 42px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border: 1px solid #D9DDE3 !important;
  border-radius: 50% !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .07) !important;
  transition: transform .25s var(--tq-ease), background .25s var(--tq-ease), color .25s var(--tq-ease) !important;
  margin: 0 4px;
}

.social a:hover, footer .social a:hover, .footer .social a:hover {
  background: var(--tq-grad-red) !important;
  border-color: transparent !important;
  color: #fff !important;
  transform: translateY(-3px) rotate(-6deg);
  box-shadow: 0 10px 20px var(--tq-red-glow) !important;
}
.social a:hover svg, footer .social a:hover svg { color: #fff !important; fill: #fff !important; }

/* =========================================================
   15) FLOATING BUTTONS
========================================================= */
.whatsapp, .whatsapp-btn, [class*="whatsapp"] {
  background: #25D366 !important;
  color: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 10px 24px rgba(37, 211, 102, .45) !important;
  transition: transform .25s var(--tq-ease) !important;
}
.whatsapp:hover, .whatsapp-btn:hover, [class*="whatsapp"]:hover {
  transform: scale(1.08);
}
.whatsapp::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(37,211,102,.5);
  animation: tq-pulse 1.8s ease-out infinite;
}

@keyframes tq-pulse {
  0%   { transform: scale(.9); opacity: .9; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* =========================================================
   16) ANIMATIONS
========================================================= */
@keyframes tq-fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.product-card, .product-item, .category-card, .testimonial,
.promo-banner, .home-banner {
  animation: tq-fadeUp .6s var(--tq-ease) both;
}

/* =========================================================
   17) RESPONSIVE
========================================================= */
@media (max-width: 992px) {
  .section-title, section h2, .section h2 { font-size: 26px !important; }
}

@media (max-width: 768px) {
  .container, .main-content, .page-content, .home-page, main {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  .section-title, section h2, .section h2 {
    font-size: 22px !important;
    margin-bottom: 18px !important;
  }

  .product-card img,
  .product-item img,
  .store-product img,
  .product-box img,
  .products-list .item img,
  .products-grid .item img {
    height: 190px !important;
    padding: 10px !important;
  }

  .product-card h3,
  .product-item h3,
  .store-product h3,
  .product-box h3,
  .products-list .item h3,
  .products-grid .item h3 {
    font-size: 14px !important;
    min-height: 40px;
  }

  .price, .product-price, .sale-price, .current-price { font-size: 15px !important; }

  .category-card img,
  .category-item img,
  .categories .item img,
  .category-box img { height: auto !important; }

  section, .section { margin-top: 24px !important; margin-bottom: 24px !important; }

  .hero h1, .banner h1, .slider h1 { font-size: 22px !important; }
}

@media (max-width: 480px) {
  .section-title, section h2, .section h2 { font-size: 20px !important; }
  .add-to-cart, .add-to-cart-btn { font-size: 13px !important; min-height: 40px !important; }
}

/* =========================================================
   18) UTILS
========================================================= */
.tq-glow-red   { box-shadow: 0 0 24px var(--tq-red-glow); }
.tq-glow-blue  { box-shadow: 0 0 24px var(--tq-blue-glow); }
.tq-text-grad  { background: var(--tq-grad-mix); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tq-divider    { height: 2px; background: var(--tq-grad-mix); border: 0; border-radius: 2px; }