/* Add custom CSS styles below */

/* General start */
:root {
  --main-color: rgb(255 255 255);
  --second-color: #a9a9a900;
  --ss-color: #ffffff;
  --third-color: rgb(29 33 128 / 49%);
  --text-color: #ffffff;
  --back-color: #7958f524;
  --black-color: #ffffff;
  --card-color: rgb(139 145 236);
  --ff-color: rgb(255 255 255);
  --gold-1: #b9666600;         /* ذهبى أساسي */
  --gold-2: #c9747400;         /* هايلايت */
  --shape-opacity: 0.45;     /* شفافية الأشكال */
  --shape-blur: 0.6px;       /* نعومة بسيطة */
  --max-size: 34px;          /* أقصى حجم للشكل */
  --min-size: 8px;           /* أقل حجم */
  --z-layer: 0;              /* طبقة تحت المحتوى */
}


/* حاوية الأشكال */
#gold-bg-shapes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-layer);
  overflow: hidden;
}

/* نضمن إن المحتوى فوق الطبقة */
header, .header, .page, main, footer, .footer, .container, #app {
  position: relative;
  z-index: 1;
}

/* الشكل العام */
#gold-bg-shapes .shape {
  position: absolute;
  bottom: -12vh; /* يبدأ من تحت الشاشة */
  opacity: var(--shape-opacity);
  filter: blur(var(--shape-blur));
  animation:
    float-up var(--dur, 28s) linear infinite,
    sway    var(--sway, 6s) ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* دوائر */
#gold-bg-shapes .circle {
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, var(--gold-2), var(--gold-1));
  box-shadow: 0 0 10px rgb(127 127 127 / 17%), 0 0 2px rgb(0 0 0 / 24%) inset;
}

/* مُعيّن (دايموند) */
#gold-bg-shapes .diamond {
  background: linear-gradient(145deg, var(--gold-2), var(--gold-1));
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(212,175,55,0.3);
}

/* مثلث (border trick) */
#gold-bg-shapes .triangle {
  width: 0; height: 0;
  border-left: calc(var(--sz, 18px) / 2) solid transparent;
  border-right: calc(var(--sz, 18px) / 2) solid transparent;
  border-bottom: var(--sz, 18px) solid var(--gold-1);
  /* لمعان بسيط */
  filter: drop-shadow(0 0 6px rgba(212,175,55,0.35));
}

/* نقاط صغيرة */
#gold-bg-shapes .dot {
  border-radius: 999px;
  width: 4px; height: 4px;
  background: var(--gold-2);
  opacity: 0.55;
}

/* الحركة الرأسية */
@keyframes float-up {
  from { transform: translate3d(0, 8vh, 0) rotate(var(--rot, 0deg)); }
  to   { transform: translate3d(0, -115vh, 0) rotate(calc(var(--rot, 0deg) + 180deg)); }
}

/* تمايل أفقي لطيف */
@keyframes sway {
  from { translate: -12px 0; }
  to   { translate: 12px 0; }
}

/* تقليل حركة للي مفعّل النظام */
@media (prefers-reduced-motion: reduce) {
  #gold-bg-shapes .shape {
    animation: none;
  }
}

/* خيار: تغميق طفيف لو الخلفية فاتحة جداً */
body.has-gold-overlay::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 0%, transparent 60%, rgba(0,0,0,0.06) 100%);
  z-index: 0;
}

/* General End */

