/* checkout */
.cx-row{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start;justify-content:center}
.cx-card{flex:1 1 520px;min-width:0;box-sizing:border-box;padding:clamp(22px,3vw,32px);border-radius:26px;background:#FFFFFF;border:1px solid rgba(43,18,0,.12);display:flex;flex-direction:column;gap:20px}
.cx-pay{flex:0 1 440px;min-width:min(100%,320px)}
.cx-h{margin:0;font-family:'Kufam','Cairo',sans-serif;font-weight:800;font-size:clamp(26px,3vw,32px);line-height:1.3}
.cx-h3{margin:0;display:flex;align-items:center;gap:10px;font-family:'Kufam','Cairo',sans-serif;font-weight:800;font-size:22px;line-height:1.4}
.cx-l{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:15.5px;color:#4A2410}
.cx-in{width:100%;box-sizing:border-box;min-height:52px;padding:10px 14px;border-radius:14px;border:2px solid rgba(43,18,0,.14);background:#FFF7EE;color:#2B1200;font-family:'Cairo',system-ui,sans-serif;font-size:17px;font-weight:600;line-height:1.5}
.cx-in:focus{outline:3px solid #214C6F;outline-offset:1px}
textarea.cx-in{resize:vertical;min-height:84px}
.cx-seg{flex:1;min-height:52px;border-radius:999px;border:2px solid #214C6F;background:transparent;color:#214C6F;font-family:'Cairo',system-ui,sans-serif;font-size:17px;font-weight:700;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.cx-seg:hover,.cx-seg.on{background:#214C6F;color:#FFFFFF}
.cx-sep{height:1px;background:rgba(43,18,0,.14)}
.cx-line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:17px;line-height:1.55}
.cx-line b{font-weight:700;white-space:nowrap}
.cx-lab{color:#6B3F26;font-weight:600}
.cx-link{font-size:16px;font-weight:700;color:#214C6F;text-decoration:underline;cursor:pointer}
.cx-opt{display:flex;align-items:center;gap:14px;width:100%;box-sizing:border-box;min-height:64px;padding:0 18px;border-radius:18px;background:#FFFFFF;border:2px solid rgba(43,18,0,.14);color:#2B1200;font-family:'Cairo',system-ui,sans-serif;font-size:18px;font-weight:700;text-align:start;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.cx-opt:hover{border-color:#214C6F}
.cx-opt.on{border-color:#214C6F;background:#FFE5D0}
.cx-radio{flex:none;width:26px;height:26px;box-sizing:border-box;border-radius:50%;border:2px solid #214C6F;background:#FFFFFF;display:flex;align-items:center;justify-content:center}
.cx-radio i{display:block;width:12px;height:12px;border-radius:50%;background:#FF7B17}
.cx-primary{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:0 24px;box-sizing:border-box;border-radius:999px;border:0;background:#FF7B17;color:#2B1200;font-family:'Cairo',system-ui,sans-serif;font-size:20px;font-weight:700;cursor:pointer;transition:transform .15s ease,filter .15s ease}
.cx-primary:hover{transform:translateY(-2px);filter:brightness(1.06)}
.cx-off{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;min-height:60px;padding:0 24px;box-sizing:border-box;border-radius:999px;border:0;background:rgba(43,18,0,.12);color:#6B3F26;font-family:'Cairo',system-ui,sans-serif;font-size:20px;font-weight:700;cursor:not-allowed}
.cx-steps{display:flex;flex-direction:column;gap:12px;align-self:stretch;text-align:start}
.cx-steps div{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:600;color:#9A7A66}
.cx-steps div[data-on="true"]{color:#2B1200}
.cx-steps i{flex:none;width:18px;height:18px;border-radius:50%;background:#E6D6C2}
.cx-steps div[data-on="true"] i{background:#306848}
.cx-back{flex:none;width:60px;height:60px;border-radius:50%;border:2px solid rgba(43,18,0,.2);background:#FFF7EE;display:flex;align-items:center;justify-content:center;color:#2B1200;cursor:pointer;transition:background-color .15s ease}
.cx-back:hover{background:#FFE5D0}
/* delivery pin: the customer puts a pin on the map and the fee follows the distance */
.cx-pin{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:18px;background:#FFF7EE;border:2px dashed rgba(43,18,0,.22)}
.cx-pinhint{margin:0;font-size:16.5px;font-weight:600;line-height:1.6;color:#4A2410}
.cx-pinok,.cx-pinbad{display:flex;flex-direction:column;gap:2px;font-size:16.5px;line-height:1.6}
.cx-pinok b{font-weight:700;color:#306848}
.cx-pinbad b{font-weight:700;color:#A84828}
.cx-pinok span,.cx-pinbad span{font-weight:600;color:#4A2410}
.cx-pinbtn{min-height:52px;padding:0 20px;border-radius:999px;border:2px solid #214C6F;background:transparent;color:#214C6F;font-family:'Cairo',system-ui,sans-serif;font-size:17px;font-weight:700;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.cx-pinbtn:hover{background:#214C6F;color:#FFFFFF}
.cx-pinbtn.first{border-color:#FF7B17;background:#FF7B17;color:#2B1200}
.cx-pinbtn.first:hover{filter:brightness(1.06);background:#FF7B17;color:#2B1200}
/* promo code, order for later, recent addresses, rating */
.cx-promo{display:flex;gap:10px;align-items:center}.cx-promo .cx-in{flex:1;min-width:0}.cx-promo .cx-pinbtn{flex:none}
.cx-addrs{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cx-chip{min-height:44px;padding:0 14px;border-radius:999px;border:2px solid #214C6F;background:#FFFFFF;color:#214C6F;font-family:'Cairo',system-ui,sans-serif;font-size:15.5px;font-weight:700;cursor:pointer}
.cx-chip:hover{background:#214C6F;color:#FFFFFF}
.cx-stars{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.cx-star{width:48px;height:48px;border:0;background:transparent;font-size:34px;line-height:1;color:#FF7B17;cursor:pointer}
.cx-star:hover{transform:scale(1.15)}

/* phones: tighter card, smaller fields and buttons */
@media (max-width:600px){
  .cx-row{gap:14px}
  .cx-card{padding:16px 14px;gap:12px;border-radius:20px}
  .cx-h{font-size:22px}
  .cx-h3{font-size:18px}
  .cx-l{font-size:14px;gap:4px}
  .cx-in{min-height:44px;font-size:16px;border-radius:12px;padding:8px 12px}
  textarea.cx-in{min-height:64px}
  .cx-seg{min-height:42px;font-size:15px}
  .cx-line{font-size:15px}
  .cx-opt{min-height:50px;padding:0 14px;border-radius:14px;gap:10px}
  .cx-primary,.cx-off{min-height:48px;font-size:16px;padding:0 16px}
  .cx-back{width:48px;height:48px}
  .cx-pin{padding:12px;gap:8px;border-radius:14px}
  .cx-pinhint,.cx-pinok,.cx-pinbad{font-size:14.5px}
  .cx-pinbtn{min-height:42px;font-size:15px}
  .cx-chip{min-height:38px;font-size:14px}
  .cx-steps div{font-size:15px}
}
/* the receipt on the order-status page */
.cx-rcpt{align-self:stretch;display:flex;flex-direction:column;gap:10px;padding:20px 0 4px;border-top:1px solid rgba(43,18,0,.14);text-align:start}
.cx-rcpt .cx-line b{white-space:normal;text-align:end;overflow-wrap:anywhere}   /* a long address wraps instead of pushing the page sideways */
.cx-rcpt-sum{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:1px dashed rgba(43,18,0,.22);border-bottom:1px dashed rgba(43,18,0,.22)}
.cx-rcpt-total{font-family:'Kufam','Cairo',sans-serif;font-weight:800;font-size:22px;color:#214C6F}
.cx-rcpt-call{display:flex;align-items:center;justify-content:center;margin-top:6px;text-decoration:none}
/* no sign-in: «مش أنا؟» forgets the details remembered on this phone */
.cx-notme{align-self:flex-start;padding:4px 0;border:0;background:none;font-family:inherit;font-size:16px;cursor:pointer}
/* a line under a payment option (InstaPay / wallet) */
.cx-optnote{font-size:14px;font-weight:600;color:#6B3F26;line-height:1.5}
/* after the order, InstaPay / wallet: how much, where to, and the screenshot on WhatsApp */
.cx-paybox{align-self:stretch;display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:18px;background:#FFF1E0;border:2px solid #FF7B17;text-align:start;font-size:17px;line-height:1.6}
.cx-paybox b{font-family:'Kufam','Cairo',sans-serif;font-weight:800;font-size:21px;color:#2B1200}
.cx-paybox.is-paid{background:#EAF4EE;border-color:#306848}
.cx-paybox.is-paid b{color:#306848}
.cx-payto{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:14px;background:#FFFFFF;font-size:20px;font-weight:700;overflow-wrap:anywhere}
.cx-payto .cx-pinbtn{flex:none;min-height:44px}
.cx-wa{flex:none;background:#25D366;color:#FFFFFF;text-decoration:none}