/* =========================================
   MOBILE LAYOUT (SHOPIFY STYLE LIST VIEW)
   <= 768px
========================================= */
@media (max-width: 768px) {

  /* كروت الداشبورد نفسها */
  .owner-card {
    padding: 14px;
    font-size: 15px;
  }
  .owner-card h3 {
    font-size: 15px;
  }

  /* إخفاء رؤوس الجداول على الموبايل */
  .owner-products-table thead,
  .vendor-products-table thead,
  .orders-table thead {
    display: none;
  }

  /* كل صف منتج يبقى Card خفيف */
  .owner-products-table tr {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row ;
    align-items: flex-start;
    padding: 10px 12px;
    margin: 10px 0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  }

  /* خلايا الجدول الأساسية */
  .owner-products-table td {
    border: 0 !important;
    padding: 3px 0 !important;
    font-size: 13px;
  }

  /* هنستعمل الترتيب بالـ order بدل ::before */
  .owner-products-table td::before {
    display: none !important;
  }

  /* ==============================
     صورة المنتج (70px يسار)
  ===============================*/
  .owner-products-table td[data-label="Image"] {
    order: 1;
    flex: 0 0 70px;
    margin-right: 10px;
    margin: 0 12px 0 0;
  }

  .owner-products-table td[data-label="Image"] img {
    width: 70px !important;
    height: 70px !important;
    border-radius: 8px;
    object-fit: cover;
    display: block;
  }
  
  /* منطقة الاسم والمحتوى */
    .styliiiish-product-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

  /* ==============================
     ترويسة الصف: الاسم + زر More
  ===============================*/
  .owner-products-table td[data-label="Name"] {
    order: 2;
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }

  /* اسم المنتج */
  .owner-products-table td[data-label="Name"] .inline-edit {
    display: block;
    font-size: 16px;
    font-weight: 600;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* زر More (إنت تضيفه في الـ HTML أو بالـ JS)
     مثال العنصر:
     <button class="styliiiish-more-btn">⋮</button>
  */
  .styliiiish-more-btn {
    border: none;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
  }

  /* ==============================
     Description (3 سطور + تكبير عند الـ focus)
  ===============================*/
  .owner-products-table td[data-label="Description"] {
    order: 3;
    flex: 1 1 100%;
    margin-top: 4px;
  }

  .inline-description {
    display: block;
    font-size: 16px;
    line-height: 1.4;
    max-height: 4.2em; /* تقريباً 3 سطور */
    overflow: hidden;
    opacity: 0.9;
  }

  .inline-description:focus {
    max-height: 12em;
    overflow-y: auto;
    background: #f5f9ff;
    padding: 4px;
    border-radius: 6px;
    outline: none;
  }

  /* ==============================
     Attributes
  ===============================*/
  .owner-products-table td[data-label="Attributes"] {
    order: 4;
    flex: 1 1 100%;
    font-size: 12px;
    opacity: 0.9;
    margin-top: 2px;
  }

  .inline-attributes {
    max-width: 100%;
    display: block;
    word-break: break-word;
    font-size: 16px ;
  }

  /* ==============================
     Categories
  ===============================*/
  .owner-products-table td[data-label="Categories"] {
    order: 5;
    flex: 1 1 100%;
    margin-top: 6px;
    font-size: 12px;
  }

  .cats-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }

  .cats-edit-btn {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
    text-align: center;
    margin-top: 3px;
  }

  /* ==============================
     Price
  ===============================*/
  .owner-products-table td[data-label="Price"] {
    order: 6;
    flex: 0 0 auto;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 700;
    color: #0073aa;
  }

  .owner-products-table td[data-label="Price"] .inline-edit {
    display: inline-block;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ==============================
     Status
  ===============================*/
  .owner-products-table td[data-label="Status"] {
    order: 7;
    flex: 0 0 auto;
    margin-top: 4px;
    font-size: 12px;
  }

  select.inline-status {
    width: 120px;
    font-size: 16px;
    padding: 4px 6px;
    border-radius: 6px;
  }

  /* ==============================
     Actions Row (ستُستبدل بـ Menu من زر More لو حبيت)
  ===============================*/
  .owner-products-table td[data-label="Actions"] {
    order: 8;
    flex: 1 1 100%;
    margin-top: 8px;
  }

  .owner-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .owner-action-btn {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 6px;
    flex: 1 1 auto;
    text-align: center;
  }

  /* لو حبيت تخفي الأزرار وتستخدم زر More فقط على الموبايل:
     فعّل السطرين دول:
  */
  /*
  .owner-action-buttons {
    display: none;
  }
  */

  /* ==============================
     Bulk bar – stacked
  ===============================*/
  .bulk-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .bulk-bar select,
  .bulk-bar button {
    width: 100%;
    margin-bottom: 8px;
  }

  /* ==============================
     Toolbar / Filters
  ===============================*/
  .styliiiish-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .styliiiish-filters-group,
  .styliiiish-bulk-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  #styliiiish-search,
  #styliiiish-filter-cat,
  #styliiiish-filter-status,
  #styliiiish-bulk-action,
  #styliiiish-bulk-apply {
    width: 100%;
  }

  /* ==============================
     Pagination center
  ===============================*/
  .pagination-wrapper {
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  .pagination-wrapper a.button {
    min-width: 36px;
    margin-bottom: 4px;
    text-align: center;
  }
  
  .btn-edit {
        display: none !important;
    }
    
    
    
    
    .styliiiish-pagination-top {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
}






/* =========================================
   ⭐ FIX — Stats fully aligned on mobile
========================================= */




    /* إصلاح شامل للـ STATS */
   /* الكونتينر الأساسي */
    .styliiiish-stats-bar {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Published — FULL WIDTH */
    .styliiiish-stats-bar > .styliiiish-stat-box {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        background: #fff !important;
        border-radius: 12px !important;
        padding: 14px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Row of 2 boxes */
    .styliiiish-stats-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Total + Draft */
    .styliiiish-stats-row .styliiiish-stat-box {
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;

        background: #fff !important;
        border-radius: 12px !important;
        padding: 14px !important;
        margin: 0 !important;
        box-sizing: border-box !important;

        min-width: 0 !important; /* أهم سطر — يمنع الخروج اليمين على iPhone */
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    /* داخل البوكس */
    .styliiiish-stat-box * {
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        line-height: 1.3 !important;
        width: 100% !important;
    }
    
    
    /* ===============================
       COLORS FOR STATS BADGES
       =============================== */
    
    /* Published */
    .stat-published {
        background: #f5fff2 !important;
        border: 1px solid #d8f5d0 !important;
        color: #28a745 !important;
    }
    
    /* Total */
    .stat-total {
    
        background: #e8f7ff !important;
        border: 1px solid #bde6ff !important;
        color: #0073aa !important;
    }
    
    /* Draft */
    .stat-draft {
        background: #fff4f4 !important;
        border: 1px solid #ffc9c9 !important;
        color: #dc3545 !important;
    }


 /* المربع الصغير الملون قبل كل بوكس */
.styliiiish-stat-box::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    margin-bottom: 6px;
    border-radius: 6px;
    opacity: 0.25;
}

/* Published — اللون الأخضر */
.styliiiish-stat-box.stat-published::before {
    background: #28a745 !important;
}

/* Total — اللون الأزرق */
.styliiiish-stat-box.stat-total::before {
    background: #0073aa !important;
}

/* Draft — اللون الأحمر */
.styliiiish-stat-box.stat-draft::before {
    background: #dc3545 !important;
}


    
}



/* =========================================
   MOBILE (<= 650px)
   تعديلات بسيطة إضافية
========================================= */
@media (max-width: 650px) {

  .owner-products-table tr {
    padding: 10px;
  }

  .owner-products-table td[data-label="Name"] .inline-edit {
    font-size: 13px;
  }

  .inline-description {
    font-size: 16px;
  }

  .owner-products-table td[data-label="Price"] {
    font-size: 13px;
  }
}



/* =========================================
   MOBILE (<= 480px)
   تصغير خفيف للخطوط
========================================= */
@media (max-width: 480px) {

  .owner-card h3 {
    font-size: 14px;
  }

  .owner-products-table td {
    font-size: 12px;
  }

  .owner-products-table td[data-label="Price"] {
    font-size: 12px;
  }

  .stats-grid .stat-card {
    padding: 14px;
  }

  .stat-card .stat-number {
    font-size: 20px;
  }
}

















/* ============== Responsive for Mobile ============== */
@media (max-width: 768px) {

    .styliiiish-user-manage-products .pretty-stats {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .styliiiish-user-manage-products .pretty-stat-box {
        flex: 0 0 calc(50% - 12px); /* اتنين جنب بعض */
        min-width: unset;
        padding: 16px;
    }

    .styliiiish-user-manage-products .pretty-label {
        font-size: 14px;
    }

    .styliiiish-user-manage-products .pretty-value {
        font-size: 14px;
    }

    .styliiiish-user-manage-products .pretty-dot {
        width: 14px;
        height: 14px;
        margin-bottom: 4px;
    }
}







/* Skeleton Base */
.skeleton {
    background: #f3f3f3;
    border-radius: 14px;
    width: 100%;
    height: 95px;
    position: relative;
    overflow: hidden;
}

/* Shine Animation */
.skeleton::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.5) 50%,
        rgba(255,255,255,0) 100%
    );
    animation: skeleton-shimmer 1.4s infinite ease-in-out;
}

@keyframes skeleton-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}


