/* =========================================================
   FINAL SALE MOBILE UI
   ========================================================= */

@media(max-width:860px){

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  main{
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
  }

  #tab-sale{
    display:none !important;
  }

  #tab-sale.active{
    display:block !important;

    width:100% !important;
    max-width:100% !important;

    margin:0 !important;
    padding:0 14px 22px !important;

    background:#f7f7fb;

    overflow-x:hidden;
  }

  #tab-sale *{
    box-sizing:border-box;
  }


  /* =========================
     TOP HERO
     ========================= */

  .sf-hero{
    position:relative;

    width:calc(100% + 28px);

    min-height:132px;

    margin:
      0 -14px
      18px;

    padding:
      25px 82px
      22px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:
      0 0 30px 30px;

    background:
      radial-gradient(
        circle at 5% 0%,
        rgba(255,255,255,.11),
        transparent 30%
      ),
      radial-gradient(
        circle at 95% 0%,
        rgba(255,255,255,.08),
        transparent 27%
      ),
      linear-gradient(
        135deg,
        #54209f,
        #7b31da
      );

    box-shadow:
      0 12px 32px
      rgba(87,38,148,.20);

    color:#fff;
  }

  .sf-hero-center{
    text-align:center;
  }

  .sf-hero h2{
    margin:0 !important;

    color:#fff !important;

    font-size:25px !important;
    font-weight:900 !important;
  }

  .sf-hero p{
    margin:7px 0 0 !important;

    color:
      rgba(255,255,255,.80) !important;

    font-size:13px !important;
  }


  .sf-back,
  .sf-hero-icon{
    position:absolute;

    top:50%;

    width:55px;
    height:55px;

    transform:
      translateY(-50%);

    border:0;

    border-radius:18px;

    background:
      rgba(255,255,255,.13);

    color:#fff;
  }

  .sf-back{
    left:17px;

    display:grid;
    place-items:center;

    padding:0;
  }

  .sf-back svg{
    width:27px;
    height:27px;

    fill:none;
    stroke:currentColor;

    stroke-width:2.3;

    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .sf-hero-icon{
    right:17px;

    display:grid;
    place-items:center;
  }

  .sf-hero-icon svg{
    width:32px;
    height:32px;

    fill:none;
    stroke:currentColor;

    stroke-width:1.7;

    stroke-linecap:round;
    stroke-linejoin:round;
  }


  /* =========================
     GENERAL CARDS
     ========================= */

  .sf-card{
    width:100%;

    margin-bottom:15px;

    padding:16px;

    border:
      1px solid #ebe4f1;

    border-radius:22px;

    background:#fff;

    box-shadow:
      0 7px 23px
      rgba(53,34,79,.055);
  }


  .sf-section-head{
    display:flex;

    align-items:center;

    gap:11px;

    margin-bottom:14px;
  }

  .sf-section-icon{
    width:52px;
    height:52px;

    flex:0 0 52px;

    display:grid;
    place-items:center;

    border-radius:15px;

    background:
      linear-gradient(
        145deg,
        #e9d8ff,
        #f6efff
      );

    color:#7430d2;
  }

  .sf-section-icon.small{
    width:43px;
    height:43px;

    flex-basis:43px;

    border-radius:13px;
  }

  .sf-section-icon svg{
    width:27px;
    height:27px;

    fill:none;
    stroke:currentColor;

    stroke-width:1.8;

    stroke-linecap:round;
    stroke-linejoin:round;
  }


  .sf-section-head h2{
    margin:0 !important;

    color:#1d1530 !important;

    font-size:19px !important;

    font-weight:900 !important;
  }

  .sf-section-head p{
    margin:3px 0 0 !important;

    color:#91859c !important;

    font-size:11px !important;
  }


  /* =========================
     CUSTOMER SEARCH
     ========================= */

  .sf-search-box{
    position:relative;

    margin-bottom:5px;
  }

  .sf-search-box input{
    width:100% !important;

    min-height:56px !important;

    padding:
      12px 54px
      12px 14px !important;

    border:
      1px solid #ddd5e6 !important;

    border-radius:15px !important;

    background:#fff !important;

    font-size:15px !important;
  }

  .sf-input-icon{
    position:absolute;

    right:10px;
    top:50%;

    width:37px;
    height:37px;

    transform:
      translateY(-50%);

    display:grid;
    place-items:center;

    border-radius:11px;

    background:#eee2ff;

    color:#7634d5;

    pointer-events:none;
  }

  .sf-input-icon svg{
    width:21px;
    height:21px;

    fill:none;
    stroke:currentColor;

    stroke-width:2;
  }


  .sf-search-help{
    margin:
      0 8px
      10px;

    color:#91869b;

    font-size:11px;
  }


  .sf-hidden-select{
    display:none !important;
  }

  #selectedCustomerCard{
    display:none !important;
  }


  /* =========================
     CUSTOMER RESULTS
     ========================= */

  #customerMobileCards{
    display:grid !important;

    gap:9px;

    margin-bottom:13px;
  }


  .customer-mobile-card{
    width:100% !important;

    min-height:76px !important;

    display:grid !important;

    grid-template-columns:
      50px
      minmax(0,1fr)
      auto !important;

    align-items:center;

    gap:10px;

    padding:
      10px 12px !important;

    border:
      1px solid #decfee !important;

    border-radius:15px !important;

    background:
      linear-gradient(
        135deg,
        #f8f2fd,
        #fff
      ) !important;

    color:#1e1728 !important;

    box-shadow:none !important;

    text-align:right;
  }


  .customer-mobile-card.selected{
    border-color:#bf9ce8 !important;

    background:
      linear-gradient(
        135deg,
        #f4eaff,
        #fff
      ) !important;
  }


  .customer-mobile-avatar{
    width:46px !important;
    height:46px !important;

    display:grid;
    place-items:center;

    border-radius:14px !important;

    background:#e9d9ff !important;

    color:#7632d5 !important;
  }

  .customer-mobile-avatar svg{
    width:27px !important;
    height:27px !important;
  }


  .customer-mobile-data strong{
    display:block;

    color:#21162c !important;

    font-size:15px !important;

    font-weight:900 !important;
  }

  .customer-mobile-data span{
    display:block;

    margin-top:3px;

    color:#776d81 !important;

    font-size:13px !important;
  }


  .customer-mobile-check{
    min-width:70px !important;

    min-height:39px !important;

    padding:
      0 9px !important;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:11px !important;

    background:#eee4f8 !important;

    color:#847390 !important;

    font-size:10px !important;

    font-weight:800 !important;
  }


  .customer-mobile-card.selected
  .customer-mobile-check{
    background:#dff7ed !important;

    color:#07895f !important;
  }


  /* =========================
     ADD CUSTOMER
     ========================= */

  .sf-add-customer{
    width:100% !important;

    min-height:52px;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:7px;

    border:
      1.5px solid #cfaef1;

    border-radius:14px;

    background:#fff;

    color:#7030ce;

    font-size:15px;

    font-weight:900;
  }

  .sf-add-customer span{
    font-size:22px;
  }


  .sf-new-customer{
    margin-top:12px;

    padding:13px;

    border:
      1px dashed #d9c5ec;

    border-radius:16px;

    background:#faf7fd;
  }

  .sf-new-customer.hidden{
    display:none !important;
  }

  .sf-new-title{
    margin-bottom:10px;

    color:#7030ce;

    font-size:16px;

    font-weight:900;
  }


  /* =========================
     FORM FIELDS
     ========================= */

  .sf-two,
  .sf-fields{
    display:grid;

    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:10px;
  }


  .sf-fields label,
  .sf-new-customer label{
    min-width:0;

    margin:0;

    color:#292035;

    font-size:12px;

    font-weight:800;
  }

  .sf-fields label > span{
    display:block;

    margin-bottom:6px;
  }


  .sf-fields input,
  .sf-fields textarea,
  .sf-new-customer input{
    width:100% !important;

    min-height:50px !important;

    margin-top:5px !important;

    padding:
      10px 11px !important;

    border:
      1px solid #ddd6e5 !important;

    border-radius:13px !important;

    background:#fff !important;

    font-size:14px !important;
  }


  .sf-fields textarea{
    min-height:72px !important;
  }


  .sf-full{
    grid-column:1/-1;
  }


  .sf-field-with-icon{
    position:relative;
  }

  .sf-field-with-icon input{
    padding-left:42px !important;
  }

  .sf-mini-icon{
    position:absolute;

    left:6px;
    bottom:6px;

    width:36px;
    height:38px;

    display:grid;
    place-items:center;

    border-radius:9px;

    background:#f1ebf7;

    color:#685d78;

    font-weight:900;
  }


  /* =========================
     AUTO BOX
     ========================= */

  .sf-auto{
    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:14px;

    padding:12px;

    border:
      1px solid #eadcf7;

    border-radius:14px;

    background:
      linear-gradient(
        135deg,
        #faf5ff,
        #f7efff
      );
  }

  .sf-auto-icon{
    width:42px;
    height:42px;

    flex:0 0 42px;

    display:grid;
    place-items:center;

    border-radius:11px;

    background:#e9d9ff;

    color:#7130cd;
  }

  .sf-auto-icon svg{
    width:23px;
    height:23px;

    fill:none;
    stroke:currentColor;

    stroke-width:1.8;
  }


  .sf-auto strong{
    display:block;

    color:#6328b5;

    font-size:14px;
  }

  .sf-auto span{
    display:block;

    margin-top:3px;

    color:#877a92;

    font-size:11px;
  }


  /* =========================
     SUMMARY
     ========================= */

  .sf-summary-head{
    display:flex;

    align-items:center;

    gap:9px;

    margin-bottom:12px;
  }

  .sf-summary-head h2{
    margin:0 !important;

    color:#21172d !important;

    font-size:18px !important;
  }


  #tab-sale .sf-summary-grid{
    display:grid !important;

    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:9px !important;

    margin:0 !important;
  }


  #tab-sale
  .sf-summary-grid > div{
    grid-column:auto !important;

    min-width:0;

    min-height:76px !important;

    display:flex !important;

    flex-direction:column;

    justify-content:center;

    padding:9px !important;

    border:
      1px solid #eadff3 !important;

    border-radius:13px !important;

    background:
      linear-gradient(
        145deg,
        #fbf8fe,
        #fff
      ) !important;

    text-align:center;
  }


  #tab-sale
  .sf-summary-grid span{
    margin-bottom:4px;

    color:#74697d !important;

    font-size:9.5px !important;

    line-height:1.3;
  }


  #tab-sale
  .sf-summary-grid strong{
    color:#7130d0 !important;

    font-size:17px !important;

    font-weight:900;
  }


  /* =========================
     BUTTONS
     ========================= */

  .sf-actions{
    display:grid;

    grid-template-columns:
      1fr 1fr;

    gap:10px;

    width:100%;

    margin-top:2px;
  }


  .sf-actions button{
    min-height:58px;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:7px;

    border-radius:15px;

    font-size:15px;

    font-weight:900;
  }


  .sf-primary{
    order:1;

    border:0;

    background:
      linear-gradient(
        135deg,
        #6522ce,
        #8839ef
      );

    color:#fff;

    box-shadow:
      0 9px 20px
      rgba(102,36,204,.18);
  }


  .sf-secondary{
    order:2;

    border:
      1.5px solid #d1b6ed;

    background:#fff;

    color:#7130d0;
  }


  .sf-save-customer{
    width:100%;

    min-height:51px;

    margin-top:10px;

    border:0;

    border-radius:13px;

    background:
      linear-gradient(
        135deg,
        #6522ce,
        #8436e8
      );

    color:#fff;

    font-size:15px;

    font-weight:900;
  }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media(max-width:390px){

  #tab-sale.active{
    padding:
      0 10px
      18px !important;
  }

  .sf-hero{
    width:calc(100% + 20px);

    margin-right:-10px;
    margin-left:-10px;

    padding-left:67px;
    padding-right:67px;
  }

  .sf-card{
    padding:13px;

    border-radius:19px;
  }

  .sf-two,
  .sf-fields,
  #tab-sale .sf-summary-grid{
    gap:7px !important;
  }

  .sf-fields input,
  .sf-fields textarea{
    font-size:13px !important;
  }

  .customer-mobile-card{
    grid-template-columns:
      44px
      minmax(0,1fr)
      64px !important;

    padding:9px !important;
  }

  .customer-mobile-avatar{
    width:42px !important;
    height:42px !important;
  }

}