/* Body */
body {
  /* background: url(https://i.postimg.cc/wTr0zQgj/Artboard-49.png); */
  background-color: #030633 !important;
  background-position: center center;
  background-size: cover;
  box-sizing: border-box;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

body:after {
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  position: fixed;
  z-index: 999;
  background: transparent
    url(https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/pQrgwz/Paw19xWIVOSuuVo2hKMpUwGpixXPgxtmcnLkmKXM.png);
  left: 0;
  backdrop-filter: blur(3px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 320px;
  animation-name: fade-in;
  animation-duration: 1.8s;
  transform: scale(0);
  border: none;
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  25% {
    opacity: 0.8;
    transform: scale(0.6);
  }

  50% {
    opacity: 1;
    transform: scale(1);
    rotate: 5deg;
  }
  90% {
    opacity: 0.6;
    transform: scale(0.5);
  }

  100% {
    opacity: 0;
    transform: scale(0.3);
    rotate: -5deg;
  }
}


.s-search-input {
  background-color: transparent !important;
  box-shadow: 0 1px 5px 0 var(--back-color);
  border: 1px solid var(--main-color) !important;
  width: 100% !important;
  border-radius: 5px !important;
}

/* NavBar start */

#mainnav,
.bg-inherit {
  /* background-color: var(--second-color);*/
  border-radius: 20px;
  border-top: 2px solid var(--main-color) !important;
  border-bottom: 2px solid var(--third-color) !important;
  background: #1c2c7d;
  box-shadow: 0 2px 10px var(--back-color) !important;
  z-index: 999999999999999 !important;
}

.bg-inherit .container {
  backdrop-filter: blur(3px);
  border-radius: 20px;
  border-bottom: 2px solid var(--third-color) !important;
}

.hydrated {
  color: var(--text-color);
}

.main-menu {
  color: var(--text-color);
  background: var(--second-color);
}
#mainnav .navbar-brand {
  animation-name: logo;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  scale: 1.1;
}

@keyframes logo {
  0% {
  }

  40% {
    transform: rotate(2deg);
    transform: scale(0.9);
  }
  80% {
    transform: rotate(-2deg);
  }

  100% {
    transform: scale(1);
  }
}

.main-menu::after {
  font-size: 0rem;
  color: transparent;
  background-image: url(https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/pQrgwz/Paw19xWIVOSuuVo2hKMpUwGpixXPgxtmcnLkmKXM.png);
  background-size: 50%;
  background-repeat: no-repeat;
  scale: 1;
  line-height: 2;
  background-position: center;
  margin-bottom: 50px;
  margin-top: 20px;
  height: 180px !important;
  animation-name: foot;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

.header-btn__icon {
  color: var(--third-color);
  border: 0px solid var(--main-color);
  border-radius: 25px 25px 15px 15px;
  background-size: 500% auto;
}

.main-menu li:hover {
  color: var(--third-color);
  transition: 0.3s;
}
.main-menu li a span {
  color: var(--text-color) !important;
}
.main-menu li a span:hover {
  color: var(--main-color) !important;
  scale: 1.05;
  transition: 0.2s;
}

.mobile-menu {
  color: var(--text-color) !important;
  background-color: #1c2c7d !important;
}

.sicon-user-circle:hover::before {
  color: var(--third-color);
}
.s-cart-summary-total {
  color: var(--text-color) !important;
}
.sicon-menu {
  color: var(--text-color) !important;
}
.sicon-menu:hover {
  color: var(--third-color) !important;
  rotate: 360deg;
  transition: 0.2s;
}
.header-btn__icon {
  border: none;
  color: var(--text-color);
  border: 1px solid var(--main-color);
}
.header-btn__icon:hover {
  color: var(--third-color) !important;
  transition: 0.4s;
  scale: 1.03;
}
.header-btn:hover {
  border: none;
  color: var(--third-color);
  transition: 0.3s;
  scale: 1.04;
}

.s-cart-summary-total {
  color: var(--text-color);
}

@media only screen and (max-width: 1024px) {
  .mm-spn.mm-spn--light {
    color: var(--second-color);
    background: rgb(182 199 255);
  }
  .btn--close:hover {
    rotate: 360deg;
    scale: 1.1;
    transition: 0.3s;
  }
}
/* NavBar End */

/*قـــائمــة عنـــاصــــر*/

.square-photos {
  width: 48%;
  height: 180px;
  transition-duration: 0.5s;
  transition-property: scale;
  background: transparent;
}
.lazy__bg {
  scale: 2.5;
}
.square-photos:hover {
  scale: 1.07;
  transition: 0.4s;
}

.grid-flow-row {
  width: 100%;
  display: flex;
  justify-content: center;
}

@media (min-width: 1024px) {
  .square-photos {
    width: 48%;
    height: 400px;
    transition-duration: 0.5s;
    transition-property: scale;
    background: transparent;
  }
  .s-block--fixed-banner img {
    scale: 1.075 !important;
  }
  .lazy__bg {
    scale: 1.9;
  }
}

/* Banners */
.s-block--fixed-banner img {
  background: none;
  border-radius: 0px 0px 0px 0px;
}

section:nth-of-type(1) {
  .container a {
    width: 100% !important;
    height: auto;
    display: block;
    scale: 1.06;
  }
}

/* Title */

.s-breadcrumb-wrapper {
  transform: translateY(0px);
  border: none !important;
}
h2::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -15px;
  background-color: var(--third-color);
  height: 4px;
  box-sizing: border-box;
  width: 100%;
  border-radius: 5px;
  align-items: center;
  margin-bottom: 10px !important;
}
.s-slider-block__title h2:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -25px;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background-color: var(--main-color);
  z-index: 111;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: MOVE-BG;
  animation-name: MOVE-BG;
}
@keyframes MOVE-BG {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(80px);
    transform: translateX(80px);
  }
}
.s-slider-block__title h2 {
  font-size: 1rem;
  font-weight: 900;
  color: var(--text-color);
}
.s-slider-block__title h2:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  background-color: var(--ff-color);
  height: 4px;
  box-sizing: border-box;
  width: 100%;
  z-index: 0;
  border-radius: 5px;
}

