/* Add custom CSS styles below */

/* ✅ الهيدر والفوتر يمتدان للطرفين */
.store-header,
.main-nav-container,
.top-navbar,
.store-footer,
.footer-is-light,
.store-footer__inner {
  width: 100% !important;
}

/* ✅ المحتوى داخل الهيدر والفوتر والصفحة - مسافة داخلية 10px */
.store-header .container,
.main-nav-container .container,
.top-navbar .container,
.store-footer .container,
.footer-is-light .container,
.store-footer__inner,
.page-content,
.s-page-content,
.store-content,
main,
section {
  box-sizing: border-box;
  padding-left: 20px !important;
  padding-right: 20px !important;
  margin-left: auto;
  margin-right: auto;
  max-width: 100% !important;
}

/* 📱 للشاشات الصغيرة */
@media (max-width: 640px) {
  .store-header .container,
  .main-nav-container .container,
  .top-navbar .container,
  .store-footer .container,
  .footer-is-light .container,
  .store-footer__inner,
  .page-content,
  .s-page-content,
  .store-content,
  main,
  section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* 💻 للشاشات الكبيرة */
@media (min-width: 1280px) {
  .store-header .container,
  .main-nav-container .container,
  .top-navbar .container,
  .store-footer .container,
  .footer-is-light .container,
  .store-footer__inner,
  .page-content,
  .s-page-content,
  .store-content,
  main,
  section {
    padding-left: 45px !important;
    padding-right: 45px !important;
  }
}











.navbar-brand img {
    max-height: 6rem;   /* كان 3rem → تكبير بسيط */
    max-width: 140px;   /* كان 100px → تكبير بسيط */
    width: auto;
    transition: all 0.3s ease; /* حركة ناعمة في التغيير */
}






/* تكبير النصوص والعناصر في الأقسام المشتركة (مثل الفوتر والهيدر) */ 
.top-navbar {
    display: flex;
    min-height: 48px;
    padding-bottom: .5rem;
    padding-top: .5rem;
    background-color: #9B5849; /* لون بني-طوبي */
    color: #fff; /* لجعل النص أبيض وواضح فوق اللون */
}


.top-navbar .s-search-input {
    background-color: #ffffff !important; /* خلفية بيضاء */
    border-style: none;
    color: #333333; /* نص واضح فوق الأبيض */
}












/* الزر في حالته الأصلية يبقى بلونه الأصلي */

/* 🔘 الزر في حالته العادية */
.s-button-btn {
    border-radius: .75rem;
    background-color: #9B5849 !important; /* اللون الأساسي */
    color: #ffffff !important; /* النص أبيض وواضح */
    font-size: 1.1rem; /* تكبير النص */
    font-weight: 600; /* وضوح أكثر */
    padding: 0.75rem 1.5rem; /* تباعد جميل */
    border: none;
    transition: all 0.3s ease;
}

/* 🔘 عند المرور أو اللمس */
.s-button-btn:hover,
.s-button-btn:focus,
.s-button-btn:active {
    background-color: #ffffff !important; /* يتحول إلى أبيض */
    color: #9B5849 !important; /* النص يصبح بنفس اللون الأساسي */
    border: 2px solid #9B5849 !important; /* حدود بنفس لون الزر */
}




















/*  القائمة  */




/*  الخلفيه  */
/*  الخلفيه  */
/*  الخلفيه  */

/* ✅ غطاء الخلفية الكامل للصفحة باستثناء الهيدر والفوتر */
body {
    background-color: #e5dbca !important;
}

/* تأكيد أن المحتوى الداخلي يأخذ نفس اللون */
main,
.page-content,
.s-page-content,
.store-content,
section {
    background-color: #e5dbca !important;
}

/* استثناء الهيدر والفوتر ليبقيا أبيضين */
.store-header,
.store-footer {
    background-color: #ffffff !important;
    position: relative;
    z-index: 10;
}

/* إصلاح أي فجوات بيضاء أو رمادية في الصفحة */
html, body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/* إزالة أي خلفية افتراضية عن أقسام تحتوي داخل الصفحة */
section:empty {
    background-color: #e5dbca !important;
}






























/*  (الفوتر) */
/*  (الفوتر) */
/*  (الفوتر) */

.footer-is-light .store-footer .store-footer__inner {
    --tw-border-opacity: 1;
    border-bottom-color: rgba(229, 231, 235, var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: #9B5849; /* اللون الجديد */
    color: #ffffff; /* نص أبيض وواضح */
    font-size: 1.05rem; /* تكبير بسيط للنص */
    font-weight: 500; /* وضوح أكثر للنص */
}

.store-footer__inner {
    border-bottom: 1px dashed rgba(255, 255, 255, .2);
    --tw-bg-opacity: 1;
    background-color: #9B5849; /* نفس اللون للبقاء على تناغم */
    color: #ffffff; /* نص أبيض */
    padding-bottom: 2rem;
    padding-top: 2rem;
    font-size: 1.05rem; /* تكبير الخط */
    font-weight: 500; /* وضوح الخط */
}




/*  (وسائل الدفع) */
.s-payments-list:where([dir=rtl],[dir=rtl] *)>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 1;
}

.s-payments-list-item {
    align-items: center;
    border-radius: .75rem;
    display: flex;
    height: 6rem; /* كان 2rem — تكبير بسيط */
    justify-content: center;
    width: 6rem;  /* كان 3rem — تكبير بسيط */
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1));
    padding: .35rem; /* تكبير خفيف للمساحة الداخلية */
    transition: transform 0.2s ease;
}

/* تأثير جميل عند المرور */
.s-payments-list-item:hover {
    transform: scale(1.1);
}

li, ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.justify-between {
    justify-content: space-between;
    font-size: 1.15rem; /* تكبير النصوص داخل هذا العنصر */
}

.items-center {
    align-items: center;
    font-size: 1.15rem; /* تكبير أي محتوى داخله */
}

.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
    font-size: 1.15rem; /* تكبير عام للعناصر داخل الحاوية */
}