/* =========================================================
   FINAL FULL-SCREEN COMPACT SALE UI
   ========================================================= */

@media(max-width:860px){

  /* تقليل المسافات العامة */
  #tab-sale.active{
    padding:
      0 12px
      14px !important;
  }


  /* الهيدر مثل المرجع لكن أقصر */
  .sf-hero{
    width:
      calc(100% + 24px) !important;

    min-height:
      112px !important;

    margin:
      0 -12px
      11px !important;

    padding:
      17px 72px !important;

    border-radius:
      0 0 27px 27px !important;
  }

  .sf-hero h2{
    font-size:
      23px !important;
  }

  .sf-hero p{
    margin-top:
      5px !important;

    font-size:
      12px !important;
  }

  .sf-back,
  .sf-hero-icon{
    width:
      48px !important;

    height:
      48px !important;

    border-radius:
      15px !important;
  }


  /* البطاقات الرئيسية */
  .sf-card{
    margin-bottom:
      10px !important;

    padding:
      12px !important;

    border-radius:
      18px !important;
  }


  /* عناوين الأقسام */
  .sf-section-head{
    gap:
      8px !important;

    margin-bottom:
      9px !important;
  }

  .sf-section-icon{
    width:
      43px !important;

    height:
      43px !important;

    flex-basis:
      43px !important;

    border-radius:
      12px !important;
  }

  .sf-section-icon svg{
    width:
      23px !important;

    height:
      23px !important;
  }

  .sf-section-head h2{
    font-size:
      17px !important;
  }

  .sf-section-head p{
    margin-top:
      2px !important;

    font-size:
      10px !important;
  }


  /* البحث */
  .sf-search-box{
    margin-bottom:
      2px !important;
  }

  .sf-search-box input{
    min-height:
      48px !important;

    padding:
      9px 48px
      9px 12px !important;

    border-radius:
      13px !important;

    font-size:
      14px !important;
  }

  .sf-input-icon{
    width:
      33px !important;

    height:
      33px !important;

    right:
      8px !important;
  }

  .sf-search-help{
    margin:
      2px 7px
      7px !important;

    font-size:
      10px !important;
  }


  /* =========================
     العميل المختار فقط
     ========================= */

  #customerMobileCards{
    gap:
      6px !important;

    margin:
      4px 0 8px !important;
  }


  .sf-selected-customer{
    display:grid;

    grid-template-columns:
      45px
      minmax(0,1fr)
      35px;

    align-items:center;

    gap:9px;

    min-height:67px;

    padding:
      8px 9px;

    border:
      1px solid #d9c7ed;

    border-radius:
      14px;

    background:
      linear-gradient(
        135deg,
        #f5eaff,
        #faf6ff
      );
  }


  .sf-selected-avatar{
    width:
      42px;

    height:
      42px;

    display:grid;

    place-items:center;

    border-radius:
      13px;

    background:
      #e8d6ff;

    color:
      #742fd4;
  }


  .sf-selected-avatar svg{
    width:
      25px;

    height:
      25px;

    fill:none;

    stroke:
      currentColor;

    stroke-width:
      1.8;

    stroke-linecap:
      round;
  }


  .sf-selected-data{
    min-width:0;
  }

  .sf-selected-data strong{
    display:block;

    color:#20162b;

    font-size:
      15px;

    font-weight:
      900;
  }

  .sf-selected-data span{
    display:block;

    margin-top:
      2px;

    color:#776b83;

    font-size:
      12px;

    direction:ltr;

    text-align:right;
  }


  .sf-clear-customer{
    width:
      31px !important;

    height:
      31px !important;

    min-height:
      31px !important;

    padding:
      0 !important;

    border:
      0 !important;

    border-radius:
      50% !important;

    background:
      #9883b0 !important;

    color:
      #fff !important;

    font-size:
      20px !important;

    line-height:
      1 !important;
  }


  /* نتائج البحث قبل اختيار العميل */
  .sf-customer-result{
    width:
      100% !important;

    min-height:
      62px !important;

    display:grid !important;

    grid-template-columns:
      42px
      minmax(0,1fr)
      58px !important;

    align-items:center;

    gap:
      8px;

    padding:
      7px 9px !important;

    border:
      1px solid #ded0eb !important;

    border-radius:
      13px !important;

    background:
      #faf6fd !important;

    color:
      #21172c !important;

    text-align:
      right;
  }


  .sf-result-avatar{
    width:
      39px;

    height:
      39px;

    display:grid;

    place-items:center;

    border-radius:
      12px;

    background:
      #e9d9ff;

    color:
      #7532d4;
  }

  .sf-result-avatar svg{
    width:
      23px;

    height:
      23px;

    fill:none;

    stroke:
      currentColor;

    stroke-width:
      1.8;
  }


  .sf-result-data strong{
    display:block;

    font-size:
      14px;

    color:
      #1d1527;
  }

  .sf-result-data span{
    display:block;

    margin-top:
      2px;

    font-size:
      11px;

    color:
      #74697c;
  }


  .sf-result-select{
    display:flex;

    justify-content:center;

    align-items:center;

    min-height:
      34px;

    padding:
      0 6px;

    border-radius:
      9px;

    background:
      #eee3f8;

    color:
      #816e91;

    font-size:
      10px;
  }


  .sf-no-customers{
    padding:
      12px;

    text-align:center;

    color:#81758c;

    font-size:
      12px;
  }


  /* إضافة عميل */
  .sf-add-customer{
    min-height:
      45px !important;

    font-size:
      14px !important;

    border-radius:
      12px !important;
  }


  /* الحساب التلقائي */
  .sf-auto{
    min-height:
      54px;

    margin-bottom:
      9px !important;

    padding:
      9px !important;

    border-radius:
      12px !important;
  }

  .sf-auto-icon{
    width:
      37px !important;

    height:
      37px !important;

    flex-basis:
      37px !important;
  }

  .sf-auto strong{
    font-size:
      13px !important;
  }

  .sf-auto span{
    font-size:
      10px !important;
  }


  /* =========================
     بيانات البيع 2 × 2
     ========================= */

  .sf-fields{
    gap:
      7px 9px !important;
  }

  .sf-fields label{
    font-size:
      10.5px !important;
  }

  .sf-fields label > span{
    margin-bottom:
      3px !important;
  }

  .sf-fields input,
  .sf-fields textarea{
    min-height:
      43px !important;

    margin-top:
      2px !important;

    padding:
      7px 9px !important;

    border-radius:
      10px !important;

    font-size:
      12px !important;
  }

  .sf-fields textarea{
    min-height:
      53px !important;
  }

  .sf-mini-icon{
    left:
      4px !important;

    bottom:
      4px !important;

    width:
      31px !important;

    height:
      34px !important;

    border-radius:
      8px !important;
  }

  .sf-field-with-icon input{
    padding-left:
      36px !important;
  }


  /* الإجمالي نجعله بنفس الصف بدل مربع ضخم */
  .sf-fields
  label.sf-full:first-of-type{
    grid-column:
      1/-1 !important;
  }


  /* =========================
     ملخص العملية
     ========================= */

  .sf-summary-card{
    padding:
      11px !important;
  }

  .sf-summary-head{
    margin-bottom:
      7px !important;
  }

  .sf-summary-head h2{
    font-size:
      16px !important;
  }

  #tab-sale .sf-summary-grid{
    gap:
      6px !important;
  }

  #tab-sale
  .sf-summary-grid > div{
    min-height:
      57px !important;

    padding:
      6px !important;

    border-radius:
      10px !important;
  }

  #tab-sale
  .sf-summary-grid span{
    margin-bottom:
      2px !important;

    font-size:
      8.5px !important;

    line-height:
      1.25 !important;
  }

  #tab-sale
  .sf-summary-grid strong{
    font-size:
      15px !important;
  }


  /* =========================
     الأزرار
     ========================= */

  .sf-actions{
    gap:
      8px !important;

    margin-top:
      0 !important;
  }

  .sf-actions button{
    min-height:
      49px !important;

    border-radius:
      12px !important;

    font-size:
      14px !important;
  }


  /* نموذج إضافة العميل لا يأخذ مساحة حتى يتم فتحه */
  .sf-new-customer.hidden{
    display:
      none !important;
  }

}


