/* 1.82.8, the order step and the page after paying (templates/shop/; the designer's payment-v2: a guest, the owner's
   edits). The fields of the page, its section titles with their line and dot, the ways to pay as rows of one card (a
   circle 22, a sign 40 in its square — mint when chosen — the title 15, its line 13, the logos 24), and the bar's one
   button. Wide: the details on one side and, beside them (420, staying in sight), the order's summary and the button. */
.co{padding-top:16px;padding-bottom:24px}
.co-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.co-card{margin:0;border-radius:18px;background:#fff;box-shadow:0 2px 12px rgba(18,40,76,.08)}
.co-sum{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px}
.co-sum-t{display:flex;flex-direction:column;min-width:0}
.co-sum-t small{font-size:var(--fs-small);line-height:18px;color:var(--muted)}
.co-sum-t b{font-family:var(--font-heading);font-size:var(--fs-item);line-height:22px;color:var(--navy)}
.co-kd{flex:none;font-family:var(--font-latin);font-size:var(--fs-small);font-weight:700;color:var(--navy)}
.co-kd b{font-size:var(--fs-h3)}
.co-sum-wide{display:none}
.co-h{display:flex;align-items:center;gap:8px;margin:24px 0 12px;font-family:var(--font-heading);font-weight:700;font-size:var(--fs-h3);line-height:26px;color:var(--navy)}
.co-h b{display:inline-flex;align-items:center}
.co-h b::before{content:"";width:20px;height:2px;background:var(--navy)}
.co-h b::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--mint)}
.co-fields{display:grid;gap:10px}
.co-addr{grid-template-columns:1fr 1fr}
.co-addr .co-wide{grid-column:1/-1}
.co-f{display:flex;flex-direction:column;gap:4px;min-width:0}
.co-f .field::placeholder{color:#8A93A6}
.co-f textarea.field{min-height:84px;resize:vertical}
.co-f select.field{appearance:auto}
.co-err{font-size:var(--fs-small);line-height:18px;color:#912018}
.co-f [aria-invalid=true]{border-color:#C0392B}
/* the ways to pay */
.co-ways{display:grid;padding:4px 14px}
.co-way{position:relative;display:grid;grid-template-columns:22px 40px minmax(0,1fr);align-items:start;gap:0 12px;padding:14px 0;cursor:pointer}
.co-way+.co-way{border-top:1px solid var(--line)}
.co-way input{position:absolute;opacity:0;width:1px;height:1px}
.co-dot{width:22px;height:22px;margin-top:9px;box-sizing:border-box;border:2px solid #9AA3B5;border-radius:50%}
.co-way input:checked~.co-dot{border:6px solid var(--mint-ink)}
.co-way input:focus-visible~.co-dot{outline:2px solid var(--navy);outline-offset:2px}
.co-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#ECEDF2;color:var(--navy)}
.co-ic .ico{width:20px;height:20px}
.co-way input:checked~.co-ic{background:var(--teal-soft);color:var(--mint-ink)}
.co-wt{display:flex;flex-direction:column;gap:2px;min-width:0}
.co-wt b{font-size:var(--fs-ui);line-height:22px;color:var(--navy)}
.co-wt small{font-size:var(--fs-small);line-height:20px;color:#4F5A73}
.co-logos{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.co-fix{margin:0 0 6px;font-size:var(--fs-small);font-weight:700;line-height:20px;color:var(--danger,#B42318);text-align:center}          /* 1.84.7: beside the button, after a send that was turned back */
.co-way>.co-logos{grid-column:1/-1;gap:4px;margin-top:10px}          /* 1.84.9: the whole width of the way, so its five marks stand in one row on a phone of 375 */
/* 1.84.12: the same tiles as the footer (static/app.css) — 52 × 32, radius 8, white, a thin border, the mark centred inside;
   Deema's navy; Apple Pay and Google Pay inside with their clear space */
.co-logos{align-items:center}
.co-logos .pay-logo{position:relative;flex:none;width:52px;height:32px;min-width:0;box-sizing:border-box;padding:5px 6px;border:1px solid #E3E6EC;border-radius:8px;background:#fff;overflow:hidden}
.co-logos .pay-logo img{width:100%;height:100%;object-fit:contain}
.co-logos .pay-logo.pl-deema{border-color:#1F2A4B;background:#1F2A4B}
.co-logos .pay-logo.pl-applepay{padding:6px 10px}
.co-logos .pay-logo.pl-googlepay img{position:absolute;left:50%;top:50%;width:auto;height:33px;max-width:none;max-height:none;transform:translate(-50%,-50%)}
.co-lock{display:flex;align-items:flex-start;gap:6px;margin:10px 4px 0;font-size:var(--fs-small);line-height:20px;color:#4F5A73}
.co-lock .ico{flex:none;width:16px;height:16px;margin-top:2px}
/* the bar's one button: the way's word, and the amount inside it */
.co-bar .wrap{display:block}
.co-go{display:flex;width:100%;justify-content:space-between}
.co-go:only-child,.co-fix+.co-go{justify-content:center}          /* 1.84.7: the same with the line over it after a send that was turned back */
.co-in{color:inherit}
.co-go:has(.co-in[hidden]){justify-content:center}
/* after paying */
.co-done{display:grid;gap:12px}
.co.co-done{max-width:560px}
.co-head{display:grid;justify-items:center;gap:6px;padding:24px 16px;text-align:center}
.co-head h1{margin:6px 0 0;font-family:var(--font-heading);font-size:var(--fs-h2);line-height:var(--lh-h2);color:var(--navy)}
.co-head p{margin:0;font-size:var(--fs-body);color:#4F5A73}
.co-mark{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--teal-soft);color:var(--mint-ink)}
.co-mark .ico{width:28px;height:28px}
.co-failed .co-mark{background:#FDECEA;color:#C0392B}
.co-wait .co-mark{background:#ECEDF2;color:var(--navy)}
.co-tab{display:grid;padding:4px 16px}
.co-tab div{display:flex;justify-content:space-between;gap:12px;padding:12px 0}
.co-tab div+div{border-top:1px solid var(--line)}
.co-tab dt{color:#4F5A73}
.co-tab dd{margin:0;font-weight:600;color:var(--navy);text-align:end}
.co-done .co-h{margin:12px 0 0}
.co-next{display:flex;align-items:center;gap:10px;padding:14px 16px}
.co-next .ico{flex:none;width:20px;height:20px;color:var(--mint-ink)}
.co-acts{display:grid;gap:10px;margin-top:4px}
.co-acts form{display:grid}
.co-acts .btn{width:100%}
.co-line{border:1.5px solid var(--navy);background:#fff;color:var(--navy)}
@media (min-width:900px){
  .co{max-width:1200px;padding-top:24px}
  .co-cols{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:0 32px;align-items:start}
  .co-main>.co-sum{display:none}
  .co-main>.co-h:first-of-type{margin-top:0}
  .co-side{position:sticky;top:calc(var(--header-h) + 24px);display:grid;gap:12px}
  .co-sum-wide{display:flex}
  .co-bar{position:static;padding:0;border:0;box-shadow:none;background:none}
  .co-bar .wrap{padding:0}
  .co-done{margin-inline:auto}
}
html.tb-on .totalbar.co-bar::before{content:none}          /* no floating button here (body.no-fab), so no hump for it */
/* the half-width fields' words stand whole: «الدور والشقة (اختياري)» was cut at 390 — the hint at the small size; the English
   words are longer still, so on a phone their address is one column */
.co-addr .co-f:not(.co-wide) .field{padding-inline:12px}
.co-addr .co-f:not(.co-wide) .field::placeholder{font-size:var(--fs-small)}
@media (max-width:599px){html[dir=ltr] .co-addr{grid-template-columns:1fr}}