/* Payam mobile shop filter/sort sheets v1.0.0 */
.mobile-shop-controls,
.mobile-shop-sheet,
.mobile-shop-sheet-backdrop{display:none}

@media (max-width:720px){
  body.mobile-shop-sheet-open{overflow:hidden!important;touch-action:none}

  .is-shop-page .shop-page-dk{padding-top:0!important}
  .is-shop-page .shop-page-dk .shop-layout{display:block!important}
  .is-shop-page .shop-page-dk .shop-filters{display:none!important}
  .is-shop-page .shop-page-dk .shop-results{
    width:100%!important;
    max-width:none!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    overflow:visible!important;
    background:#fff!important;
  }
  .is-shop-page .shop-page-dk .shop-toolbar.dk-toolbar{display:none!important}

  .mobile-shop-controls{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    width:100%;
    min-height:54px;
    padding:7px 10px;
    margin:0 0 8px;
    border-top:1px solid #f0f1f3;
    border-bottom:1px solid #e5e7eb;
    background:#fff;
    direction:rtl;
  }
  .mobile-shop-control{
    position:relative;
    min-width:0;
    height:40px;
    padding:0 10px;
    border:1px solid #e3e6ea;
    border-radius:10px;
    background:#fff;
    color:#30343b;
    font:inherit;
    font-size:11.5px;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    white-space:nowrap;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-shop-control:active{background:#f8fafc}
  .mobile-shop-control svg{
    width:18px;
    height:18px;
    flex:0 0 18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .mobile-shop-control small{
    display:block;
    min-width:0;
    max-width:72px;
    overflow:hidden;
    text-overflow:ellipsis;
    color:#777f89;
    font-size:9px;
    font-weight:600;
  }
  .mobile-shop-control b{
    min-width:17px;
    height:17px;
    padding:0 4px;
    border-radius:999px;
    background:#ef4056;
    color:#fff;
    font-size:9px;
    line-height:17px;
    text-align:center;
  }
  .mobile-shop-control b[hidden]{display:none!important}
  .mobile-shop-total{
    color:#6b7280;
    font-size:10px;
    font-weight:700;
    white-space:nowrap;
  }

  .shop-results-content{
    position:relative;
    min-height:180px;
    transition:opacity .16s ease;
  }
  .shop-results-content.is-loading{opacity:.45;pointer-events:none}
  .shop-results-content.is-loading::after{
    content:"";
    position:fixed;
    top:50%;
    right:50%;
    z-index:100120;
    width:30px;
    height:30px;
    margin:-15px -15px 0 0;
    border:3px solid rgba(239,64,86,.18);
    border-top-color:#ef4056;
    border-radius:50%;
    animation:mobileShopSpin .7s linear infinite;
  }
  @keyframes mobileShopSpin{to{transform:rotate(360deg)}}

  .mobile-shop-sheet-backdrop{
    position:fixed;
    inset:0 0 calc(var(--mobile-bottom-nav-height,58px) + env(safe-area-inset-bottom,0px)) 0;
    z-index:100248;
    display:block;
    background:rgba(15,23,42,.56);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease,visibility 0s linear .2s;
  }
  .mobile-shop-sheet-backdrop.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:opacity .2s ease,visibility 0s;
  }
  .mobile-shop-sheet-backdrop[hidden]{display:none!important}

  .mobile-shop-sheet{
    position:fixed;
    right:0;
    bottom:calc(var(--mobile-bottom-nav-height,58px) + env(safe-area-inset-bottom,0px));
    left:0;
    z-index:100252;
    display:flex;
    flex-direction:column;
    width:100%;
    max-height:min(88vh,760px);
    border-radius:22px 22px 0 0;
    background:#fff;
    box-shadow:0 -18px 50px rgba(15,23,42,.2);
    direction:rtl;
    opacity:0;
    visibility:hidden;
    transform:translateY(105%);
    pointer-events:none;
    transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .18s ease,visibility 0s linear .25s;
  }
  .mobile-shop-sheet.is-open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
    transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .18s ease,visibility 0s;
  }
  .mobile-shop-sheet--sort{max-height:min(72vh,590px)}
  .mobile-shop-sheet__handle{
    width:38px;
    height:4px;
    margin:10px auto 5px;
    border-radius:999px;
    background:#e5e7eb;
    flex:0 0 auto;
  }
  .mobile-shop-sheet__header{
    min-height:58px;
    direction:ltr;
    padding:7px 14px 10px;
    border-bottom:1px solid #eceff2;
    display:grid;
    grid-template-columns:54px minmax(0,1fr) 54px;
    align-items:center;
    gap:6px;
    flex:0 0 auto;
  }
  .mobile-shop-sheet__header strong{
    direction:rtl;
    text-align:center;
    color:#1f2937;
    font-size:15px;
    font-weight:950;
  }
  .mobile-shop-sheet__close,
  .mobile-shop-sheet__clear{
    min-width:44px;
    height:40px;
    padding:0;
    border:0;
    background:transparent;
    color:#4b5563;
    font:inherit;
  }
  .mobile-shop-sheet__close{
    display:flex;
    align-items:center;
    justify-content:flex-start;
  }
  .mobile-shop-sheet__close svg{
    width:24px;
    height:24px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
  }
  .mobile-shop-sheet__clear{
    direction:rtl;
    color:#ef4056;
    font-size:11px;
    font-weight:850;
    text-align:left;
  }

  .mobile-shop-filter-form{
    min-height:0;
    flex:1;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:0 14px 82px;
    scrollbar-width:none;
  }
  .mobile-shop-filter-form::-webkit-scrollbar{display:none}
  .mobile-shop-filter-group{
    margin:0;
    border-bottom:1px solid #eceff2;
  }
  .mobile-shop-filter-group>summary{
    min-height:58px;
    padding:10px 2px;
    list-style:none;
    cursor:pointer;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto 22px;
    align-items:center;
    gap:8px;
    color:#20242a;
    font-size:13px;
    font-weight:900;
  }
  .mobile-shop-filter-group>summary::-webkit-details-marker{display:none}
  .mobile-shop-filter-group>summary small{
    max-width:115px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#8a929d;
    font-size:10px;
    font-weight:600;
  }
  .mobile-shop-filter-group>summary i{
    position:relative;
    width:20px;
    height:20px;
    transition:transform .18s ease;
  }
  .mobile-shop-filter-group>summary i::before,
  .mobile-shop-filter-group>summary i::after{
    content:"";
    position:absolute;
    top:9px;
    width:7px;
    height:2px;
    border-radius:2px;
    background:#64748b;
  }
  .mobile-shop-filter-group>summary i::before{right:3px;transform:rotate(45deg)}
  .mobile-shop-filter-group>summary i::after{left:3px;transform:rotate(-45deg)}
  .mobile-shop-filter-group[open]>summary i{transform:rotate(180deg)}
  .mobile-shop-filter-group__body{padding:0 0 13px}
  .mobile-shop-category-list{max-height:260px;overflow-y:auto;padding-left:2px}

  .mobile-shop-choice{
    min-height:46px;
    padding:8px 2px;
    border-bottom:1px solid #f0f2f4;
    display:flex;
    align-items:center;
    gap:10px;
    color:#374151;
    font-size:12px;
    font-weight:750;
  }
  .mobile-shop-choice--category{
    padding-right:calc(2px + (var(--shop-category-level,0) * 14px));
  }
  .mobile-shop-choice:last-child{border-bottom:0}
  .mobile-shop-choice input{
    appearance:none;
    width:18px;
    height:18px;
    flex:0 0 18px;
    margin:0;
    border:1.5px solid #cbd5e1;
    border-radius:50%;
    background:#fff;
    display:grid;
    place-items:center;
  }
  .mobile-shop-choice input::after{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:#ef4056;
    transform:scale(0);
    transition:.13s ease;
  }
  .mobile-shop-choice input:checked{border-color:#ef4056}
  .mobile-shop-choice input:checked::after{transform:scale(1)}

  .mobile-shop-select-wrap select,
  .mobile-shop-price-fields input{
    width:100%;
    height:44px;
    border:1px solid #dfe4e9;
    border-radius:10px;
    background:#fff;
    color:#374151;
    font:inherit;
    font-size:12px;
    outline:0;
  }
  .mobile-shop-select-wrap select{padding:0 12px}
  .mobile-shop-price-fields{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
  }
  .mobile-shop-price-fields label span{
    display:block;
    margin-bottom:6px;
    color:#6b7280;
    font-size:10px;
  }
  .mobile-shop-price-fields input{padding:0 10px;text-align:right}

  .mobile-shop-sheet__footer{
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    z-index:2;
    padding:10px 14px 12px;
    border-top:1px solid #e7eaee;
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(8px);
  }
  .mobile-shop-apply{
    width:100%;
    height:48px;
    border:0;
    border-radius:10px;
    background:#ef4056;
    color:#fff;
    font:inherit;
    font-size:13px;
    font-weight:950;
  }

  .mobile-shop-sort-list{
    min-height:0;
    overflow-y:auto;
    padding:0 18px 14px;
  }
  .mobile-shop-sort-option{
    width:100%;
    min-height:58px;
    padding:10px 4px;
    border:0;
    border-bottom:1px solid #eceff2;
    background:#fff;
    color:#4b5563;
    font:inherit;
    font-size:13px;
    font-weight:750;
    text-align:right;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .mobile-shop-sort-option i{
    position:relative;
    width:21px;
    height:21px;
    flex:0 0 21px;
  }
  .mobile-shop-sort-option.is-selected{
    color:#111827;
    font-weight:950;
  }
  .mobile-shop-sort-option.is-selected i::before,
  .mobile-shop-sort-option.is-selected i::after{
    content:"";
    position:absolute;
    height:2px;
    border-radius:2px;
    background:#374151;
  }
  .mobile-shop-sort-option.is-selected i::before{
    width:8px;
    right:2px;
    top:12px;
    transform:rotate(45deg);
  }
  .mobile-shop-sort-option.is-selected i::after{
    width:14px;
    right:7px;
    top:9px;
    transform:rotate(-45deg);
  }
}

@media (max-width:360px){
  .mobile-shop-controls{gap:5px;padding-inline:7px}
  .mobile-shop-control{padding-inline:7px;font-size:10.5px}
  .mobile-shop-control small{display:none}
  .mobile-shop-total{font-size:9px}
  .mobile-shop-sheet{max-height:90vh}
}