/* =========================================================
   REFERENCE-SIZE FINAL COMPACT MODE
   ========================================================= */

@media(max-width:860px){

  /* =========================
     الصفحة العامة
     ========================= */

  #tab-sale.active{
    padding:
      0 10px
      12px !important;
  }


  /* =========================
     الرأس البنفسجي
     ========================= */

  .sf-hero{
    width:
      calc(100% + 20px) !important;

    min-height:
      104px !important;

    margin:
      0 -10px
      9px !important;

    padding:
      14px 65px !important;

    border-radius:
      0 0 25px 25px !important;
  }

  .sf-hero h2{
    font-size:
      22px !important;
  }

  .sf-hero p{
    margin-top:
      4px !important;

    font-size:
      11px !important;
  }

  .sf-back,
  .sf-hero-icon{
    width:
      45px !important;

    height:
      45px !important;

    border-radius:
      14px !important;
  }


  /* =========================
     البطاقات
     ========================= */

  .sf-card{
    margin-bottom:
      8px !important;

    padding:
      10px !important;

    border-radius:
      16px !important;
  }


  .sf-section-head{
    margin-bottom:
      7px !important;

    gap:
      7px !important;
  }

  .sf-section-icon{
    width:
      39px !important;

    height:
      39px !important;

    flex-basis:
      39px !important;

    border-radius:
      11px !important;
  }

  .sf-section-icon svg{
    width:
      21px !important;

    height:
      21px !important;
  }

  .sf-section-head h2{
    font-size:
      16px !important;
  }

  .sf-section-head p{
    font-size:
      9.5px !important;
  }


  /* =========================
     البحث
     ========================= */

  .sf-search-box input{
    min-height:
      44px !important;

    padding:
      7px 43px
      7px 10px !important;

    border-radius:
      11px !important;

    font-size:
      13px !important;
  }

  .sf-input-icon{
    width:
      30px !important;

    height:
      30px !important;

    right:
      7px !important;

    border-radius:
      9px !important;
  }

  .sf-input-icon svg{
    width:
      18px !important;

    height:
      18px !important;
  }

  .sf-search-help{
    margin:
      1px 5px
      4px !important;

    font-size:
      9px !important;
  }


  /* =========================
     إخفاء الشكل القديم للعملاء
     ========================= */

  #customerMobileCards
  .customer-mobile-card,

  #customerMobileCards
  .sf-selected-customer,

  #customerMobileCards
  .sf-customer-result{

    display:none !important;
  }


  /* =========================
     العميل المحدد
     ========================= */

  #customerMobileCards{
    margin:
      3px 0
      6px !important;

    gap:
      5px !important;
  }


  .sf-one-customer{
    display:grid;

    grid-template-columns:
      39px
      minmax(0,1fr)
      29px;

    align-items:center;

    gap:
      7px;

    min-height:
      56px;

    padding:
      6px 8px;

    border:
      1px solid #d9c6ed;

    border-radius:
      11px;

    background:
      linear-gradient(
        135deg,
        #f5eaff,
        #faf6ff
      );
  }


  .sf-one-avatar{
    width:
      36px;

    height:
      36px;

    display:grid;

    place-items:center;

    border-radius:
      10px;

    background:
      #e8d7ff;

    color:
      #7430d4;
  }

  .sf-one-avatar svg{
    width:
      22px;

    height:
      22px;

    fill:none;

    stroke:
      currentColor;

    stroke-width:
      1.8;
  }


  .sf-one-info strong{
    display:block;

    color:
      #21172c;

    font-size:
      13px;

    font-weight:
      900;
  }

  .sf-one-info span{
    display:block;

    margin-top:
      1px;

    color:
      #756b80;

    font-size:
      11px;

    direction:ltr;

    text-align:right;
  }


  .sf-one-remove{
    width:
      27px !important;

    height:
      27px !important;

    min-height:
      27px !important;

    padding:
      0 !important;

    border:
      0 !important;

    border-radius:
      50% !important;

    background:
      #9681ad !important;

    color:
      white !important;

    font-size:
      17px !important;
  }


  /* =========================
     نتائج البحث
     ========================= */

  .sf-search-result{
    display:grid !important;

    grid-template-columns:
      37px
      minmax(0,1fr)
      52px;

    align-items:center;

    gap:
      7px;

    width:
      100% !important;

    min-height:
      53px !important;

    padding:
      5px 7px !important;

    border:
      1px solid #ded0eb !important;

    border-radius:
      11px !important;

    background:
      #faf6fd !important;

    color:
      #21172c !important;

    text-align:right;
  }


  .sf-search-avatar{
    width:
      34px;

    height:
      34px;

    display:grid;

    place-items:center;

    border-radius:
      10px;

    background:
      #eadcff;

    color:
      #7632d4;
  }

  .sf-search-avatar svg{
    width:
      20px;

    height:
      20px;

    fill:none;

    stroke:
      currentColor;

    stroke-width:
      1.8;
  }


  .sf-search-data strong{
    display:block;

    font-size:
      12px;

    color:
      #21162c;
  }

  .sf-search-data span{
    display:block;

    margin-top:
      1px;

    color:
      #756a81;

    font-size:
      10px;
  }


  .sf-search-choose{
    display:grid;

    place-items:center;

    min-height:
      30px;

    border-radius:
      8px;

    background:
      #eee3f8;

    color:
      #816f91;

    font-size:
      9px;
  }


  /* =========================
     زر إضافة العميل
     ========================= */

  .sf-add-customer{
    min-height:
      39px !important;

    border-radius:
      10px !important;

    font-size:
      12px !important;

    margin-top:
      2px !important;
  }

  .sf-add-customer span{
    font-size:
      18px !important;
  }


  /* =========================
     بطاقة بيانات البيع
     ========================= */

  .sf-sale-card{
    padding:
      10px !important;
  }


  .sf-auto{
    min-height:
      47px !important;

    margin-bottom:
      7px !important;

    padding:
      7px !important;

    border-radius:
      10px !important;
  }

  .sf-auto-icon{
    width:
      33px !important;

    height:
      33px !important;

    flex-basis:
      33px !important;

    border-radius:
      9px !important;
  }

  .sf-auto-icon svg{
    width:
      19px !important;

    height:
      19px !important;
  }

  .sf-auto strong{
    font-size:
      11px !important;
  }

  .sf-auto span{
    font-size:
      9px !important;
  }


  /* =========================
     الحقول
     ========================= */

  .sf-fields{
    gap:
      5px 7px !important;
  }

  .sf-fields label{
    font-size:
      9.5px !important;
  }

  .sf-fields label > span{
    margin-bottom:
      2px !important;
  }

  .sf-fields input,
  .sf-fields textarea{
    min-height:
      38px !important;

    padding:
      5px 7px !important;

    margin-top:
      1px !important;

    border-radius:
      9px !important;

    font-size:
      11px !important;
  }

  .sf-fields textarea{
    min-height:
      43px !important;
  }

  .sf-mini-icon{
    width:
      27px !important;

    height:
      29px !important;

    left:
      4px !important;

    bottom:
      4px !important;

    font-size:
      11px;
  }

  .sf-field-with-icon input{
    padding-left:
      32px !important;
  }


  /* =========================
     ملخص العملية
     ========================= */

  .sf-summary-card{
    padding:
      9px !important;
  }

  .sf-summary-head{
    margin-bottom:
      5px !important;
  }

  .sf-summary-head h2{
    font-size:
      14px !important;
  }

  #tab-sale .sf-summary-grid{
    gap:
      5px !important;
  }

  #tab-sale
  .sf-summary-grid > div{
    min-height:
      49px !important;

    padding:
      4px !important;

    border-radius:
      8px !important;
  }

  #tab-sale
  .sf-summary-grid span{
    font-size:
      7.7px !important;

    margin-bottom:
      1px !important;
  }

  #tab-sale
  .sf-summary-grid strong{
    font-size:
      13px !important;
  }


  /* =========================
     الأزرار النهائية
     ========================= */

  .sf-actions{
    gap:
      7px !important;
  }

  .sf-actions button{
    min-height:
      44px !important;

    border-radius:
      10px !important;

    font-size:
      12px !important;
  }

}


