/* ═══════════════════════════════════════════════════════════
   Mini Shop Search v2.0 — استایل مدرن موبایل‌پسند
   ═══════════════════════════════════════════════════════════ */

/* ── متغیرها ─────────────────────────────────────────────── */
.mss-container {
    --mss-accent:      #ff6b6b;
    --mss-accent-dark: #e85555;
    --mss-bg:          #f5f7fa;
    --mss-card-bg:     #ffffff;
    --mss-radius:      16px;
    --mss-radius-sm:   10px;
    --mss-shadow:      0 2px 12px rgba(0,0,0,0.07);
    --mss-shadow-md:   0 6px 24px rgba(0,0,0,0.10);
    --mss-text:        inherit;       /* ارث‌بری از قالب */
    --mss-text-muted:  #6b7280;
    --mss-border:      #e5e9ef;
    --mss-in-stock:    #16a34a;
    --mss-out-stock:   #dc2626;
    --mss-low-stock:   #d97706;

    /* ارث‌بری فونت از قالب سایت */
    font-family: inherit;
    font-size:   inherit;
    line-height: inherit;
    color:       inherit;

    max-width:    680px;
    margin:       0 auto;
    padding:      20px 16px 100px;
    background:   var(--mss-bg);
    border-radius: 24px;
    direction:    rtl;
}

/* ── هدر و جستجو ─────────────────────────────────────────── */
.mss-header {
    margin-bottom: 20px;
}

.mss-title {
    font-family: inherit;
    font-size:   1.4rem;
    font-weight: 700;
    margin:      0 0 14px 0;
    color:       inherit;
    text-align:  center;
}

.mss-search-wrap {
    display:        flex;
    align-items:    center;
    background:     var(--mss-card-bg);
    border-radius:  50px;
    padding:        0 16px;
    box-shadow:     var(--mss-shadow);
    border:         1.5px solid transparent;
    transition:     border-color .2s, box-shadow .2s;
    gap:            8px;
}
.mss-search-wrap:focus-within {
    border-color: var(--mss-accent);
    box-shadow:   0 0 0 3px rgba(255,107,107,.15);
}
.mss-search-icon { font-size: 1.1rem; color: var(--mss-text-muted); flex-shrink: 0; }

#mss-search-input {
    flex:          1;
    border:        none;
    outline:       none;
    background:    transparent;
    padding:       13px 0;
    font-family:   inherit;
    font-size:     1rem;
    color:         inherit;
    direction:     rtl;
}
#mss-search-input::placeholder { color: #adb5bd; }

.mss-search-clear {
    background:  none;
    border:      none;
    color:       var(--mss-text-muted);
    cursor:      pointer;
    font-size:   1rem;
    padding:     4px;
    opacity:     0;
    transition:  opacity .15s;
    flex-shrink: 0;
}
.mss-search-clear.visible { opacity: 1; }

/* ── دسته‌بندی‌ها ─────────────────────────────────────────── */
.mss-categories-section {
    background:    var(--mss-card-bg);
    border-radius: var(--mss-radius);
    padding:       14px 16px;
    margin-bottom: 18px;
    box-shadow:    var(--mss-shadow);
}

.mss-cat-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   12px;
}
.mss-cat-label {
    font-weight: 600;
    font-size:   .9rem;
    font-family: inherit;
    color:       inherit;
}