.s-slider-block__title h2 {
  text-align: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: auto;
  background: linear-gradient(
    to right,
    var(--text-color) 20%,
    var(--main-color) 30%,
    var(--text-color) 70%,
    var(--main-color) 80%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-size: 500% auto;
  animation: textShine 5s ease-in-out infinite alternate;
}

@keyframes textShine {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

.s-slider-block__display-all {
  border-left: 2px solid var(--main-color) !important;
  color: var(--text-color);
  padding: 10px;
  border-radius: 5px;
}
.starting-or-normal-price h2,
.s-quantity-input-input,
.sticky-product-bar__quantity .form-label {
  color: #b6c2ff;
}
.font-bold {
  color: var(--text-color);
  padding: 10px;
  border-right: 5px solid var(--third-color) !important;
  border-radius: 20px;
}
.article--main p {
  color: var(--text-color);
}
.article--main {
  color: var(--text-color);
}
/* Card */

.swiper-wrapper {
  padding: 10px;
}
.s-product-card-entry {
  background: transparent;
  height: 400px;
  color: var(--main-color);
  text-align: center !important;
  border-radius: 20px 20px 20px 20px;
  box-shadow: 0px 2px 2px var(--back-color);
  z-index: 999 !important;
}

.s-product-card-content-sub {
  display: grid;
  justify-content: center !important;
  align-items: center !important;
}

.s-product-card-content {
  text-align: center;
}
.s-product-card-content .s-product-card-content-main {
  order: 2 !important;
}
.s-product-card-content .s-product-card-content-sub {
  order: 3 !important;
}
.s-product-card-content .s-product-card-price {
  order: 4 !important;
}
.s-product-card-content .s-product-card-content-footer {
  order: 5 !important;
}
.s-product-card-vertical .s-product-card-wishlist-btn button {
  border: none !important;
  position: absolute;
  top: 8px;
  left: 8px;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--third-color) !important;
  padding: 5px;
  color: var(--main-color) !important;
  border-radius: 10px 10px 10px 2px !important;
  cursor: pointer;
}
.py-8 {
  background: transparent;
}
.s-product-card-entry .s-product-card-image {
  border-radius: 20px 20px 0px 0px;
  scale: 1;
  width: 100%;
}
.s-product-card-content-title a {
  color: var(--text-color);
}
.s-product-card-content-title a:hover {
  color: var(--main-color);
}

.s-product-card-entry:hover {
  box-shadow: 0px 2px 6px var(--back-color);
  transition: 0.5s;
  scale: 0.98;
  border: 2px solid var(--main-color);
  border-radius: 20px 20px 20px 20px;
  .s-product-card-image {
    border-radius: 20px 20px 0px 0px;
    scale: 0.99;
    transition: 0.5s;
    border: 1px solid var(--text-color);
    box-shadow: 1px 1px 0px var(--back-color);
  }
}
.s-button-element {
  border: 1px solid var(--third-color);
  background: var(--third-color);
  border-radius: 15px 20px 15px 20px;
  border: 2px solid var(--main-color);
  color: var(--text-color);
  width: auto;
  box-shadow: 0px 2px 3px var(--card-color);
}

.s-button-element .sicon-shopping-bag {
  color: var(--main-color);
  font-weight: bold;
}
.s-button-element:hover {
  background: var(--main-color);
  border: 2px solid var(--third-color);
  color: var(--black-color);
  transition: 0.5s;
  scale: 1.01;
  box-shadow: 0px 2px 3px var(--ff-color);
  .sicon-shopping-bag {
    color: var(--third-color);
    font-weight: bold;
  }
}

/* Footer */
.footer-is-light .store-footer .store-footer__inner {
  --tw-bg-opacity: 1;
  background: rgba(210, 170, 66, 0.2) !important;
  color: var(--text-color);
  border-radius: 100px 100px 10px 10px;
  font-weight: 500;
  text-align: center;
  border-right: 3px solid var(--main-color);
  border-left: 3px solid var(--text-color);
  scale: 0.93;
  box-shadow: 0 2px 15px var(--back-color) !important;
}
.footer-is-light .store-footer .store-footer__inner::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 4px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(to right, var(--text-color), var(--main-color));
}

