/* Cart & Pay (Barkat Shop): the order and the payment step in one box. */
.bks-op{--bks-op-accent:var(--bks-cart,#c40000);--bks-op-bg:#fff;--bks-op-text:#1f1a1a;--bks-op-muted:#6b6363;--bks-op-line:#ece7e2;--bks-op-note:#fff8e1;--bks-op-r:14px;
 background:var(--bks-op-bg);color:var(--bks-op-text);border:1px solid var(--bks-op-line);border-radius:var(--bks-op-r);padding:14px 16px 0;font-size:15px;line-height:1.35;box-shadow:0 8px 30px rgba(0,0,0,.06);position:relative}
.bks-op *{box-sizing:border-box}
.bks-op__title{margin:2px 0 10px;font-size:18px;font-weight:700;color:inherit}
.bks-op button{font:inherit;color:inherit;cursor:pointer}
.bks-op__lines{list-style:none;margin:0;padding:0;max-height:var(--bks-op-maxh,none);overflow:auto}
.bks-op__line{display:grid;grid-template-columns:auto 1fr auto auto auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--bks-op-line)}
.bks-op__line.is-busy{opacity:.55;pointer-events:none}
.bks-op__img{width:40px;height:40px;border-radius:8px;object-fit:cover;display:block;background:#f1ebe6}
.bks-op__img--ph{display:grid;place-items:center;font-weight:700;color:#9c8f86;background:#f2ece7}
.bks-op__info{min-width:0;display:flex;flex-direction:column;gap:2px}
.bks-op__name{font-weight:600;font-size:14px;overflow-wrap:anywhere}
.bks-op__meta{font-size:12px;color:var(--bks-op-muted)}
.bks-op .bks-op__note{all:unset;cursor:pointer;align-self:flex-start;color:var(--bks-op-accent);font-size:12.5px;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.bks-op .bks-op__note.has{color:var(--bks-op-muted);font-weight:400;font-style:italic;text-decoration:none}
.bks-op .bks-op__note.has::before{content:"\270E  ";font-style:normal}
/* Note popup (dish note and kitchen note): tap-to-add chips plus a free line, same pattern as the POS till. */
.bks-op-modal{position:fixed;inset:0;z-index:2147483647;display:flex;align-items:center;justify-content:center;padding:16px;font-family:inherit}
.bks-op-modal__scrim{position:absolute;inset:0;background:rgba(20,15,12,.55)}
.bks-op-modal__box{position:relative;width:min(420px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--bks-op-bg,#fff);color:var(--bks-op-text,#1f1a1a);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.3);padding:20px}
.bks-op-modal__x{all:unset;position:absolute;top:10px;right:10px;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:20px;color:var(--bks-op-muted,#6b6363)}
.bks-op-modal__x:hover{background:#f5f0eb}
.bks-op-modal__title{margin:0 28px 14px 0;font-size:17px;font-weight:700}
.bks-op-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.bks-op-chip{all:unset;box-sizing:border-box;cursor:pointer;padding:8px 14px;border:1.5px solid var(--bks-op-line,#ece7e2);border-radius:999px;font-size:13.5px;font-weight:600;color:var(--bks-op-text,#1f1a1a)}
.bks-op-chip.is-on{background:var(--bks-op-accent);border-color:var(--bks-op-accent);color:#fff}
.bks-op-modal__free{display:block;width:100%;box-sizing:border-box;border:1px solid var(--bks-op-line,#ece7e2);border-radius:8px;padding:10px 12px;font:inherit;font-size:14px;background:#fff;color:#222}
.bks-op-modal__foot{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.bks-op-btn{all:unset;box-sizing:border-box;cursor:pointer;padding:9px 16px;border-radius:8px;font-size:14px;font-weight:600;color:var(--bks-op-text,#1f1a1a);background:#f1ece6}
.bks-op-btn--primary{background:var(--bks-op-accent);color:#fff}
.bks-op__qty{display:inline-flex;align-items:center;border:1px solid #d8d1cb;border-radius:999px;height:32px;overflow:hidden}
.bks-op .bks-op__qty button{all:unset;cursor:pointer;width:30px;height:32px;display:grid;place-items:center;font-size:18px;line-height:1;color:var(--bks-op-text)}
.bks-op .bks-op__qty button:hover{background:#f5f0eb}
.bks-op__n{min-width:20px;text-align:center;font-weight:600;font-size:14px}
.bks-op__price{color:var(--bks-op-accent);font-weight:700;white-space:nowrap;font-size:14px}
.bks-op__price .woocommerce-Price-amount{color:inherit}
.bks-op .bks-op__rm{all:unset;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;font-size:22px;color:#6b6363;border-radius:50%}
.bks-op .bks-op__rm:hover{background:#f5f0eb;color:var(--bks-op-accent)}
.bks-op__knote{margin:14px 0 6px}
.bks-op .bks-op__kbtn{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 12px;border:1.5px dashed #e3c66b;border-radius:10px;background:var(--bks-op-note);color:#6d5512;font-weight:700;font-size:15px;text-align:center;overflow-wrap:anywhere}
.bks-op__knote.has .bks-op__kbtn{justify-content:flex-start;font-weight:500;font-style:italic;text-align:left}
.bks-op__sum{display:grid;grid-template-columns:1fr auto;gap:6px 10px;margin:12px 0 0;padding:10px 0 12px;font-size:14px}
.bks-op__sum dt{margin:0;color:var(--bks-op-muted)}.bks-op__sum dd{margin:0;text-align:right}
.bks-op__sum .bks-op__total{border-top:1.5px solid var(--bks-op-text);padding-top:8px;margin-top:2px;font-size:17px;font-weight:800;color:var(--bks-op-text)}
.bks-op__sum dd.bks-op__total{color:var(--bks-op-accent)}
.bks-op__bar{position:sticky;bottom:0;margin:0 -16px;padding:10px 16px 14px;background:linear-gradient(rgba(255,255,255,0),var(--bks-op-bg) 30%);border-radius:0 0 var(--bks-op-r) var(--bks-op-r)}
.bks-op .bks-op__place{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;border-radius:10px;background:var(--bks-op-accent);color:#fff;font-weight:700;font-size:16px;box-shadow:0 6px 16px color-mix(in srgb,var(--bks-op-accent) 35%,transparent)}
.bks-op .bks-op__place:hover{filter:brightness(1.07)}
.bks-op .bks-op__place[disabled]{opacity:.5;cursor:default}
.bks-op__empty{text-align:center;padding:26px 6px 18px;color:var(--bks-op-muted)}
.bks-op__menu{display:inline-block;margin-top:8px;color:var(--bks-op-accent);font-weight:700}
.bks-op.is-empty .bks-op__bar{display:none}
.bks-op__msg{margin:8px 0;padding:8px 10px;border-radius:8px;background:#fdecec;color:#8a1010;font-size:13px}
/* the payment step */
.bks-op__pay{padding-bottom:16px}
.bks-op .bks-op__back{all:unset;cursor:pointer;color:var(--bks-op-accent);font-weight:600;font-size:14px;margin:4px 0 6px}
.bks-op__muted{color:var(--bks-op-muted);font-size:14px}
.bks-op.is-paying .bks-op__cart,.bks-op.is-paying .bks-op__bar,.bks-op.is-paying>.bks-op__title{display:none}
.bks-op__brief{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;margin:0 0 12px;border:1px solid var(--bks-op-line);border-radius:10px;font-size:14px}
.bks-op__brief b{color:var(--bks-op-accent)}
.bks-op__form .woocommerce-checkout-review-order-table,.bks-op__form #order_review_heading,.bks-op__form #order_comments_field,.bks-op__form .woocommerce-additional-fields>h3{display:none!important}
.bks-op__form .col2-set,.bks-op__form .col2-set .col-1,.bks-op__form .col2-set .col-2{width:100%!important;float:none!important;max-width:none!important}
.bks-op__form form.checkout{display:flex;flex-direction:column;gap:6px;margin:0}
.bks-op__form .form-row{margin:0 0 10px;padding:0}
.bks-op__form .form-row input.input-text,.bks-op__form .form-row textarea,.bks-op__form .form-row select{width:100%;border:1px solid #d8d1cb;border-radius:8px;padding:10px 12px;font:inherit;background:#fff;color:#222}
.bks-op__form h3{font-size:16px;margin:10px 0 8px}
.bks-op__form #payment{background:transparent;border-radius:10px}
.bks-op__form #payment ul.payment_methods{list-style:none;margin:0 0 10px;padding:0;border:0}
.bks-op__form #payment ul.payment_methods li{border:1px solid var(--bks-op-line);border-radius:10px;padding:12px;margin:0 0 8px;background:#fff}
.bks-op__form #payment ul.payment_methods li label{font-weight:600;cursor:pointer}
.bks-op__form #payment .payment_box{margin:8px 0 0;padding:10px;border-radius:8px;background:#faf7f4;font-size:13.5px}
.bks-op__form #payment .payment_box::before{display:none}
.bks-op__form #place_order{width:100%;min-height:50px;border:0;border-radius:10px;background:var(--bks-op-accent)!important;color:#fff!important;-webkit-text-fill-color:#fff;font-weight:800;font-size:16px;cursor:pointer;float:none}
@media (max-width:480px){.bks-op{padding:12px 12px 0}.bks-op__line{grid-template-columns:auto 1fr auto auto;row-gap:6px}.bks-op__price{grid-column:2;grid-row:2;justify-self:start}.bks-op__qty{grid-column:3;grid-row:1/span 2}.bks-op__rm{grid-column:4;grid-row:1/span 2}.bks-op__bar{margin:0 -12px;padding:10px 12px 12px}}
/* in the mini cart drawer */
.bks-op--mini{border:0;border-radius:0;box-shadow:none;padding:4px 0 0;background:transparent}
.bks-op--mini .bks-op__bar{margin:0;padding:10px 0 4px;background:transparent}
.bks-op--mini .bks-op__extra:empty{display:none}
.bks-op--mini .bks-op__extra{margin:4px 0 2px}
a.bks-op__place{text-decoration:none!important;-webkit-text-fill-color:#fff}
/* nothing floats over the customer's order while they pay */
body.woocommerce-checkout #bk-wx,body.woocommerce-checkout #bk-day{display:none!important}
/* the payment step keeps the panel's own colours whatever the theme or a dark checkout style does */
.bks-op__form{color:var(--bks-op-text)}
.bks-op__form .woocommerce-message{display:none!important} /* "added to your cart" notes: the order is right above */
.bks-op__form a{color:var(--bks-op-accent)!important;-webkit-text-fill-color:currentColor}
.bks-op__form #payment{background:transparent!important;color:var(--bks-op-text)!important;border:0!important}
.bks-op__form #payment ul.payment_methods li{color:var(--bks-op-text)!important;background:#fff!important}
.bks-op__form #payment ul.payment_methods li label{color:var(--bks-op-text)!important;-webkit-text-fill-color:currentColor;background:none!important}
.bks-op__form #payment ul.payment_methods li.bks-on,.bks-op__form #payment ul.payment_methods li:has(input:checked){border-color:var(--bks-op-accent)!important;box-shadow:0 0 0 1px var(--bks-op-accent)}
.bks-op__form #payment .place-order{background:transparent!important;padding:6px 0 0!important;margin:0!important;color:var(--bks-op-muted)!important;font-size:13px}
.bks-op__form label,.bks-op__form h3,.bks-op__form .woocommerce-info{color:var(--bks-op-text)}
.bks-op__form .woocommerce-form-coupon-toggle .woocommerce-info{background:#faf7f4!important;border:1px solid var(--bks-op-line)!important;border-radius:10px;padding:10px 12px!important;color:var(--bks-op-text)!important}
.bks-op__form .woocommerce-form-coupon-toggle .woocommerce-info::before{display:none}
.bks-op__sum dd.bks-op__total{margin-left:-10px;padding-left:10px}
/* one Pickup / Delivery choice: the one in the payment step; a second copy that the page prints above the order is hidden */
body:has(.bks-op__form .barkat-fulfil) .barkat-fulfil:not(.bks-op .barkat-fulfil){display:none!important}
/* Pickup / Delivery inside the floating cart (Mini cart setting) */
.bks-op__fulfil{margin:10px 0 2px}
.bks-op.is-empty .bks-op__fulfil{display:none}
/* "Notes for the kitchen" box on the checkout page */
.bks-op--notes{margin:0 0 22px;padding:14px 16px 6px;box-shadow:none}
.bks-op__ntitle{margin:0 0 4px;font-size:1.05rem;font-weight:800}
.bks-op__nsub{margin:0 0 6px;font-size:.88rem;color:var(--bks-op-muted)}
/* merged into WooCommerce's own "Order summary" (block checkout): once our box is placed there (bks-op-merged-here,
   set by the script in notes_box_footer()), its own plain item list is hidden and ours stands in for it */
.bks-op-merged-here>*:not(.bks-op--notes){display:none}
.bks-op-merged-here .bks-op--notes{margin:0 0 8px;padding:0;box-shadow:none;background:none}
/* without photos the name takes the room, not the quantity buttons */
.bks-op__line.no-img{grid-template-columns:minmax(0,1fr) auto auto auto}
@media (max-width:480px){.bks-op__line.no-img{grid-template-columns:minmax(0,1fr) auto auto}.bks-op__line.no-img .bks-op__price{grid-column:1}.bks-op__line.no-img .bks-op__qty{grid-column:2}.bks-op__line.no-img .bks-op__rm{grid-column:3}}
/* "Add add-ons" / "Change add-ons" under a dish */
.bks-op .bks-op__chg{display:inline-block;align-self:flex-start;margin:1px 0 0;font-size:12.5px;font-weight:600;color:var(--bks-op-accent)!important;text-decoration:underline;text-underline-offset:2px}
.bks-op .bks-op__chg:hover{text-decoration:none}
.bks-replace-note{margin:8px 0;padding:8px 12px;border-radius:8px;background:#fff8e1;color:#5a4300;font-size:.9rem}