.mss-btn-pill {
    border:        none;
    padding:       7px 16px;
    border-radius: 50px;
    font-family:   inherit;
    font-size:     .8rem;
    cursor:        pointer;
    transition:    all .2s;
    font-weight:   500;
}
.mss-btn-ghost {
    background: #f1f5f9;
    color:      var(--mss-text-muted);
}
.mss-btn-ghost:hover { background: #e2e8f0; }

.mss-cat-scroll {
    overflow-x:                 auto;
    padding:                    4px 0 8px;
    scrollbar-width:            thin;
    scrollbar-color:            #e2e8f0 transparent;
    -webkit-overflow-scrolling: touch;
}
.mss-cat-scroll::-webkit-scrollbar        { height: 4px; }
.mss-cat-scroll::-webkit-scrollbar-track  { background: transparent; }
.mss-cat-scroll::-webkit-scrollbar-thumb  { background: #e2e8f0; border-radius: 4px; }

.mss-cat-chips {
    display:     inline-flex;
    gap:         10px;
    flex-wrap:   nowrap;
    padding:     2px 2px;
}

.mss-cat-chip {
    display:       inline-flex;
    align-items:   center;
    gap:           7px;
    padding:       8px 16px 8px 12px;
    background:    #f1f5f9;
    border:        1.5px solid transparent;
    border-radius: 50px;
    font-family:   inherit;
    font-size:     .85rem;
    font-weight:   500;
    color:         inherit;
    white-space:   nowrap;
    cursor:        pointer;
    transition:    all .2s;
    outline:       none;
}
.mss-cat-chip:hover {
    background:   #e8edf4;
    border-color: var(--mss-accent);
}
.mss-cat-chip.active {
    background:   var(--mss-accent);
    color:        #fff;
    border-color: var(--mss-accent);
    box-shadow:   0 3px 10px rgba(255,107,107,.3);
}
.mss-cat-chip.active .chip-arrow { color: rgba(255,255,255,.7); }

.chip-thumb {
    width:         28px;
    height:        28px;
    border-radius: 50%;
    object-fit:    cover;
    flex-shrink:   0;
}
.chip-name { line-height: 1; }
.chip-arrow {
    font-size:  1rem;
    color:      var(--mss-text-muted);
    margin-right: 2px;
}

/* ── محصولات ─────────────────────────────────────────────── */
.mss-products-meta {
    font-size:     .8rem;
    color:         var(--mss-text-muted);
    font-family:   inherit;
    margin-bottom: 10px;
    text-align:    left;
}

.mss-products-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   14px;
}

/* کارت محصول */
.mss-product-card {
    background:    var(--mss-card-bg);
    border-radius: var(--mss-radius);
    overflow:      hidden;
    box-shadow:    var(--mss-shadow);
    transition:    transform .2s, box-shadow .2s;
    display:       flex;
    flex-direction: column;
    position:      relative;
}
.mss-product-card:hover {
    transform:  translateY(-4px);
    box-shadow: var(--mss-shadow-md);
}
.mss-card-oos { opacity: .7; }
.mss-card-oos:hover { transform: none; }

.mss-card-image-wrap {
    position:   relative;
    overflow:   hidden;
    background: #f8fafc;
}
.mss-product-link { display: block; }
.mss-product-link img {
    width:      100%;
    height:     160px;
    object-fit: cover;
    display:    block;
    transition: transform .3s;
}
.mss-product-card:hover .mss-product-link img { transform: scale(1.04); }

/* بج موجودی */
.mss-stock-badge {
    position:      absolute;
    top:           8px;
    right:         8px;
    padding:       3px 9px;
    border-radius: 50px;
    font-family:   inherit;
    font-size:     .7rem;
    font-weight:   700;
    z-index:       1;
    backdrop-filter: blur(4px);
}
.mss-badge-in  { background: rgba(22,163,74,.9);  color: #fff; }
.mss-badge-out { background: rgba(220,38,38,.9);  color: #fff; }
.mss-badge-low { background: rgba(217,119,6,.9);  color: #fff; }

/* جزئیات کارت */
.mss-card-body {
    padding:       12px 12px 14px;
    display:       flex;
    flex-direction: column;
    gap:           6px;
    flex:          1;
}

.mss-card-title-link { text-decoration: none; color: inherit; }
.mss-product-title {
    font-family: inherit;
    font-size:   .88rem;
    font-weight: 600;
    line-height: 1.4;
    margin:      0;
    color:       inherit;
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

.mss-product-price {
    font-family: inherit;
    font-size:   .95rem;
    font-weight: 700;
    color:       var(--mss-accent);
    margin-top:  auto;
}
.mss-product-price .woocommerce-Price-currencySymbol { font-size: .8em; }

/* دکمه سبد خرید */
.mss-add-to-cart {
    display:       flex;
    align-items:   center;
    justify-content: center;
    gap:           5px;
    background:    var(--mss-accent);
    border:        none;
    color:         #fff;
    padding:       9px 12px;
    border-radius: 50px;
    font-family:   inherit;
    font-size:     .8rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    all .2s;
    width:         100%;
    text-decoration: none;
    text-align:    center;
    margin-top:    4px;
}
.mss-add-to-cart:hover { background: var(--mss-accent-dark); transform: scale(1.02); }
.mss-add-to-cart.adding { opacity: .7; cursor: wait; }
.mss-add-to-cart.added  {
    background: var(--mss-in-stock);
    animation: addedPulse .4s ease;
}
@keyframes addedPulse {
    0%  { transform: scale(1); }
    50% { transform: scale(1.06); }
    100%{ transform: scale(1); }
}
.mss-btn-oos { background: #e5e7eb; color: #9ca3af; cursor: not-allowed; }
.mss-btn-oos:hover { background: #e5e7eb; transform: none; }
.mss-btn-variable {
    background: #6366f1;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mss-btn-variable:hover { background: #4f46e5; }

.btn-icon { font-size: 1.1rem; font-weight: 700; }

/* بارگذاری / خطا */
.mss-loading {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    padding:         40px;
    color:           var(--mss-text-muted);
    font-family:     inherit;
    grid-column:     span 2;
}
.mss-spinner {
    width:        22px;
    height:       22px;
    border:       3px solid #e5e7eb;
    border-top:   3px solid var(--mss-accent);
    border-radius: 50%;
    animation:    spin .7s linear infinite;
    flex-shrink:  0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.mss-no-results {
    grid-column: span 2;
    text-align:  center;
    padding:     40px;
    font-family: inherit;
    color:       var(--mss-text-muted);
}
.mss-no-results-icon { font-size: 2.5rem; display: block; margin-bottom: 8px; }
.mss-no-results p    { margin: 0; font-size: 1rem; }

/* بیشتر */
.mss-load-more-wrap { text-align: center; margin-top: 20px; }
#mss-load-more {
    background:   var(--mss-accent);
    color:        #fff;
    padding:      10px 28px;
    font-weight:  600;
    font-family:  inherit;
    font-size:    .9rem;
    box-shadow:   0 3px 10px rgba(255,107,107,.3);
}
#mss-load-more:hover { background: var(--mss-accent-dark); }

/* ── مودال (زیردسته + سبد) ───────────────────────────────── */
.mss-modal {
    display:         none;
    position:        fixed;
    z-index:         9999;
    inset:           0;
    align-items:     flex-end;
    justify-content: center;
}
.mss-modal.open { display: flex; }

.mss-modal-backdrop {
    position:   absolute;
    inset:      0;
    background: rgba(15,23,42,.5);
    backdrop-filter: blur(3px);
    animation:  fadeIn .2s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.mss-modal-sheet {
    position:      relative;
    background:    #fff;
    width:         100%;
    max-width:     520px;
    border-radius: 28px 28px 0 0;
    padding:       12px 20px 32px;
    animation:     slideUp .25s cubic-bezier(.32,1,.56,1);
    max-height:    90vh;
    overflow-y:    auto;
    direction:     rtl;
}
@keyframes slideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.mss-modal-handle {
    width:         40px;
    height:        4px;
    background:    #e2e8f0;
    border-radius: 4px;
    margin:        0 auto 16px;
}

.mss-modal-title {
    font-family: inherit;
    font-size:   1.1rem;
    font-weight: 700;
    margin:      0 0 16px;
    color:       inherit;
    text-align:  center;
}

.mss-modal-buttons {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}
.mss-modal-btn {
    background:    #f8fafc;
    border:        1.5px solid var(--mss-border);
    padding:       13px 16px;
    border-radius: 50px;
    font-family:   inherit;
    font-size:     .95rem;
    font-weight:   500;
    cursor:        pointer;
    transition:    all .15s;
    color:         inherit;
    text-align:    center;
}
.mss-modal-btn:hover   { border-color: var(--mss-accent); background: #fff5f5; }
.mss-modal-btn-parent  { background: var(--mss-accent); color: #fff; border-color: var(--mss-accent); font-weight: 700; }
.mss-modal-btn-parent:hover { background: var(--mss-accent-dark); }

/* ── سبد خرید شناور ─────────────────────────────────────── */
.mss-cart-fab {
    position:        fixed;
    bottom:          28px;
    left:            20px;
    width:           58px;
    height:          58px;
    border-radius:   50%;
    background:      var(--mss-accent);
    border:          none;
    color:           #fff;
    font-size:       1.5rem;
    cursor:          pointer;
    box-shadow:      0 6px 20px rgba(255,107,107,.45);
    z-index:         9000;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      transform .2s, box-shadow .2s;
}
.mss-cart-fab:hover { transform: scale(1.08); box-shadow: 0 8px 24px rgba(255,107,107,.55); }
.mss-cart-fab:active { transform: scale(.96); }

.mss-cart-fab-icon { line-height: 1; }
.mss-cart-count {
    position:      absolute;
    top:           -4px;
    left:          -4px;
    background:    #1e2a3a;
    color:         #fff;
    font-size:     .7rem;
    font-weight:   700;
    font-family:   inherit;
    width:         20px;
    height:        20px;
    border-radius: 50%;
    display:       flex;
    align-items:   center;
    justify-content: center;
    border:        2px solid #fff;
    animation:     popIn .2s;
}
@keyframes popIn {
    0%  { transform: scale(0); }
    70% { transform: scale(1.2); }
    100%{ transform: scale(1); }
}

/* مودال سبد */
.mss-cart-sheet { padding-bottom: 20px; }

.mss-cart-modal-header {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    margin-bottom:  16px;
}
.mss-cart-modal-title {
    font-family: inherit;
    font-size:   1.15rem;
    font-weight: 700;
    margin:      0;
    color:       inherit;
}
.mss-modal-close-btn {
    background:  none;
    border:      none;
    font-size:   1.2rem;
    color:       var(--mss-text-muted);
    cursor:      pointer;
    padding:     4px 8px;
    border-radius: 8px;
    transition:  background .15s;
}
.mss-modal-close-btn:hover { background: #f1f5f9; }

/* آیتم‌های سبد */
.mss-cart-items { display: flex; flex-direction: column; gap: 12px; }

.mss-cart-item {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       12px;
    background:    #f8fafc;
    border-radius: var(--mss-radius-sm);
    border:        1px solid var(--mss-border);
    transition:    opacity .2s;
}
.mss-cart-item.removing { opacity: 0; }

.mss-cart-item-img { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: #e5e7eb; }
.mss-cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.mss-cart-no-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }

.mss-cart-item-info { flex: 1; min-width: 0; }
.mss-cart-item-title {
    font-family: inherit;
    font-size:   .85rem;
    font-weight: 600;
    margin:      0 0 8px;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
    color:       inherit;
}
.mss-cart-item-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.mss-cart-qty-wrap { display: flex; align-items: center; gap: 8px; }
.mss-qty-btn {
    width:        28px;
    height:       28px;
    border-radius: 50%;
    border:       1.5px solid var(--mss-border);
    background:   #fff;
    font-size:    1.1rem;
    cursor:       pointer;
    display:      flex;
    align-items:  center;
    justify-content: center;
    transition:   all .15s;
    line-height:  1;
    font-weight:  700;
    color:        inherit;
    font-family:  inherit;
}
.mss-qty-btn:hover { border-color: var(--mss-accent); color: var(--mss-accent); }
.mss-qty-num  { font-family: inherit; font-weight: 700; font-size: .9rem; min-width: 20px; text-align: center; }

.mss-cart-item-price {
    font-family: inherit;
    font-size:   .85rem;
    font-weight: 700;
    color:       var(--mss-accent);
    white-space: nowrap;
}

.mss-cart-remove {
    background:  none;
    border:      none;
    font-size:   1.1rem;
    cursor:      pointer;
    opacity:     .5;
    transition:  opacity .15s;
    padding:     4px;
    flex-shrink: 0;
}
.mss-cart-remove:hover { opacity: 1; }

.mss-cart-empty {
    text-align:  center;
    padding:     40px 20px;
    color:       var(--mss-text-muted);
    font-family: inherit;
}
.mss-cart-empty span { font-size: 3rem; display: block; margin-bottom: 10px; }
.mss-cart-empty p    { margin: 0; font-size: 1rem; }

/* footer سبد */
.mss-cart-footer {
    margin-top:    20px;
    padding-top:   16px;
    border-top:    1px solid var(--mss-border);
    display:       flex;
    flex-direction: column;
    gap:           10px;
}
.mss-cart-total {
    display:         flex;
    justify-content: space-between;
    font-family:     inherit;
    font-size:       1rem;
    font-weight:     700;
    padding:         4px 0;
}
.mss-cart-total::before { content: "جمع کل:"; font-weight: 600; color: var(--mss-text-muted); }

.mss-btn-checkout {
    display:         block;
    text-align:      center;
    background:      var(--mss-in-stock);
    color:           #fff;
    padding:         14px;
    border-radius:   50px;
    font-family:     inherit;
    font-size:       1rem;
    font-weight:     700;
    text-decoration: none;
    transition:      background .2s, transform .2s;
    box-shadow:      0 4px 14px rgba(22,163,74,.3);
}
.mss-btn-checkout:hover { background: #15803d; transform: translateY(-1px); color: #fff; }

.mss-btn-cart-page {
    display:         block;
    text-align:      center;
    background:      #f1f5f9;
    color:           var(--mss-text-muted);
    padding:         10px;
    border-radius:   50px;
    font-family:     inherit;
    font-size:       .85rem;
    text-decoration: none;
    transition:      background .2s;
}
.mss-btn-cart-page:hover { background: #e2e8f0; color: inherit; }

/* ── Toast ──────────────────────────────────────────────── */
.mss-toast {
    position:        fixed;
    bottom:          96px;
    left:            50%;
    transform:       translateX(-50%) translateY(10px);
    background:      #1e2a3a;
    color:           #fff;
    padding:         10px 22px;
    border-radius:   50px;
    font-family:     inherit;
    font-size:       .88rem;
    font-weight:     500;
    z-index:         9998;
    opacity:         0;
    transition:      opacity .25s, transform .25s;
    pointer-events:  none;
    white-space:     nowrap;
    box-shadow:      0 4px 16px rgba(0,0,0,.25);
    max-width:       90vw;
}
.mss-toast.show {
    opacity:   1;
    transform: translateX(-50%) translateY(0);
}
.mss-toast.success { background: #16a34a; }
.mss-toast.error   { background: #dc2626; }

/* ── ریسپانسیو ───────────────────────────────────────────── */
@media (max-width: 480px) {
    .mss-container          { padding: 14px 12px 90px; }
    .mss-products-grid      { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .mss-product-link img   { height: 130px; }
    .mss-product-title      { font-size: .8rem; }
    .mss-add-to-cart        { font-size: .75rem; padding: 8px; }
    .mss-modal-sheet        { padding: 12px 14px 28px; }
    .mss-cart-fab           { bottom: 20px; left: 16px; width: 52px; height: 52px; }
}

@media (min-width: 520px) {
    .mss-products-grid { grid-template-columns: repeat(3, 1fr); }
}