/* =========================================================
   ULTRA COMPACT - FIT COMPLETE SALE SCREEN
   ========================================================= */

@media(max-width:860px){

  /* الصفحة */
  #tab-sale.active{
    padding:0 8px 8px !important;
  }


  /* ===== الرأس ===== */

  .sf-hero{
    width:calc(100% + 16px) !important;
    min-height:82px !important;

    margin:
      0 -8px
      6px !important;

    padding:
      9px 56px !important;

    border-radius:
      0 0 22px 22px !important;
  }

  .sf-hero h2{
    font-size:20px !important;
  }

  .sf-hero p{
    margin-top:2px !important;
    font-size:9.5px !important;
  }

  .sf-back,
  .sf-hero-icon{
    width:39px !important;
    height:39px !important;

    border-radius:12px !important;
  }

  .sf-back{
    left:12px !important;
  }

  .sf-hero-icon{
    right:12px !important;
  }


  /* ===== البطاقات الرئيسية ===== */

  .sf-card{
    margin-bottom:6px !important;

    padding:8px !important;

    border-radius:14px !important;
  }


  /* ===== عناوين البطاقات ===== */

  .sf-section-head{
    gap:6px !important;

    margin-bottom:5px !important;
  }

  .sf-section-icon{
    width:34px !important;
    height:34px !important;

    flex-basis:34px !important;

    border-radius:10px !important;
  }

  .sf-section-icon svg{
    width:18px !important;
    height:18px !important;
  }

  .sf-section-head h2{
    font-size:14px !important;
  }

  .sf-section-head p{
    margin-top:1px !important;
    font-size:8px !important;
  }


  /* ===== البحث ===== */

  .sf-search-box input{
    min-height:38px !important;

    padding:
      5px 37px
      5px 8px !important;

    border-radius:9px !important;

    font-size:12px !important;
  }

  .sf-input-icon{
    width:27px !important;
    height:27px !important;

    right:5px !important;

    border-radius:8px !important;
  }

  .sf-input-icon svg{
    width:15px !important;
    height:15px !important;
  }

  .sf-search-help{
    margin:
      0 4px
      3px !important;

    font-size:7.5px !important;
  }


  /* ===== العميل المختار ===== */

  .sf-one-customer{
    grid-template-columns:
      32px
      minmax(0,1fr)
      24px !important;

    min-height:43px !important;

    gap:5px !important;

    padding:4px 6px !important;

    border-radius:9px !important;
  }

  .sf-one-avatar{
    width:30px !important;
    height:30px !important;

    border-radius:8px !important;
  }

  .sf-one-avatar svg{
    width:18px !important;
    height:18px !important;
  }

  .sf-one-info strong{
    font-size:11px !important;
  }

  .sf-one-info span{
    margin-top:0 !important;

    font-size:9px !important;
  }

  .sf-one-remove{
    width:23px !important;
    height:23px !important;
    min-height:23px !important;

    font-size:14px !important;
  }


  /* ===== زر إضافة العميل ===== */

  .sf-add-customer{
    min-height:32px !important;

    margin-top:1px !important;

    border-radius:8px !important;

    font-size:10px !important;
  }

  .sf-add-customer span{
    font-size:15px !important;
  }


  /* ===== الحساب التلقائي ===== */

  .sf-auto{
    min-height:38px !important;

    margin-bottom:5px !important;

    padding:5px 6px !important;

    gap:6px !important;

    border-radius:8px !important;
  }

  .sf-auto-icon{
    width:28px !important;
    height:28px !important;

    flex-basis:28px !important;

    border-radius:7px !important;
  }

  .sf-auto-icon svg{
    width:16px !important;
    height:16px !important;
  }

  .sf-auto strong{
    font-size:10px !important;
  }

  .sf-auto span{
    margin-top:1px !important;

    font-size:7.5px !important;
  }


  /* ===== حقول البيع ===== */

  .sf-fields{
    gap:
      3px 6px !important;
  }

  .sf-fields label{
    font-size:8px !important;

    line-height:1.15 !important;
  }

  .sf-fields label > span{
    margin-bottom:1px !important;
  }

  .sf-fields input,
  .sf-fields textarea{
    min-height:32px !important;

    margin-top:0 !important;

    padding:
      3px 6px !important;

    border-radius:7px !important;

    font-size:10px !important;
  }

  .sf-fields textarea{
    min-height:34px !important;
    height:34px !important;
  }

  .sf-mini-icon{
    width:23px !important;
    height:24px !important;

    left:3px !important;
    bottom:3px !important;

    border-radius:6px !important;

    font-size:9px !important;
  }

  .sf-field-with-icon input{
    padding-left:28px !important;
  }


  /* ===== ملخص العملية ===== */

  .sf-summary-card{
    padding:7px !important;
  }

  .sf-summary-head{
    gap:5px !important;

    margin-bottom:4px !important;
  }

  .sf-summary-head .sf-section-icon{
    width:28px !important;
    height:28px !important;

    flex-basis:28px !important;
  }

  .sf-summary-head h2{
    font-size:12px !important;
  }

  #tab-sale .sf-summary-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr))
      !important;

    gap:4px !important;
  }

  #tab-sale
  .sf-summary-grid > div{
    min-height:40px !important;

    padding:3px !important;

    border-radius:7px !important;
  }

  #tab-sale
  .sf-summary-grid span{
    margin-bottom:1px !important;

    font-size:6.7px !important;

    line-height:1.15 !important;
  }

  #tab-sale
  .sf-summary-grid strong{
    font-size:11px !important;
  }


  /* ===== الأزرار ===== */

  .sf-actions{
    gap:5px !important;
  }

  .sf-actions button{
    min-height:37px !important;

    border-radius:8px !important;

    font-size:10.5px !important;
  }

}


