/* Import comprehensive variables */
@import url('variables.css');
/* fallback */
@font-face {font-family: 'Material Icons';font-style: normal;font-weight: 400;src: url(../assets/fonts/mir.woff2) format('woff2');}
i,[ico]::before {font-family: 'Material Icons';font-weight: normal;font-style: normal;font-size: inherit;display: inline-block;line-height: 1;text-transform: none;letter-spacing: normal;word-wrap: normal;white-space: nowrap;direction: ltr;-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility;-moz-osx-font-smoothing: grayscale;font-feature-settings: 'liga'}
[ico]::before {content: attr(ico)}
body {direction: rtl;font-family: "Rubik", sans-serif;background-color: var(--background-body);width: 100%;padding-bottom: 80px;box-sizing: border-box;}
*{box-sizing: border-box;}
.container {margin: 0 auto;padding-bottom: 60px}
.header {
    background-color: #1f6d47; margin: -20px; padding: 20px 5px 5px; border-radius: 0 0 15px 15px;
    a{ color:#fff !important; }
    &.address{   }
    .title{ color:#fff !important; font-size: 14px; }
    .current-location-btn { color: #fff; font-size: 14px; }
}
.address-sheet { position: absolute; top: 60px; /* Adjust to your header height */ right: 0; left: 0; background: #1f6d47; /* Same as .header background */ color: #fff; /* Same as .header text color */ box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: max-height 0.3s, opacity 0.3s; z-index: 2000; padding: 24px 16px 16px 16px; border-radius: 0 0 16px 16px; max-height: 0; opacity: 0; overflow: hidden; }
.address-sheet.active { max-height: 400px; /* Adjust as needed */ opacity: 1; max-width: 250px;margin: auto;}
.address-list { margin-bottom: 16px; }
.address-item { padding: 12px; border-bottom: 1px solid #eee; color: #fff; }
.add-address-btn { width: 100%; padding: 12px; background: #f58220; color: #fff; border: none; border-radius: 8px; font-size: 1rem; }
.navbar {display: flex;justify-content: start;align-items: center;background-color: transparent;padding: 10px 20px;border-radius: 10px;font-weight: 600}
.logo {height: 38px; filter: brightness(10); cursor: pointer; margin: -15px 0 0 0;}
.navbar space,.navbar s {flex-grow: 1;}
.navbar a {color: var(--text-bright);text-decoration: none;transition: transform .2s ease;font-size: 24px;display: flex;align-items: center;gap: 5px;border: none;padding: 4px;border-radius: 5px;cursor: pointer;}
.cart-link {position: relative;}
.cart-count {position: absolute;top: -6px;left: -10px;background-color: var(--black);color: var(--background-body);font-size: 10px;border-radius: 50%;padding: 2px 5px}
.status-icons {display: flex;justify-content: start;margin: 10px 0;padding: 10px 0;gap: 10px;overflow-x: auto;}
.status-icons a {
  position: relative;background-color: var(--button-base);border-radius: 100%;cursor: pointer;min-width: 80px;height: 80px;overflow: hidden;outline: 2px solid var(--links);margin: 4px 2px 4px 0;aspect-ratio: 1 / 1;
  &:visited{ outline-color: var(--text-lightest); }
  img {  width: 100%;  height: 100%;  object-fit: cover;}
  .offer-overlay {  position: absolute;  bottom: 0;  left: 0;  width: 100%;  height: 50%;  background-color: rgba(0, 0, 0, 0.5);  display: flex;  justify-content: center;  align-items: center;  color: var(--white);  font-size: 8px;  text-align: center;}
}
.slider {background: var(--border-light);border-radius: 10px;width: 100%;height: fit-content;}
.slider img {width: 100%;aspect-ratio: 3/1;object-fit: cover;border-radius: 10px;}
.slider::-webkit-scrollbar {display: none;}
.slider {-ms-overflow-style: none;scrollbar-width: none;}
.filter::-webkit-scrollbar {display: none;}
.filter {-ms-overflow-style: none;scrollbar-width: none;}
.section-header {display: flex;width: 100%;justify-content: space-between;align-items: center;margin: 15px 0;}
h2.section-title {text-align: start;font-weight: normal;margin: 0 !important;font-size: 16px;}
.product-list {display: flex;flex-wrap: wrap;gap: 1rem;justify-content: space-between;}
.product-card {text-decoration: none !important;color: var(--text-primary);border-radius: 15px;text-align: center;width: calc(30% - 1rem);box-sizing: border-box;transition: transform .2s ease, box-shadow .2s ease;cursor: pointer;box-shadow: var(--shadow-darker) 0px 1px 4px;background: var(--sidemenu-bg);padding: 3px;position: relative;}
.product-card img {width: 100%;border-radius: 15px;aspect-ratio: 1/1;object-fit: cover;}
.product-info {display: flex;flex-direction: row;justify-content: space-between;padding: 5px 10px;}
.product-info .text {display: flex;flex-direction: column;align-items: start;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.cart-icon i {font-size: 18px}
.product-card:hover {transform: scale(1.03);box-shadow: 2px 4px 10px var(--shadow-dark)}
.product-info p {font-size: 12px;margin: 0 0 .25rem 0;text-align: right;gap: 10px;}
.product-info p img {width: 14px;height: 14px;;margin-left: 5px}
.product-card .favorite-button {position: absolute;top: 10px;right: 10px;z-index: 999;background-color: var(--modal-bg);border: none;border-radius: 50%;width: 25px;height: 25px;display: flex;justify-content: center;align-items: center;cursor: pointer;padding: 0;z-index: 1;transition: background-color 0.3s ease;}
.product-card .favorite-button svg {width: 15px;height: 15px;stroke: var(--text-gray);fill: none;transition: fill 0.3s ease, stroke 0.3s ease;}
.product-card .favorite-button.active svg {fill: var(--error-alt);stroke: var(--error-alt);}
.product-card .favorite-button:hover {background-color: var(--white);}
.product-card .favorite-button:focus {box-shadow: none;}
.text p:nth-child(3) {display: flex}
.text p:nth-child(2) {font-size: 10px;color: var(--text-gray);margin: 2px 0 !important;}
.product-info i {color: var(--gold-light);text-decoration: none;font-size: 14px;}
.product-info h6 {margin: 0.5rem 0;}
.nav-link-offers,.nav-link-account {display: none !important}
.navbar {padding: 0;position: relative;border-radius: 10px;gap: 10px;}
body {padding: 0 20px;padding-bottom: 180px;}
footer {margin: auto;width: 100%;}
.v-error {color: var(--alert);padding: 5px 10px 8px;border-radius: 11px;line-height: 1.2;border: 1px solid var(--alert);}
picure[ico]::before {font-size: 50px;opacity: 0.2;width: 100%;height: 150px;align-content: center;}
[rate] i::before {content: 'star';}
[rate='1'] i:nth-child(n+2) {opacity: 0.2;}
[rate='2'] i:nth-child(n+3) {opacity: 0.2;}
[rate='3'] i:nth-child(n+4) {opacity: 0.2;}
[rate='4'] i:nth-child(n+5) {opacity: 0.2;}
input {box-sizing: border-box;margin: 10px 0;}
label input {width: 100%;}
.bottom-nav {display: flex;position: fixed;bottom: 0;right: 0;left: 0;background: transparent;background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjEwIDEyIDM5MyA1MiIgZmlsbD0iIzFGNkQ0NyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PHBhdGggZD0iTTIwNyA0Ny42MjdjMTUuNDY4IDAgMjguNTkzLTkuMjU3IDMzLjIxOS0yMy44MDRDMjQyLjIyOCAxNy41MDcgMjQ3LjM3MyAxMiAyNTQgMTJoMTIzLjRjOC45NjEgMCAxMy40NDEgMCAxNi44NjQgMS41MDIgMy4wMSAxLjMyIDUuNDU4IDMuNDI4IDYuOTkyIDYuMDJDNDAzIDIyLjQ3IDQwMyAyNi4zMjkgNDAzIDM0LjA0NXYzMC45MTJIMTBWMzQuMDQ0YzAtNy43MTYgMC0xMS41NzQgMS43NDQtMTQuNTIxIDEuNTM0LTIuNTkzIDMuOTgyLTQuNyA2Ljk5Mi02LjAyMUMyMi4xNiAxMiAyNi42NCAxMiAzNS42IDEySDE2MGM2LjYyNyAwIDExLjc1NCA1LjQ5MyAxMy42MjQgMTEuODUgNC40ODEgMTUuMjM4IDE3LjczIDIzLjc3NyAzMy4zNzYgMjMuNzc3Ii8+PC9zdmc+);border: none;justify-content: center;padding: 0.5rem 0;gap: 2rem;z-index: 400;align-items: center;background-position: center; background-size: 430px; background-repeat: no-repeat;}
.bottom-nav a {display: flex;flex-direction: row;align-items: center;gap: 5px;width: 40px;font-size: 24px;color: var(--white);padding: 10px;text-decoration: none;}
.bottom-nav a .icon {font-size: 34px;margin-bottom: 5px;}
.bottom-nav a .text {font-size: 14px;text-align: center;}
.bottom-nav a:hover {transform: scale(1.05);text-decoration: none;color: var(--links);}
.bottom-nav .center {
  background: var(--links); color: #fff !important; border-radius: 50%; padding: 6px; height: 45px; width: 45px; display: flex ; align-items: center; justify-content: center; gap: 0 !important; margin: -50px 15px 0 15px;
}
main .filter div:empty {background: var(--loading-bg);border-radius: 50%;min-width: 50px;min-height: 50px;animation: glowing infinite linear 0.5s;}
.slider:empty {background: var(--loading-bg);animation: glowing infinite linear 0.5s;}
@keyframes glowing { 0%, 100% {  opacity: 1;} 30%, 70% {  opacity: 0.7;} 50% {  opacity: 0.5;}}
.side-menu {width: 280px;height: 100%;background-color: var(--sidemenu-bg);position: fixed;top: 0;right: -300px;transition: right 0.3s ease;box-shadow: -2px 0 8px var(--shadow-medium);z-index: 1000;padding: 20px;box-sizing: border-box;display: flex;flex-direction: column;justify-content: space-between;}
.side-menu.active {right: 0;}
.profile {width: 100%;display: flex;flex-direction: column;align-items: start;margin-bottom: 25px;padding: 15px 10px 15px 0;}
.avatar {width: 60px;height: 60px;border-radius: 20px;object-fit: cover;margin-bottom: 5px;}
.info {display: flex;flex-direction: column;margin-top: 10px;}
.info strong {font-size: 14px;margin-bottom: 3px;}
.info small {color: var(--gray-dark);font-size: 14px;}
.side-menu a {display: flex;align-items: center;padding: 12px 10px;margin-bottom: 5px;text-decoration: none;color: var(--text-muted);border-radius: 8px;transition: background 0.3s;font-size: 24px;gap: 7px;}
.side-menu a:hover {background-color: var(--primary-blue);color: var(--white);}
.side-menu a .text {font-size: 15px;flex: 1;font-weight: 500;}
.side-menu .logout {width: 100%;padding-top: 15px;}
.side-menu .logout a:hover {background-color: var(--alert);}
.side-menu .logout a.blue:hover {background-color: var(--primary-blue) !important;}
.overlay {position: fixed;top: 0;right: 0;left: 0;bottom: 0;background-color: var(--overlay-bg);display: none;z-index: 500;}
.overlay.active {display: block;}
.not-found {max-width: 400px;margin: 0 auto;text-align: center;padding: 50px;transform: translateY(40%);}
.not-found h1 {font-size: 80px;margin: 0;color: var(--error-primary);}
.not-found h2 {margin: 10px 0;font-size: 24px;}
.not-found p {margin: 20px 0;color: var(--text-lightest);}
.not-found a {display: inline-block;padding: 10px 20px;background-color: var(--error-primary);color: var(--white);text-decoration: none;border-radius: 8px;transition: 0.3s;}
.not-found a:hover {background-color: var(--error-hover);text-decoration: none;}
.profile-card {max-width: 400px;margin: 0 auto;padding: 24px;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.profile-header {
  display: flex;flex-direction: column;align-items: center;justify-content: center;margin-bottom: 20px;
  img {  width: 80px;  height: 80px;  object-fit: cover;  border-radius: 50%;  margin-bottom: 5px;}
  .info { display: flex;  flex-direction: column;  align-items: center;  justify-content: center;
    strong {font-size: 16px;font-weight: bold;  }
    small {color: var(--text-gray);font-size: 16px;}
  }
}
form {width: 100%;}
form label {display: block;margin-bottom: 5px;text-align: right}
.login form {display: flex;flex-direction: column;}
.login form a {align-self: start;font-size: 12px;margin: 0}
button[type="submit"] {width: 100%;padding: 10px;background-color: var(--primary-blue);border: none;border-radius: 5px;color: var(--white);font-size: 16px;cursor: pointer;margin: 20px 0 0 0;}
.pass-view {position: relative}
input {width: 100%;height: 40px;font-size: 14px;}
.pass-view span {font-size: 16px;position: absolute;left: 10px;top: 55%;transform: translateY(-50%);cursor: pointer;z-index: 1}
button[type="submit"]:hover {background-color: var(--primary-blue-hover)}
button:focus {box-shadow: none !important;}
fr, .fr {float: right;}
fl, .fl {float: left;}
.w100,[w100] {width: 100%;}
.w90,[w90] {width: 90%;}
.w80,[w80] {width: 80%;}
.w70,[w70] {width: 70%;}
.w60,[w60] {width: 60%;}
.w50,[w50] {width: 50%;}
.w40,[w40] {width: 40%;}
.w30,[w30] {width: 30%;}
.w20,[w20] {width: 20%;}
.w10,[w10] {width: 10%;}
flex,[flex],.flex {display: flex;flex-wrap: wrap;gap: 10px;}
flex>*,[flex]>*,.flex>* {flex-grow: 1;}
fwrap,.fwrap,[fwrap] {flex-wrap: wrap;}
fnowrap,.fnowrap,[fnowrap] {flex-wrap: nowrap;}
.slider {display: flex;background: transparent;border-radius: 15px;overflow-x: auto;white-space: nowrap;overflow-y: hidden;/* scroll-snap-type: x mandatory;*/
  will-change: transform;user-select: none;cursor: pointer;transition: all 0.2s;transform: scale(0.99);/* scroll-snap-type: x mandatory;*/}
.slider.active {cursor: grabbing;cursor: -webkit-grabbing;scroll-snap-type: none;}
.slider * {user-select: none;}
.slider>* {scroll-snap-align: center;flex: none;width: 100%;}
@keyframes slideUp { from { height: auto; opacity: 1; padding: 1em; margin: 1em 0; } to { height: 0; opacity: 0; padding: 0; margin: 0; } }
.hide, [hide] { height: 0; overflow: hidden; padding: 0; margin: 0; animation: slideUp 0.3s ease; }
sliderup {
     inner{position: fixed; z-index: 999999999; bottom: -100vh; transition: all 0.5s; background-color: #fff; width: 100%; padding: 20px; box-sizing: border-box; border-radius: 30px 30px 0 0; overflow: auto; max-height: 70vh;right: 0; }
     &.open inner { bottom: 0; }
     shade{position: fixed; z-index: 999999998; top: 0; right: 0; left: 0; bottom: 0; background-color: rgba(0,0,0,0.4); }
}
@media (min-width: 600px) {/* PC */
  .pc-100, [pc-100] { width: 100%; }
  .pc-90, [pc-90] { width: 90%; }
  .pc-80, [pc-80] { width: 80%; }
  .pc-70, [pc-70] { width: 70%; }
  .pc-60, [pc-60] { width: 60%; }
  .pc-50, [pc-50] { width: 50%; }
  .pc-40, [pc-40] { width: 40%; }
  .pc-30, [pc-30] { width: 30%; }
  .pc-20, [pc-20] { width: 20%; }
  .pc-10, [pc-10] { width: 10%; }
  [hide-pc], .hide-pc { display: none; }
  body{ padding-bottom: 60px; }
  .product-card { width: calc(25% - 1rem); }
  .bottom-nav {background-size: 500px;background: #1f6d47;padding: 0;border-radius: 15px 15px 0 0;}
  .bottom-nav a{width: auto;}
  .bottom-nav .center{ margin: 0px 15px 0 15px;border: 9px solid var(--background-body);transform: translateY(-50%) !important;}
/* PC END*/
}
@media (max-width: 600px) {
  /* MOB */
  .pc-100,  [pc-100],  .pc-90,  [pc-90],  .pc-80,  [pc-80],  .pc-70,  [pc-70],  .pc-60,  [pc-60],  .pc-50,  [pc-50],  .pc-40,  [pc-40],  .pc-30,  [pc-30],  .pc-20,  [pc-20],  .pc-10,  [pc-10] {  width: 100%;}
  .mob-100,  [mob-100] {  width: 100%;}
  .mob-90,  [mob-90] {  width: 90%;}
  .mob-80,  [mob-80] {  width: 80%;}
  .mob-70,  [mob-70] {  width: 70%;}
  .mob-60,  [mob-60] {  width: 60%;}
  .mob-50,  [mob-50] {  width: 50%;}
  .mob-40,  [mob-40] {  width: 40%;}
  .mob-30,  [mob-30] {  width: 30%;}
  .mob-20,  [mob-20] {  width: 20%;}
  .mob-10,  [mob-10] {  width: 10%;}
  [hide-mob],  .hide-mob {  display: none;}
  .product-card {  width: calc(50% - 0.5rem);}
  .filter {  gap: 8px;}
  .filter div {  min-width: 60px;  height: 60px;}
  .navbar {  padding: 0;}
  .bottom-nav {  gap: 1rem;}
  .logo {  height: 45px;  /* filter: brightness(0); */
    cursor: pointer;}
  .bottom-nav a .text {  font-size: 10px;}
  .bottom-nav a {  flex-direction: column;  gap: 0;  font-size: 20px;  padding: 0 8px;}
  .navbar a {  font-size: 20px;}
  .slider {  scroll-snap-type: x mandatory;}
  .slider img {  aspect-ratio: 5/2;}
  .section-header {  width: 96%;  margin: 15px auto;}
  .view-all {  font-size: 10px;}
  h2.section-title {  font-size: 12px !important;}
  .product-card p {  margin: 0;  font-size: 10px;}
  p.product-description {  margin: 0 !important;}
  /* MOB END */
}
#loading-spinner { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; }
.spinner-overlay { background: rgba(255, 255, 255, 0.9); display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.spinner { text-align: center; color: #1f6d47; }
.spinner-circle { width: 50px; height: 50px; border: 4px solid #f3f3f3; border-top: 4px solid #1f6d47; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px auto; }
.spinner p { font-size: 16px; font-weight: 500; margin: 0; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
alert { font-size: 9px; margin: 10px; background-color: #ffebd8; color: #885858; padding: 5px; border-radius: 10px; }
.add-to-cart-btn svg{ color: #fff; }
button.add-to-cart-btn { border-radius: 100%; height: 30px; width: 30px; padding: 8px; background-color: #f58220; }