:root {
    --bg:#111;
    --card:#1a1a1a;
    --stroke:#fff;
    --text:#fafafa;
    --muted:#bbb;
}
#scp-app {
    font-family: 'MTN Brighter Sans Arabic-Regular';
    color:var(--text);
    margin: 30px 0 0;
}

.calculate-form-wrapper {
    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 {
    color: #FFCC00;
    border: solid 1px #FFCC00;
    background:transparent;
    cursor:pointer;
}
#scp-app .scp-btn:hover {
    color: #FFF;
    border: solid 1px #FFCC00;
    background:#FFCC00;
    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 30px;
}
 #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;
    }
}