/* Responsive skeleton grid */
@media (max-width: 768px) {
    .skeleton-stats {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .skeleton-stats .skeleton {
        flex: 0 0 calc(50% - 12px); /* اتنين جنب بعض */
        height: 90px;
    }
}












































































/* ================================
   CUSTOMER DRESSES – REVIEW CARDS
   مستقل عن manage products
================================ */

.sty-vendor-review-wrapper {
    margin-top: 10px;
}

.sty-vendor-review-desc {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 15px;
    color: #444;
}

/* قائمة الكروت */
.sty-vendor-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* الكارد نفسه */
.sty-vendor-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #ffffff;
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* العمود الشمال: تشيك بوكس + صورة */
.sty-vendor-card-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 0 80px;
}

/* التشيك بوكس */
.sty-vendor-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

/* الصورة */
.sty-vendor-thumb img {
    width: 70px !important;
    height: 70px !important;
    border-radius: 8px;
    object-fit: cover;
    display: block;
}

/* جسم الكارد */
.sty-vendor-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* عنوان الفستان */
.sty-vendor-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 2px;
    line-height: 1.3;
}

/* بيانات إضافية */
.sty-vendor-meta {
    font-size: 13px;
    color: #555;
    line-height: 1.4;
}

.sty-vendor-meta > div {
    margin-bottom: 2px;
}

