/* ===============================
   Glory – Premium Optimized CSS
================================ */

/* Body */
body { background-color: #fdf6ee !important; }

/* ===============================
   Top Navbar (Visible, White)
================================ */
.top-navbar {
  display: block !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #eee;
}

.top-navbar i,
.top-navbar span,
button.header-btn i,
salla-cart-summary i,
b.s-cart-summary-total,
i.sicon-menu.text-primary.text-2xl {
  color: #1c7378 !important;
}

/* ===============================
   Main Navbar
================================ */
div#mainnav,
.main-nav-container.shadow-default.bg-white,
div.inner.bg-inherit {
  background-color: #deac80 !important;
  border-radius: 0 0 1.5rem 1.5rem !important;
}

/* ===============================
   Logo Animation
================================ */
.navbar-brand img {
  max-height: 3rem;
  border-radius: .8rem;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* ===============================
   Product Cards
================================ */
.s-product-card-entry,
.s-product-card-fit-height.s-product-card-vertical .s-product-card-image,
.s-product-card-image img {
  border-radius: 2rem;
  background: #fff;
  padding: 5px;
  transition: all 0.3s ease;
}

/* Hover effect for cards – subtle lift + shadow */
.s-product-card-entry:hover {
  transform: translateY(-4px);
  box-shadow: 0px 6px 12px rgba(99, 99, 99, 0.3);
}

.s-product-card-price,
.s-product-card-sale-price h4 {
  font-size: 1.3rem !important;
}

/* ===============================
   Buttons
================================ */
.s-button-element {
  pointer-events: auto;
  background-image: linear-gradient(to right, #1c7378, #215356) !important;
  border-radius: 50px;
  color: white;
  border: 0;
  box-shadow: rgba(99, 99, 99, 0.6) 0px 2px 8px;
  transition: all 0.3s ease;
}
.s-button-element:hover {
  background-image: linear-gradient(to left, #1c7378, #215356) !important;
  transform: scale(1.05);
}
button.undefined.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline.s-button-loader-center {
  animation: shake 1.5s infinite alternate-reverse;
}
@keyframes shake {
  0% { transform: translateX(2px); }
  25% { transform: translateX(-2px); }
  50% { transform: translateX(2px); }
  75% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

/* ===============================
   Titles / Headings
================================ */
div.s-block__title div.right-side,
.s-block__display-all,
.s-reviews-header,
.s-reviews-display-all,
.s-slider-block__title .s-slider-block__title-right,
.s-slider-block__title .s-slider-block__title-left,
.s-slider-block__title div {
  color: #215356;
  border: 2px solid #215356;
  border-radius: 5rem;
  padding: 0.7rem;
  background: #fdf6ee;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Hover effect for titles */
div.s-block__title div.right-side:hover,
.s-slider-block__title div:hover {
  transform: scale(1.05);
}

/* ===============================
   Footer
================================ */
footer.store-footer {
  border-top-left-radius: 60% 5% !important;
  border-top-right-radius: 60% 5% !important;
  background-color: #1c7378 !important;
}
.footer-is-light .store-footer .store-footer__inner {
  background-image: linear-gradient(180deg, #215356 0%, #215356 36%, #1c7378 75%) !important;
  color: white !important;
  border-top-left-radius: 60% 5% !important;
  border-top-right-radius: 60% 5% !important;
}
div.items-center.justify-between.py-4.container.text-center {
  background-color: #1c7378 !important;
}
.copyright-text p { color: white !important; }

/* ===============================
   Misc
================================ */
div.sc-1au8ryl-0.dkuywW { display:none !important; }
div.s-block--features__item {
  grid-column: span 1 / span 1 !important;
  background-color: rgba(255,255,255,0);
  transition-timing-function: cubic-bezier(0.4,0,0.2,0) !important;
}
.s-reviews-header-wrapper { display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; }
.s-reviews-testimonial { border-radius:2rem !important; }

/* ===============================
   Responsive Mobile
================================ */
@media(max-width:768px){
  nav#mobile-menu span { color:#1c7378 !important; }
  .header-btn__icon { height:2rem !important; width:2rem !important; }
  .banner--fixed img { border-radius:1.5rem !important; }
  .store-footer h3,.s-social-list,.s-menu-footer-list,.s-contacts-list { justify-content:center; text-align:center; }
  div.s-menu-footer-list { flex-direction:column; font-size:.75rem; }
  .s-menu-footer-item { font-size:.75rem; }
  div.s-contacts-list.s-contacts-list-vertical { flex-direction:row; flex-wrap:wrap; }
  p.max-w-sm.leading-6.mb-6 { flex-direction:column; }
  a.flex.items-center.m-0 { margin:2rem 0; justify-content:center; }
  a.flex.items-center.m-0 h3 { background-image:url(https://i.suar.me/LxYB6/l); height:40px; width:100px; background-repeat:no-repeat; color:rgba(0,0,0,0); border-radius:1rem; }
}

/* ===============================
   Responsive Desktop
================================ */
@media(min-width:1024px){
  .lg\:gap-6 { gap:1.5rem; display:flex; justify-content:center; }
  .main-menu .sub-menu { border-top-right-radius:.375rem; border-top-left-radius:.375rem; }
}

.main-nav-container.fixed-header .inner { padding:10px 0; }
/* تصحيح حقل الهاتف وكود التفعيل */
input[type="tel"],
input[name*="phone"],
input[name*="code"],
input.s-input-element {
  background-color: #ffffff !important; /* خلفية بيضاء */
  color: #1c2b2d !important; /* نص داكن */
  border: 1px solid #ccc !important; /* إطار خفيف */
  border-radius: 0.5rem !important; /* حواف ناعمة */
  padding: 0.6rem 1rem !important; /* مساحة داخلية للكتابة */
}

/* Placeholder للنص داخل الحقل */
input[type="tel"]::placeholder,
input[name*="phone"]::placeholder,
input[name*="code"]::placeholder {
  color: #999999 !important; /* لون فاتح للنص الوهمي */
}
/* ===============================
   تصحيح كامل لحقول الهاتف وكود التفعيل
================================ */

/* الحقول */
input[type="tel"],
input[name*="phone"],
input[name*="code"],
input.s-input-element,
input.s-input {
  background-color: #fdf6ee !important; /* خلفية فاتحة متناسقة مع المتجر */
  color: #1c2b2d !important; /* نص داكن واضح */
  border: 1px solid #ccc !important; /* إطار خفيف للفصل */
  border-radius: 0.5rem !important; /* حواف ناعمة */
  padding: 0.6rem 1rem !important; /* مساحة كتابة كافية */
  font-size: 1rem !important;
  font-weight: 500 !important;
  text-align: left !important;
}

/* Placeholder للنص داخل الحقل */
input[type="tel"]::placeholder,
input[name*="phone"]::placeholder,
input[name*="code"]::placeholder {
  color: #999999 !important; /* نص وهمي واضح */
  opacity: 1 !important; /* أحيانًا يكون شبه شفاف */
}

/* التركيز على الحقل عند النقر */
input[type="tel"]:focus,
input[name*="phone"]:focus,
input[name*="code"]:focus,
input.s-input-element:focus {
  outline: none !important;
  border-color: #1c7378 !important; /* يبرز عند التركيز */
  box-shadow: 0 0 5px rgba(28, 115, 120, 0.4) !important;
  background-color: #ffffff !important; /* يضمن الوضوح عند الكتابة */
  color: #1c2b2d !important;
}