/* Checkout: one panel, opened from "Buy now", "Book your seat" or the cart (decision of 2026-10-06).
   It holds the basket, the few details needed, the total with shipping, and the card form. No second page.
   Uses the site's own tokens; nothing here changes the look of the existing pages. */
.cx-scrim{position:fixed; inset:0; background:rgba(16,38,2,.38); opacity:0; pointer-events:none; transition:opacity .25s; z-index:200;}
.cx-panel{position:fixed; top:0; bottom:0; left:0; width:min(480px,100%); background:var(--paper,#FFFFFF); z-index:201;
  transform:translateX(-100%); transition:transform .3s ease; display:flex; flex-direction:column; border-inline-start:1px solid var(--line,#E4E7E1);}
.cx-open .cx-scrim{opacity:1; pointer-events:auto;}
.cx-open .cx-panel{transform:none;}
.cx-head{display:flex; align-items:center; justify-content:space-between; padding:22px 26px; border-bottom:1px solid var(--line,#E4E7E1);}
.cx-head h2{font-size:1.15rem; font-weight:700; margin:0;}
.cx-x{background:none; border:0; font-size:1.6rem; line-height:1; color:var(--ink-soft,#5F6354); cursor:pointer;}
.cx-body{flex:1; overflow-y:auto; padding:8px 26px 24px;}
.cx-sec{padding:18px 0; border-bottom:1px solid var(--line,#E4E7E1);}
.cx-sec:last-child{border-bottom:0;}
.cx-sec h3{font-size:.82rem; font-weight:700; color:var(--green,#102602); margin:0 0 12px;}
.cx-line{display:grid; grid-template-columns:1fr auto; gap:6px 14px; align-items:center; padding:8px 0;}
.cx-line + .cx-line{border-top:1px solid var(--line,#E4E7E1);}
.cx-line .n{font-weight:600; font-size:.95rem;}
.cx-line .p{font-size:.92rem; white-space:nowrap;}
.cx-line .ctl{grid-column:1/-1; display:flex; align-items:center; gap:10px; font-size:.82rem; color:var(--ink-soft,#5F6354);}
.cx-qty{display:inline-flex; align-items:center; border:1px solid var(--line,#E4E7E1); border-radius:2px;}
.cx-qty button{width:30px; height:30px; background:none; border:0; font-size:1rem; cursor:pointer; color:var(--ink,#102602);}
.cx-qty span{min-width:26px; text-align:center; font-size:.9rem;}
.cx-rm{background:none; border:0; color:var(--ink-soft,#5F6354); text-decoration:underline; text-underline-offset:3px; cursor:pointer; font-size:.8rem; margin-inline-start:auto;}
.cx-line select{height:34px; border:1px solid var(--line,#E4E7E1); background:var(--white,#fff); padding:0 8px; font:inherit; font-size:.85rem; flex:1;}
.cx-f{display:grid; gap:6px; margin-bottom:12px;}
.cx-f label{font-size:.8rem; color:var(--ink-soft,#5F6354);}
.cx-f input,.cx-f select{height:44px; border:1px solid var(--line,#E4E7E1); background:var(--white,#fff); padding:0 12px; font:inherit; font-size:.95rem; border-radius:2px; width:100%;}
.cx-f input:focus,.cx-f select:focus{outline:none; border-color:var(--green,#102602);}
.cx-f input[dir=ltr]{text-align:left;}
.cx-two{display:grid; grid-template-columns:1fr 1fr; gap:0 12px;}
.cx-sum{display:grid; grid-template-columns:1fr auto; gap:8px 0; font-size:.92rem;}
.cx-sum .t{font-weight:700; font-size:1.05rem; padding-top:10px; border-top:1px solid var(--ink,#102602); margin-top:4px;}
.cx-sum s{color:var(--ink-soft,#5F6354); margin-inline-end:6px;}
[data-cx-card], .cx-linked{cursor:pointer;}
.cx-note{font-size:.8rem; color:var(--ink-soft,#5F6354); line-height:1.8; margin-top:12px;}
.cx-duty{grid-column:1/-1; font-size:.74rem; margin-top:6px;}
.cx-link{background:none; border:0; padding:0; color:var(--green,#102602); text-decoration:underline; text-underline-offset:3px; cursor:pointer; font:inherit; font-size:.85rem;}
.cx-foot{padding:16px 26px 22px; border-top:1px solid var(--line,#E4E7E1); background:var(--paper,#FFFFFF);}
.cx-pay{width:100%; padding:16px; background:var(--green,#102602); color:var(--white,#fff); border:0; border-radius:2px; font:inherit; font-weight:600; font-size:1rem; cursor:pointer;}
.cx-pay:hover{background:var(--green-deep,#102602);}
.cx-pay[disabled]{opacity:.5; cursor:default;}
.cx-err{color:#9A3B2E; font-size:.85rem; margin-bottom:10px; line-height:1.7;}
.cx-err:empty{display:none;}
.cx-empty{padding:30px 0; color:var(--ink-soft,#5F6354); text-align:center;}
#cx-embed{min-height:420px;}
.cx-toast{position:fixed; bottom:24px; left:50%; transform:translate(-50%,16px); background:var(--ink,#102602); color:var(--paper,#FFFFFF);
  padding:12px 20px; font-size:.9rem; border-radius:2px; opacity:0; transition:.2s; z-index:210; pointer-events:none;}
.cx-toast.on{opacity:1; transform:translate(-50%,0);}
@media (max-width:560px){ .cx-head,.cx-body,.cx-foot{padding-inline:18px;} .cx-two{grid-template-columns:1fr;} }

/* Order confirmation and address page */
.ord{max-width:640px; margin:0 auto; padding:48px 28px 80px;}
.ord h1{font-size:1.9rem; margin-bottom:10px;}
.ord .lead{color:var(--ink-soft,#5F6354); font-weight:300; line-height:1.9;}
.ord .box{border-top:1px solid var(--ink,#102602); margin-top:28px; padding-top:18px;}
.ord .row{display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--line,#E4E7E1); font-size:.95rem;}
.ord .row:last-child{border-bottom:0;}
.ord .done{background:var(--surface,#FFFFFF); padding:16px 18px; margin-top:24px; line-height:1.9; border-right:3px solid var(--green,#102602);}
.ord form{margin-top:8px;}
.ord .cx-pay{margin-top:8px;}

/* Added-to-cart choice: complete the purchase or keep shopping (2026-10-16). */
.cx-added{position:fixed; inset:0; z-index:1200; display:none; align-items:center; justify-content:center; padding:16px;}
.cx-added.on{display:flex;}
.cx-added-scrim{position:absolute; inset:0; background:rgba(16,38,2,.38);}
.cx-added-box{position:relative; width:100%; max-width:380px; background:var(--paper,#FFFFFF); border-radius:6px; padding:26px 24px 22px; box-shadow:0 18px 50px rgba(8,20,1,.18); text-align:center;}
.cx-added-t{font-size:1.05rem; font-weight:600; color:var(--green,#102602); margin:0 0 6px;}
.cx-added-n{font-size:.9rem; color:var(--ink-soft,#5F6354); margin:0 0 20px;}
.cx-added-a{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.cx-added-a button{height:46px; font-family:inherit; font-size:.9rem; font-weight:600; border-radius:2px; cursor:pointer;}
.cx-added-go{background:var(--green,#102602); color:#fff; border:1px solid var(--green,#102602);}
.cx-added-stay{background:transparent; color:var(--green,#102602); border:1px solid var(--green,#102602);}

/* Preferred contact: WhatsApp or email (2026-10-16). */
.cx-lbl{display:block; font-size:.8rem; color:var(--ink-soft,#5F6354); margin-bottom:6px;}
.cx-via{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.cx-via button{height:44px; font-family:inherit; font-size:.88rem; font-weight:500; background:#fff; color:var(--ink,#102602); border:1px solid var(--line,#E4E7E1); border-radius:2px; cursor:pointer;}
.cx-via button[aria-checked="true"]{background:var(--green,#102602); border-color:var(--green,#102602); color:#fff; font-weight:600;}

/* One step, centered (Ahmed, 2026-10-16): the purchase opens in the middle of the page with everything needed, not a side drawer. */
.cx-panel{top:50%; left:50%; bottom:auto; width:min(520px, calc(100% - 32px)); max-height:min(90vh, 880px); border:0; border-radius:8px;
  box-shadow:0 24px 70px rgba(8,20,1,.22); transform:translate(-50%,-47%); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;}
.cx-open .cx-panel{transform:translate(-50%,-50%); opacity:1; pointer-events:auto;}
.cx-head{padding:18px 24px;}
.cx-body{padding:4px 24px 12px;}
.cx-sec{padding:14px 0;}
.cx-foot{padding:14px 24px 16px; border-radius:0 0 8px 8px;}
/* Exactly the style of the unselected "البريد الإلكتروني" button. */
.cx-more{display:block; width:100%; height:44px; margin-top:10px; background:#fff; border:1px solid var(--line,#E4E7E1); border-radius:2px; font-family:inherit; font-size:.88rem; font-weight:500; color:var(--ink,#102602); cursor:pointer;}
.cx-f input[dir=auto]{text-align:start;}
@media (max-width:560px){ .cx-panel{width:calc(100% - 24px); max-height:92vh;} .cx-two{grid-template-columns:1fr;} }

/* One line only under the total: the footer already draws the divider. */
.cx-sec:has(#cx-sum){border-bottom:0;}

/* Order page (2026-10-16): one line colour throughout; the address is optional and opens on request. */
.ord .box{border-top:1px solid var(--line,#E4E7E1);}
.ord .row strong{font-weight:700;}
.ord-add{display:block; width:100%; height:44px; margin-top:14px; background:#fff; border:1px solid var(--line,#E4E7E1); border-radius:2px; font-family:inherit; font-size:.88rem; font-weight:500; color:var(--ink,#102602); cursor:pointer;}
.ord .ord-add-box{border-top:0; margin-top:20px; padding-top:0;}

/* No divider between the confirmation text and the order summary. */
.ord .box:not(.ord-add-box){border-top:0; margin-top:20px; padding-top:0;}

/* After the order: two ways on, never a dead end. */
.ord-next{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:28px;}
.ord-next a{display:flex; align-items:center; justify-content:center; height:48px; text-decoration:none; padding:0;}
.ord-home{background:#fff; border:1px solid var(--line,#E4E7E1); border-radius:2px; font-size:.95rem; font-weight:500; color:var(--ink,#102602);}
.ord .ord-next .cx-pay{margin-top:0;}
/* Hover on the light buttons, so they read as buttons (2026-10-17). */
.ord-add, .ord-home, .cx-more, .cx-via button{transition:background .2s, border-color .2s, color .2s;}
.ord-add:hover, .ord-home:hover, .cx-more:hover, .cx-via button[aria-checked="false"]:hover{background:#EEF2EA; border-color:var(--green,#102602); color:var(--green,#102602);}
.cx-pay:hover{background:var(--green-deep,#102602);}