.footer-is-light .store-footer .store-footer__inner::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  z-index: -1;
  background: linear-gradient(45deg, rgb(182 201 235), #697dc5, rgb(189 207 239));
  background-size: 300% 300%;
  border-radius: inherit;
  animation: gradientBorder 5s infinite;
}

@keyframes gradientBorder {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.store-footer h3 {
  text-align: center !important;
  padding: 1rem;
  /* border-radius: 50px; */
  color: rgb(0 0 0);
  font-size: 1.4rem;
}

.store-footer h3:hover {
  color: var(--black-color);
  opacity: 1;
  cursor: pointer;
  transition: 0.5s;
}

a.flex.items-center.m-0 {
  display: flex;
  flex-direction: column;
}
.copyright-text a {
  color: var(--black-color) !important;
}
.s-payments-list {
  background: var(--third-color);
  padding: 10px;
  border-radius: 50px 50px 10px 10px;
}

.s-payments-list .s-payments-list-item img {
  box-shadow: 0 2px 6px var(--text-color) !important;
}
.store-footer a h3:nth-child(1) {
  font-size: 0rem;
  background-image: url(https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/pQrgwz/Paw19xWIVOSuuVo2hKMpUwGpixXPgxtmcnLkmKXM.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 90px;
  height: 90px;
  margin: 1px auto 1px auto;
  animation: foot 5s infinite;
}
salla-apps-icons,
salla-apps-icons h3 {
  display: none;
}

@keyframes foot {
  0% {
    transform: scale(1.2);
  }
  5% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(1);
  }
  55% {
    transform: scale(1.2);
  }
  60% {
    transform: scale(1);
  }
  65% {
    transform: scale(1.2);
  }
  95% {
    transform: scale(1);
  }
}
@media (min-width: 1024px) {
  .rtl\:lg\:pr-20:where([dir="rtl"], [dir="rtl"] *) {
    padding-right: 5rem;
    background: var(--card-color);
    background-repeat: no-repeat;
    background-size: contain;
    scale: 0.7;
    line-height: 0;
    margin-bottom: 0;
    margin-top: 0;
  }
}
.footer-list {
  color: var(--black-color);
}
.store-footer__inner .max-w-sm {
  color: var(--text-color);
}
.s-contacts-list {
  align-items: center !important;
}

.store-footer a {
  color: var(--text-color);
}
.store-footer a:hover {
  color: var(--black-color);
  opacity: 1;
  transform: scale(1.03);
  transition: 0.4s;
}

.footer-is-light .store-footer {
  --tw-bg-opacity: 1;
  --tw-text-opacity: 1;
  color: var(--black-color);
  background: transparent;
  border-radius: 200px 200px 0 0;
}

.s-social-list {
  display: flex;
  gap: 0.625rem;
  justify-content: center;
}

.lg\:col-span-2.rtl\:lg\:pl-20.ltr\:lg\:pr-20 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s-menu-footer-list {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s-contacts-list.s-contacts-list-vertical {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

span.unicode {
  display: none;
}

.footer-is-light .store-footer .contact-social {
  border: none;
}

.text-center::before {
  content: " برمجة و تطوير | ADFAZ";
  font-size: 16px;
  font-weight: 700;
  background: linear-gradient(
    90deg,
    var(--third-color),
    var(--text-color),
    var(--third-color)
  );
  -webkit-background-clip: text;
  color: transparent;
  padding: 8px 0 !important;
  display: inline-block;
  animation: colorChange 3s infinite;
  background-size: 200% 200%;
  text-shadow: none;
  border-radius: 5px;
}

@keyframes colorChange {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#scrollToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background-color: var(--main-color);
  color: #000;
  border: none;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-size: 30px;
  cursor: pointer;
  display: none;
  z-index: 1000;
  box-shadow: 0 4px 6px rgba(0,  0,  0,  0.2);
}
.copyright-text a {
  color: var(--text-color) !important;
}
.copyright-text p {
  color: var(--third-color) !important;
}
.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, 1);
    background-color: rgb(255 255 255 / 0%);
}
section {
  opacity: 0;
  transform: translateY(50px); /* Slide up effect */
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

section.visible {
  opacity: 1;
  transform: translateY(0);
}