/* حالة المنتج */
.sty-vendor-status {
    margin-top: 4px;
}

/* بادج عام */
.sty-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
}

/* نفس ألوانك الحالية */
.sty-badge-pending {
    background: #fff7d6;
    border-color: #f1d26b;
    color: #a1760a;
}

.sty-badge-draft {
    background: #ffe7e7;
    border-color: #f5b4b4;
    color: #c0392b;
}

/* أزرار الأكشن */
.sty-vendor-actions {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sty-btn {
    display: inline-block;
    border-radius: 8px;
    border: 0;
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

/* Approve – أخضر */
.sty-approve {
    background: #28a745;
    color: #fff;
}

/* Reject – أحمر */
.sty-reject {
    background: #dc3545;
    color: #fff;
}

/* Edit – رمادي */
.sty-edit {
    background: #6c757d;
    color: #fff;
}

/* View – أزرق فاتح */
.sty-view {
    background: #e8f4ff;
    color: #0073aa;
}

/* رسالة لا توجد عناصر */
.sty-no-items {
    padding: 20px;
    border-radius: 10px;
    background: #f7f7f7;
    text-align: center;
    font-size: 14px;
    color: #666;
}

/* ==========================
   RESPONSIVE – موبايل
   (<= 768px)
========================== */
@media (max-width: 768px) {

    .sty-vendor-card {
        padding: 10px 12px;
    }

    .sty-vendor-title {
        font-size: 14px;
    }

    .sty-vendor-meta {
        font-size: 12px;
    }

    .sty-btn {
        flex: 1 1 48%;
        text-align: center;
    }
}

/* موبايل صغير جداً */
@media (max-width: 480px) {

    .sty-vendor-card {
        padding: 8px 10px;
    }

    .sty-vendor-title {
        font-size: 13px;
    }

    .sty-vendor-meta {
        font-size: 11px;
    }

    .sty-btn {
        font-size: 11px;
        padding: 5px 8px;
    }
}