/* =========================================================
   FIT COMPLETE SALE VIEW - FINAL
   ========================================================= */

@media(max-width:860px){

  /* الصفحة */
  #tab-sale.active{
    padding:
      0 7px
      7px !important;
  }


  /* الهيدر */
  .sf-hero{
    min-height:72px !important;

    width:
      calc(100% + 14px) !important;

    margin:
      0 -7px
      5px !important;

    padding:
      7px 53px !important;

    border-radius:
      0 0 19px 19px !important;
  }

  .sf-hero h2{
    font-size:
      18px !important;
  }

  .sf-hero p{
    font-size:
      8px !important;

    margin-top:
      1px !important;
  }

  .sf-back,
  .sf-hero-icon{
    width:
      36px !important;

    height:
      36px !important;

    border-radius:
      10px !important;
  }

  .sf-back{
    left:
      10px !important;
  }

  .sf-hero-icon{
    right:
      10px !important;
  }


  /* البطاقات */
  .sf-card{
    margin-bottom:
      5px !important;

    padding:
      7px !important;

    border-radius:
      13px !important;
  }


  /* رؤوس الأقسام */
  .sf-section-head{
    margin-bottom:
      4px !important;

    gap:
      5px !important;
  }

  .sf-section-icon{
    width:
      31px !important;

    height:
      31px !important;

    flex-basis:
      31px !important;
  }

  .sf-section-head h2{
    font-size:
      13px !important;
  }

  .sf-section-head p{
    font-size:
      7px !important;
  }


  /* البحث */
  .sf-search-box input{
    min-height:
      34px !important;

    height:
      34px !important;

    font-size:
      10.5px !important;

    padding:
      3px 34px
      3px 7px !important;
  }

  .sf-input-icon{
    width:
      24px !important;

    height:
      24px !important;
  }

  .sf-search-help{
    margin:
      0 4px
      2px !important;

    font-size:
      6.5px !important;
  }


  /* عند عدم اختيار عميل لا تترك مساحة إضافية */
  #customerMobileCards:empty{
    display:none !important;
    margin:0 !important;
  }


  /* العميل المختار */
  .sf-one-customer{
    min-height:
      38px !important;

    grid-template-columns:
      28px
      minmax(0,1fr)
      21px !important;

    padding:
      3px 5px !important;

    gap:
      4px !important;
  }

  .sf-one-avatar{
    width:
      27px !important;

    height:
      27px !important;
  }

  .sf-one-avatar svg{
    width:
      16px !important;

    height:
      16px !important;
  }

  .sf-one-info strong{
    font-size:
      10px !important;
  }

  .sf-one-info span{
    font-size:
      8px !important;
  }

  .sf-one-remove{
    width:
      20px !important;

    height:
      20px !important;

    min-height:
      20px !important;

    font-size:
      12px !important;
  }


  /* زر إضافة عميل */
  .sf-add-customer{
    min-height:
      29px !important;

    height:
      29px !important;

    font-size:
      9px !important;

    border-radius:
      7px !important;
  }

  .sf-add-customer span{
    font-size:
      13px !important;
  }


  /* بيانات البيع */
  .sf-auto{
    min-height:
      33px !important;

    padding:
      4px 5px !important;

    margin-bottom:
      4px !important;
  }

  .sf-auto-icon{
    width:
      24px !important;

    height:
      24px !important;

    flex-basis:
      24px !important;
  }

  .sf-auto strong{
    font-size:
      9px !important;
  }

  .sf-auto span{
    font-size:
      6.7px !important;
  }


  /* الحقول */
  .sf-fields{
    gap:
      2px 5px !important;
  }

  .sf-fields label{
    font-size:
      7.3px !important;
  }

  .sf-fields input{
    min-height:
      29px !important;

    height:
      29px !important;

    padding:
      2px 5px !important;

    font-size:
      9px !important;

    border-radius:
      6px !important;
  }

  .sf-fields textarea{
    min-height:
      29px !important;

    height:
      29px !important;

    padding:
      3px 5px !important;

    font-size:
      8px !important;

    border-radius:
      6px !important;
  }

  .sf-mini-icon{
    width:
      20px !important;

    height:
      21px !important;

    left:
      2px !important;

    bottom:
      4px !important;
  }

  .sf-field-with-icon input{
    padding-left:
      24px !important;
  }


  /* ملخص العملية */
  .sf-summary-card{
    padding:
      6px !important;
  }

  .sf-summary-head{
    margin-bottom:
      3px !important;
  }

  .sf-summary-head h2{
    font-size:
      11px !important;
  }

  .sf-summary-head
  .sf-section-icon{
    width:
      24px !important;

    height:
      24px !important;

    flex-basis:
      24px !important;
  }

  #tab-sale .sf-summary-grid{
    gap:
      3px !important;
  }

  #tab-sale
  .sf-summary-grid > div{
    min-height:
      34px !important;

    height:
      34px !important;

    padding:
      2px !important;

    border-radius:
      6px !important;
  }

  #tab-sale
  .sf-summary-grid span{
    font-size:
      5.9px !important;

    line-height:
      1.05 !important;

    margin-bottom:
      0 !important;
  }

  #tab-sale
  .sf-summary-grid strong{
    font-size:
      10px !important;
  }


  /* أزرار الحفظ وإعادة التعيين */
  .sf-actions{
    gap:
      5px !important;

    margin-top:
      3px !important;
  }

  .sf-actions button{
    min-height:
      34px !important;

    height:
      34px !important;

    font-size:
      9px !important;

    border-radius:
      7px !important;
  }

}


