#scp-app { --bg:#111; --card:#1a1a1a; --stroke:#fff; --text:#fafafa; --muted:#bbb; font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); }
/* #scp-app .scp-card { background:var(--card); border:1px solid var(--stroke); border-radius:16px; padding:16px; margin:16px 0; } */
#scp-app .scp-title { margin:0 0 12px; font-size:20px; }
#scp-app .scp-grid { display:grid; gap:12px; grid-template-columns: repeat(2, minmax(0,1fr)); }
#scp-app .scp-field { display:flex; flex-direction:column; gap:6px; position:relative; }
#scp-app .scp-field small { position:absolute; right:10px; bottom:11px; font-size: 14px; display: flex; align-items: center; gap: 5px;}
#scp-app input, #scp-app select { background:#0f0f0f; color:var(--text); border:1px solid var(--stroke); border-radius:10px; }
/* #scp-app .scp-btn { background:#e11d23; color:#fff; border:0; padding:10px 14px; border-radius:12px; cursor:pointer; } */
#scp-app .scp-result { display:flex; gap:16px; margin:15px 0; }

#scp-app .scp-searchbar { display:flex; gap:8px; align-items:center; margin-bottom:10px; }
#scp-app .scp-searchbar input { width:100%; }

#scp-app .scp-meal-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
#scp-app .scp-meal { display:grid; grid-template-columns: 40px 1fr 56px; align-items:center; gap:10px; background:#0f0f0f; border:1px solid var(--stroke); border-radius:14px; padding:8px; }
#scp-app .scp-meal .scp-add { width:36px; height:36px; border-radius:12px; border:1px solid #E00800; background:transparent; color:#E00800; font-size:22px; line-height:1; cursor:pointer; display: flex; align-items: center; justify-content: center; }
#scp-app .scp-meal .scp-meal-title { font-weight:600; font-size: 12px; }
#scp-app .scp-meal .scp-meal-sub { font-size:12px; color:var(--muted); margin-top:2px; }
#scp-app .scp-meal .scp-meal-thumb img { width:56px; height:56px; object-fit:cover; border-radius:12px; border:1px solid var(--stroke); }

#scp-app .scp-drawer { position:sticky; bottom:0; background:#fff; color:#111; border-radius:16px 16px 0 0; border:1px solid #ddd; padding:12px; }
#scp-app .scp-drawer-head { display:flex; justify-content:space-between; gap:10px; margin-bottom:8px; }
#scp-app .scp-cart { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0; max-height:40vh; overflow:auto; }
#scp-app .scp-cart-item { display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid #eee; border-radius:12px; padding:8px; background:#fafafa; }
#scp-app .scp-qty { display:flex; align-items:center; gap:6px; }
#scp-app .scp-qty .scp-minus, #scp-app .scp-qty .scp-plus { background:#fff; border:1px solid #ddd; border-radius:8px; width:32px; height:32px; cursor:pointer; }
#scp-app .scp-qty input { width:52px; height: 32px; text-align:center; border:1px solid #ddd; border-radius:8px; color:#111; background:#fff; padding:6px; }
#scp-app .scp-drawer-actions { display:flex; justify-content:flex-end; margin-top:10px; }
#scp-app .scp-drawer .scp-btn { background:#e11d23; color:#fff; border-radius:10px; padding:10px 14px; }
#scp-app .scp-add:disabled,
#scp-app .scp-plus:disabled { opacity:.4; cursor:not-allowed; }
#scp-limit-note { direction: rtl; }
.scp-card {
    margin: 0 0 15px;
}
#scp-app .scp-cart-item {
    border: 0;
    background: transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 1px solid #889096;
    padding: 8px 0;
}
#scp-app .scp-cart-item:last-child {
    border-bottom: 0;
}
#scp-app .scp-cart {
    border: 1px solid #19181A;
    padding: 0 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.scp-cart-info {
    font-size: 12px;
}
.scp-cart-info small {
    font-size: 12px;
}
#scp-app .scp-qty .scp-del { 
    background: transparent; 
    border: 0; 
    /* border-radius:8px;  */
    width:32px; 
    height:32px; 
    cursor:pointer; 
}

#scp-app input, #scp-app select {
    text-align: left;
    direction: ltr;
}
.calculate-form-wrapper .form-control.icon-form-control {
    padding-right: 15px;
    padding-left: 60px;
}
#scp-app .scp-field small {
    left: 10px;
}


html[lang="ar"] #scp-app input, 
html[lang="ar"] #scp-app select {
    text-align: right;
    direction: rtl;
}
html[lang="ar"] .calculate-form-wrapper .form-control.icon-form-control {
    padding-right: 75px;
    padding-left: 15px;
}
html[lang="ar"] #scp-app .scp-field small {
    right: 10px;
    left: inherit;
}


@media (max-width: 720px) { #scp-app .scp-grid { grid-template-columns: 1fr; } }