/* شاشات الجوال القصيرة */
@media(
  max-width:860px
) and (
  max-height:750px
){

  .sf-hero{
    min-height:
      64px !important;
  }

  .sf-search-help{
    display:none !important;
  }

  .sf-section-head p{
    display:none !important;
  }

}


/* =========================================================
   FINAL CUSTOMER SEARCH CARD SIZE FIX
   ========================================================= */

@media(max-width:860px){

  #finalCustomerSearchResults{
    width:100% !important;
    margin:3px 0 5px !important;
    padding:0 !important;
  }


  /* إخفاء أي نتائج قديمة */
  #customerMobileCards,
  #selectedCustomerCard{
    display:none !important;
  }


  #finalCustomerSearchResults
  .final-customer-result{

    appearance:none !important;
    -webkit-appearance:none !important;

    width:100% !important;
    height:auto !important;
    min-height:48px !important;
    max-height:54px !important;

    display:grid !important;

    grid-template-columns:
      34px
      minmax(0,1fr)
      50px !important;

    align-items:center !important;

    gap:7px !important;

    margin:0 !important;

    padding:6px 7px !important;

    border:
      1px solid #d9c9e9 !important;

    border-radius:
      10px !important;

    background:
      linear-gradient(
        135deg,
        #f5eaff,
        #fbf8ff
      ) !important;

    box-shadow:none !important;

    color:#21172c !important;

    text-align:right !important;

    overflow:hidden !important;
  }


  /* الأيقونة */
  #finalCustomerSearchResults
  .final-customer-avatar{

    width:34px !important;
    height:34px !important;

    min-width:34px !important;
    min-height:34px !important;

    max-width:34px !important;
    max-height:34px !important;

    display:grid !important;

    place-items:center !important;

    margin:0 !important;
    padding:0 !important;

    border-radius:
      9px !important;

    background:
      #eadcff !important;

    color:
      #742fd4 !important;

    overflow:hidden !important;
  }


  #finalCustomerSearchResults
  .final-customer-avatar svg{

    width:19px !important;
    height:19px !important;

    min-width:19px !important;
    min-height:19px !important;

    max-width:19px !important;
    max-height:19px !important;

    margin:0 !important;
    padding:0 !important;

    display:block !important;

    fill:none !important;

    stroke:
      #742fd4 !important;

    stroke-width:
      1.8 !important;

    stroke-linecap:
      round !important;

    stroke-linejoin:
      round !important;
  }


  /* بيانات العميل */
  #finalCustomerSearchResults
  .final-customer-info{

    min-width:0 !important;

    display:flex !important;

    flex-direction:column !important;

    justify-content:center !important;

    align-items:flex-start !important;

    gap:1px !important;

    margin:0 !important;

    padding:0 !important;
  }


  #finalCustomerSearchResults
  .final-customer-info strong{

    display:block !important;

    width:100% !important;

    margin:0 !important;

    padding:0 !important;

    color:
      #1f1529 !important;

    font-size:
      11px !important;

    line-height:
      1.25 !important;

    font-weight:
      900 !important;

    white-space:nowrap !important;

    overflow:hidden !important;

    text-overflow:ellipsis !important;
  }


  #finalCustomerSearchResults
  .final-customer-info span{

    display:block !important;

    width:100% !important;

    margin:0 !important;

    padding:0 !important;

    color:
      #766a80 !important;

    font-size:
      8.5px !important;

    line-height:
      1.2 !important;

    direction:ltr !important;

    text-align:right !important;
  }


  /* زر اختيار */
  #finalCustomerSearchResults
  .final-customer-choose{

    width:48px !important;

    min-width:48px !important;

    height:30px !important;

    display:grid !important;

    place-items:center !important;

    margin:0 !important;

    padding:0 !important;

    border-radius:
      8px !important;

    background:
      #eadff6 !important;

    color:
      #755f88 !important;

    font-size:
      8px !important;

    font-weight:
      700 !important;

    line-height:
      1 !important;
  }


  /* العميل بعد اختياره */
  #finalCustomerSearchResults
  .final-selected-customer{

    width:100% !important;

    min-height:48px !important;

    display:grid !important;

    grid-template-columns:
      34px
      minmax(0,1fr)
      auto
      22px !important;

    align-items:center !important;

    gap:6px !important;

    padding:
      6px 7px !important;

    border:
      1px solid #cdb6e9 !important;

    border-radius:
      10px !important;

    background:
      linear-gradient(
        135deg,
        #f4e9ff,
        #fff
      ) !important;
  }


  #finalCustomerSearchResults
  .final-customer-ok{

    padding:
      4px 6px !important;

    border-radius:
      6px !important;

    background:
      #e3f7ee !important;

    color:
      #0b8b62 !important;

    font-size:
      7px !important;

    white-space:
      nowrap !important;
  }


  #finalCustomerSearchResults
  .final-customer-clear{

    width:21px !important;
    height:21px !important;

    min-width:21px !important;
    min-height:21px !important;

    padding:0 !important;

    border:0 !important;

    border-radius:
      50% !important;

    background:
      #9480aa !important;

    color:
      #fff !important;

    font-size:
      13px !important;

    line-height:
      21px !important;
  }

}