/* ===== Xoffroad custom 3-tab cart/checkout ===== */

.x-checkout-page { max-width: 1200px; margin: 0 auto; padding: 10px 10px 90px; text-align: left; }

/* page title + help box */
.x-help-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; margin: 10px 0 20px; }
.x-page-title { font-size: 34px; font-weight: 700; margin: 0; }
.x-help-box { background: #fff; border-radius: 8px; padding: 14px 22px; display: flex; align-items: center; gap: 18px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.x-help-text { font-weight: 700; }
.x-help-mail { display: inline-flex; align-items: center; gap: 8px; color: #1a7bc4; }
.x-help-mail a { color: #444; text-decoration: none; }

/* tabs */
.x-tabs { background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.x-tabs-header { display: flex; border-bottom: 1px solid #eee; }
.x-tab-link { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 10px; text-decoration: none; color: #666; font-weight: 700; border-bottom: 3px solid transparent; }
.x-tab-link .x-tab-num { width: 28px; height: 28px; border-radius: 50%; background: #8a8f98; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex: none; }
.x-tab-link.active { color: #B61D22; border-bottom-color: #B61D22; }
.x-tab-link.x-tab-disabled { opacity: .45; cursor: not-allowed; }
.x-tab-link.active .x-tab-num { background: #B61D22; }
.x-tab-pane { display: none; padding: 20px; }
.x-tab-pane.active { display: block; }
.x-tab-loading { padding: 40px; text-align: center; color: #888; }

/* cart items */
.x-cart-items { display: flex; flex-direction: column; }
.x-cart-item { display: flex; align-items: center; gap: 18px; padding: 18px 0; border-bottom: 1px solid #eee; }
.x-item-picture { flex: none; width: 90px; }
.x-item-picture img { max-width: 90px; max-height: 90px; }
.x-item-main { flex: 1 1 auto; min-width: 200px; }
.x-item-name { font-weight: 700; font-size: 16px; color: #333; text-decoration: none; display: block; margin-bottom: 6px; }
.x-item-stock { flex: none; width: 130px; }
.x-stock-in { color: #28a745; font-weight: 700; font-size: 13px; }
.x-item-qty { flex: none; display: flex; align-items: center; gap: 6px; }
.x-qty-btn { width: 36px; height: 36px; border: 1px solid #dcdfe3; border-radius: 50%; background: #fff; font-size: 18px; line-height: 1; cursor: pointer; color: #333; display: inline-flex; align-items: center; justify-content: center; transition: all .15s; }
.x-qty-btn:hover { border-color: #1a7bc4; color: #1a7bc4; background: #f2f8fd; }
.x-qty-input { width: 46px; height: 36px; border: 1px solid #dcdfe3; border-radius: 8px; background: #fff; text-align: center; font-weight: 700; font-size: 15px; }
.x-item-price { flex: none; width: 140px; text-align: right; }
.x-unit-price { display: block; color: #999; font-size: 13px; }
.x-sub-total { display: block; font-weight: 700; font-size: 17px; color: #B61D22; }
.x-item-remove { flex: none; width: 40px; text-align: center; }
.x-remove-btn { border: none; background: transparent; color: #aaa; cursor: pointer; }
.x-remove-btn:hover { color: #B61D22; }

/* related products under a cart line */
.x-related-block { margin-top: 4px; }
.x-related-toggle { font-size: 12px; font-weight: 700; color: #666; text-decoration: underline; letter-spacing: .3px; }
.x-related-toggle .x-related-from { color: #B61D22; }
.x-related-toggle.open .x-related-arrow { display: inline-block; transform: rotate(180deg); }
.x-related-list { margin-top: 10px; border: 1px solid #eee; border-radius: 6px; padding: 6px 12px; }
.x-related-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f3f3f3; }
.x-related-item:last-child { border-bottom: none; }
.x-related-picture img { max-width: 50px; max-height: 50px; }
.x-related-info { flex: 1; }
.x-related-name { display: block; font-size: 13px; color: #333; text-decoration: none; }
.x-related-price { font-weight: 700; color: #B61D22; font-size: 13px; }
/* square for now - the rounded look comes back later, see the note above .x-paybar-back */
.x-related-addtocart { padding: 6px 14px; border-radius: 0; /* was 18px */ border: none; background: #B61D22; color: #fff; cursor: pointer; font-size: 13px; }
.x-related-addtocart:hover { background: #8F1619; }

/* inline size/colour picker revealed for products that require an option before they can be added */
.x-addable-attrs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.x-addable-attr-select { border: 1px solid #B61D22; border-radius: 6px; padding: 5px 8px; font-size: 12px; color: #333; background: #fff; }
.x-advantageous-goto { color: #B61D22; font-size: 12px; font-weight: 700; text-decoration: underline; }

/* delivery banner */
.x-delivery-banner { display: flex; align-items: center; gap: 12px; background: #f5f7f9; border-radius: 8px; padding: 14px 20px; margin: 18px auto; width: fit-content; color: #333; }
.x-delivery-banner svg { color: #B61D22; }
.x-delivery-banner strong { color: #B61D22; }

/* advantageous products */
.x-advantageous { margin-top: 25px; }
.x-advantageous-title { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.x-advantageous-item { display: flex; align-items: center; gap: 15px; padding: 12px 0; border-bottom: 1px solid #eee; }
/* same red pill as the related-products list, so both "add this too" lists behave and look alike */
.x-advantageous-item .x-advantageous-addtocart { flex: none; padding: 8px 18px; border-radius: 0; border: none; background: #B61D22; color: #fff; cursor: pointer; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.x-advantageous-item .x-advantageous-addtocart:hover { background: #8F1619; color: #fff; }
.x-advantageous-picture img { max-width: 70px; max-height: 70px; }
.x-advantageous-info { flex: 1; }
.x-advantageous-nameline { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.x-advantageous-name { font-weight: 700; color: #333; text-decoration: none; }
.x-advantageous-price { color: #B61D22; font-weight: 700; }
.x-advantageous-desc { color: #777; font-size: 13px; }

/* tab 1 footer (discount + totals) */
.x-tab1-footer { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; margin-top: 25px; flex-wrap: wrap; }

/* discount coupon. The apply/remove buttons are square like the pay-bar ones - see the note above
   .x-paybar-back for why, and change them together when the rounded design comes back. */
/* "Poznámka k objednávke" on the left, the coupon on the right. Both are .x-form-field controls, so the
   label, height (42px), border and 6px radius come from the same rules and the two line up.
   The input and the button are one joined control rather than two loose boxes with a gap; the button's
   square corners are clipped by the group's overflow:hidden. Every rule is scoped under .x-coupon-group -
   .x-form-field already styles bare inputs, and an unscoped single class loses that cascade. */
/* order-level validation errors, shown next to the pay bar so they are visible from any tab */
.x-form-errors { margin: 16px 0 0; border-radius: 6px; }

.x-note-coupon-row { display: flex; align-items: flex-start; gap: 30px; margin: 18px 0; flex-wrap: wrap; }
.x-note-coupon-row .x-note-block { flex: 1 1 380px; margin: 0; max-width: none; }
.x-note-coupon-row .x-coupon-block { flex: 0 1 340px; margin: 0; }
.x-coupon-group { display: flex; align-items: stretch; height: 42px; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; background: #fff; transition: border-color .15s, box-shadow .15s; }
.x-coupon-group:focus-within { border-color: #B61D22; box-shadow: 0 0 0 3px rgba(182,29,34,.10); }
.x-coupon-group .x-coupon-icon { flex: none; display: flex; align-items: center; padding: 0 8px 0 11px; color: #b0b5bb; }
.x-coupon-group .x-coupon-icon svg { display: block; }
.x-coupon-group input.x-coupon-input { flex: 1 1 auto; min-width: 0; height: auto; margin: 0; border: none; border-radius: 0; background: none; box-shadow: none; padding: 0; font-size: 14px; color: #333; }
.x-coupon-group input.x-coupon-input:focus { outline: none; border: none; box-shadow: none; }
.x-coupon-group input.x-coupon-input::-webkit-input-placeholder { color: #9aa0a6; }
.x-coupon-group input.x-coupon-input::placeholder { color: #9aa0a6; }
.x-coupon-group button.x-coupon-apply { flex: none; margin: 0; border: none; border-radius: 0; background: #B61D22; color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .2px; padding: 0 22px; cursor: pointer; transition: background .15s; }
.x-coupon-group button.x-coupon-apply:hover { background: #8F1619; }
.x-coupon-group button.x-coupon-apply:active { background: #7a1215; }

.x-coupon-msg { margin-top: 8px; font-size: 13px; }
.x-coupon-err { color: #B61D22; }
/* the applied-code strip wears the same tint as the order summary box (.x-summary-box) so the cart reads
   as one palette - a lone green block was the only green thing on the page */
.x-coupon-applied { display: flex; align-items: center; gap: 10px; margin-top: 8px; background: #fdf2f2; border-radius: 6px; padding: 9px 12px; font-size: 13px; color: #333; }
.x-coupon-applied strong { color: #B61D22; letter-spacing: .4px; }
/* icon-only, same bin as .x-remove-btn on a cart line - the colour/hover comes from that rule */
.x-coupon-applied button.x-coupon-remove { margin: 0 0 0 auto; flex: none; display: inline-flex; align-items: center; padding: 0; border-radius: 0; }
.x-coupon-applied button.x-coupon-remove svg { display: block; }

/* discount rows in the order summary - red like the rest of the box, not a lone green */
.x-summary-discount .x-summary-name,
.x-summary-discount .x-summary-price { color: #B61D22; font-weight: 700; }
.x-tab1-totals { margin-left: auto; min-width: 280px; }

/* tab 2 + 3 layout */
.x-tab2-layout, .x-tab3-layout { display: flex; gap: 30px; align-items: flex-start; flex-wrap: wrap; }
.x-tab2-methods, .x-tab3-form { flex: 1 1 500px; }
.x-tab2-summary, .x-tab3-summary { flex: 0 0 320px; }
.x-methods-title { font-size: 20px; font-weight: 700; margin: 5px 0 12px; }
.x-methods-section { margin-bottom: 25px; }
.x-method-list { list-style: none; margin: 0; padding: 0; }
.x-method-item { border: 1px solid #e3e3e3; border-radius: 8px; margin-bottom: 8px; }
.x-method-item label { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; }
.x-method-item input[type="radio"] { width: 18px; height: 18px; flex: none; }
.x-method-logo { max-height: 28px; max-width: 44px; }
.x-method-name { font-weight: 700; }
.x-method-desc { color: #888; font-size: 13px; }
.x-method-fee { margin-left: auto; font-weight: 700; color: #B61D22; white-space: nowrap; }
.x-method-item input[type="radio"] { accent-color: #B61D22; }

/* priority handling upsell */
.x-priority-section { background: #fdf7e8; border: 1px solid #f0dfae; border-radius: 8px; padding: 4px; }
.x-priority-label { display: block; padding: 13px 16px; cursor: pointer; }
.x-priority-label input { width: 18px; height: 18px; margin-right: 10px; vertical-align: -3px; accent-color: #B61D22; }
.x-priority-title { font-weight: 700; }
.x-priority-desc { display: block; margin: 6px 0 0 28px; color: #777; font-size: 13px; }

/* summary box (green) */
.x-summary-box { background: #fdf2f2; border-radius: 10px; padding: 22px 24px; }
.x-summary-title { color: #B61D22; font-size: 21px; font-weight: 700; margin-bottom: 15px; }
.x-summary-row { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; }
.x-summary-name { flex: 1; font-size: 14px; }
.x-summary-method { font-style: italic; }
.x-summary-qty { color: #888; font-size: 13px; white-space: nowrap; }
.x-summary-price { font-weight: 700; white-space: nowrap; }
.x-summary-fee { color: #B61D22; }
.x-summary-methods { border-top: 1px solid #f3caca; margin-top: 10px; padding-top: 10px; }
.x-summary-total { border-top: 1px solid #f3caca; margin-top: 10px; padding-top: 12px; display: flex; justify-content: space-between; font-size: 17px; font-weight: 700; }

/* personal data form */
.x-form-row { margin-bottom: 14px; }
.x-form-row-2 { display: flex; gap: 15px; }
.x-form-row-2 .x-form-field { flex: 1; }
.x-form-field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; color: #555; }
.x-form-field input, .x-form-field select { width: 100%; height: 42px; border: 1px solid #ddd; border-radius: 6px; padding: 0 12px; font-size: 14px; box-sizing: border-box; }
/* a textarea shares the frame but not the fixed height - it has to be able to grow */
.x-form-field textarea { width: 100%; border: 1px solid #ddd; border-radius: 6px; padding: 10px 12px; font-size: 14px; font-family: inherit; box-sizing: border-box; resize: vertical; }
/* stays inline so the "čítať" link sits beside it rather than below */
.x-terms-row .x-check-toggle { display: inline-block; }
.x-terms-read { margin-left: 10px; color: #B61D22; text-decoration: underline; cursor: pointer; font-size: 13px; }

/* one definition for every tick-to-reveal row (firma / fakturačná adresa / obchodné podmienky) */
.x-check-toggle { display: block; cursor: pointer; font-weight: 700; font-size: 14px; margin: 0; }
.x-check-toggle input { width: 15px; height: 15px; margin-right: 9px; vertical-align: -2px; accent-color: #B61D22; flex: none; }
/* only drawn where the tick actually reveals something */
.x-check-row { background: #fbfbfb; border: 1px solid #eee; border-radius: 8px; padding: 14px 16px; }
/* 15px box + 9px gap: lines the revealed block up under the label text, not under the checkbox */
.x-check-fields { margin-top: 14px; padding-left: 24px; }
.x-check-fields .x-form-field { margin-bottom: 12px; }
.x-check-title { font-size: 13px; font-weight: 700; color: #555; text-transform: uppercase; margin-bottom: 10px; }
.x-check-note { color: #888; font-size: 12px; margin-bottom: 10px; }

/* "Poznámka k objednávke" on the cart tab - the field itself is a plain .x-form-field, so it is the
   same control as everything in "Dodacie údaje" */
.x-note-block { margin: 18px 0; max-width: 620px; }
.x-note-saved { display: inline-block; margin-top: 6px; font-size: 12px; color: #3c8f3c; }

/* optional "create an account while ordering" block */
.x-register-row { background: #fbfbfb; border: 1px solid #eee; border-radius: 8px; padding: 14px 16px; }
.x-register-note { font-weight: 700; margin-bottom: 10px; }
.x-register-hint { color: #888; font-size: 12px; margin-top: 8px; }
.x-password-rules { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.x-password-rules li { position: relative; padding-left: 16px; }
/* unmet rules stay grey with a neutral bullet - a form that greets you in red before you have typed
   anything reads as an error rather than as a checklist */
.x-password-rules li:before { content: "○"; position: absolute; left: 0; }
.x-password-rules li.x-rule-ok { color: #3c8f3c; }
.x-password-rules li.x-rule-ok:before { content: "✓"; }

/* bottom pay bar: docked at the cart end, fixed to the viewport bottom until you scroll there */
.x-paybar-dock { margin-top: 20px; }
.x-sticky-paybar { background: #ffffff; display: flex; align-items: center; gap: 20px; padding: 14px 25px; border-top: 1px solid #ececec; }
.x-sticky-paybar.x-paybar-fixed { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; box-shadow: 0 -2px 12px rgba(0,0,0,.14); }
/* "Späť k nákupu" / "Pokračovať" are square for now. This is deliberate and temporary - the design goes
   back to a rounded pill later, so the previous radius is kept in the comment next to each rule rather
   than only in git history. The third button on the same plan is .x-related-addtocart. */
.x-paybar-back { order: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #B61D22; border-radius: 0; /* was 8px */ padding: 12px 22px; color: #B61D22; font-weight: 700; text-decoration: none; background: #fff; white-space: nowrap; }
.x-paybar-back:hover { background: #fdf2f2; color: #B61D22; }
.x-paybar-back-arrow { font-size: 12px; color: #B61D22; }
.x-paybar-total { order: 2; margin-left: auto; text-align: right; }
.x-paybar-label { display: block; color: #333; font-size: 14px; font-weight: 700; }
.x-paybar-value { display: block; color: #B61D22; font-size: 21px; font-weight: 700; }
.x-paybar-value-excltax { display: block; color: #999; font-size: 12px; margin-top: 2px; }
.x-paybar-continue { order: 3; background: #B61D22; border: none; color: #fff; font-size: 17px; font-weight: 700; padding: 14px 40px; border-radius: 0; /* was 8px */ cursor: pointer; white-space: nowrap; }
.x-paybar-continue:hover { background: #8F1619; }
.x-paybar-continue:disabled { background: #DB8E90; cursor: default; }

/* header cart button.
   NOTE: every rule here is scoped under the #topcartlink id. The theme (styles.css) styles this
   exact id/its <a> child with its own background image + line-height:45px + padding; a plain class
   selector is lower specificity than an id and loses the cascade, which was causing the transparent
   button, the thick top/bottom border artefact, and the badge number sitting outside the circle. */
#topcartlink { background: none; padding: 0; box-sizing: border-box; }

/* normal (non-scrolled) state: flat, inline with the other header links - no border/background */
#topcartlink a.x-cartbar-button {
    box-sizing: border-box; line-height: normal;
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; padding: 0;
    color: #B61D22; font-weight: 700; text-decoration: none; white-space: nowrap;
}
#topcartlink a.x-cartbar-button:hover { color: #8F1619; }
#topcartlink .x-cartbar-icon { display: inline-flex; align-items: center; }
#topcartlink .x-cartbar-icon svg { display: block; }
/* the count badge. Centering the *line box* is not enough to centre the *digits*: digits have no
   descender, so the glyphs sit in the upper part of their line box and the number ends up visibly
   above the middle of the circle. padding-top pushes the (border-box) content area down by half its
   value, which puts the digits on the circle's optical centre. */
#topcartlink .x-cartbar-qty {
    background: #B61D22; color: #fff; min-width: 18px; height: 18px; box-sizing: border-box;
    border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; line-height: 1; padding: 3px 3px 0;
}
#topcartlink .x-cartbar-pipe { color: #DFA9AB; font-weight: 400; }

/* sticky (scrolled) state only: compact white/red-border pill floating over the page */
#topcartlink a.x-cartbar-button.x-cartbar-stuck {
    position: fixed; top: 10px; right: 12px; z-index: 1200;
    background: #fff; border: 1px solid #B61D22; border-radius: 0; padding: 2px 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
#topcartlink a.x-cartbar-button.x-cartbar-stuck:hover { background: #fdf2f2; }

/* the flyout mini-cart dropdown is normally position:absolute relative to the header, and per
   styles.css both its visibility ("active{display:block}") AND its entire look (white background,
   shadow, inner padding on .mini-shopping-cart) only exist inside its own @media(min-width:1001px)
   block - meaning below that width it's not just invisible, it's also fully unstyled (transparent,
   no padding) once forced visible. These unconditional id-scoped rules restore the whole look at
   every width, not just the display:block toggle. */
#flyout-cart.active { display: block !important; }
#flyout-cart {
    z-index: 1150; background-color: #fff; box-shadow: 0 0 2px rgba(0,0,0,0.25);
}
#flyout-cart .mini-shopping-cart { padding: 12px; text-align: left; font-size: 12px; }
#flyout-cart .mini-shopping-cart .count { padding: 5px 0 15px; color: #444; }
#flyout-cart .mini-shopping-cart .count a { margin: 0 2px; font-weight: bold; color: #444; }
#flyout-cart .mini-shopping-cart .items { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin: 0 0 20px; }
#flyout-cart .mini-shopping-cart .item { overflow: hidden; padding: 10px 0; }
#flyout-cart .mini-shopping-cart .picture { float: left; width: 70px; text-align: center; }
#flyout-cart .mini-shopping-cart .picture a { display: block; position: relative; overflow: hidden; }
#flyout-cart .mini-shopping-cart .picture a:before { content: ""; display: block; padding-top: 100%; }
#flyout-cart .mini-shopping-cart .picture img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 100%; }
#flyout-cart .mini-shopping-cart .picture + .product { margin: 0 0 0 80px; }
#flyout-cart .mini-shopping-cart .name { margin: 0 0 10px; font-size: 14px; }
#flyout-cart .mini-shopping-cart .name a { color: #B61D22; }
#flyout-cart .mini-shopping-cart .name a:hover { color: #8F1619; }
#flyout-cart .mini-shopping-cart .attributes { margin: 5px 0; color: #444; }
#flyout-cart .mini-shopping-cart .totals { margin: 0 0 12px; font-size: 14px; }
#flyout-cart .mini-shopping-cart .totals strong { font-size: 16px; color: #444; }
#flyout-cart .mini-shopping-cart .buttons { margin: 0 0 5px; }
#flyout-cart .mini-shopping-cart input[type="button"] { display: inline-block; border: none; background-color: #B61D22; padding: 10px 20px; font-size: 12px; color: #fff; text-transform: uppercase; cursor: pointer; }
#flyout-cart .mini-shopping-cart input[type="button"]:hover { background-color: #8F1619; }

/* when the button becomes fixed (scrolled), the dropdown must switch to fixed too so it still
   opens directly under the button instead of staying anchored to the old scroll position */
#flyout-cart.x-flyout-stuck { position: fixed !important; top: 60px; right: 12px; z-index: 1199; }

@media (max-width: 768px) {
    #topcartlink a.x-cartbar-button.x-cartbar-stuck { top: 8px; right: 8px; padding: 2px 12px; }
    #flyout-cart { position: fixed; top: 54px; left: 8px; right: 8px; width: auto; }
    #flyout-cart.x-flyout-stuck { top: 48px; right: 8px; left: 8px; width: auto; }
}

/* generic hidden-until-toggled-by-js state (replaces scattered inline style="display:none") */
.x-hidden { display: none; }

/* responsive */
@media (max-width: 768px) {
    /* remove-item icon moves next to the picture, top-right; everything else wraps below */
    .x-cart-item { flex-wrap: wrap; }
    .x-item-picture { order: 1; }
    .x-item-remove { order: 2; margin-left: auto; width: auto; }
    .x-item-main { order: 3; flex-basis: 100%; }
    .x-item-stock { order: 4; width: auto; }
    .x-item-qty { order: 5; }
    .x-item-price { order: 6; width: auto; margin-left: auto; }
    /* inline-block so the vertical padding enlarges the tap target - the label is only 12px tall */
    .x-related-toggle { display: inline-block; padding: 8px 0; }
    .x-tab2-summary, .x-tab3-summary { flex: 1 1 100%; }
    .x-form-row-2 { flex-direction: column; gap: 0; }
    .x-tab-link .x-tab-name { font-size: 12px; }
    /* the fixed pay bar wraps to two rows here (price on its own line, then the two buttons), so it is
       roughly 130px tall - 100px of clearance left the last form row hidden underneath it */
    .x-checkout-page { padding-bottom: 165px; }
    /* mobile: price row on top (full width), "Späť k nákupu" + "Pokračovať" side by side below */
    .x-sticky-paybar { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
    .x-paybar-total { order: 1; flex-basis: 100%; margin-left: 0; text-align: left; }
    .x-paybar-back { order: 2; flex: 1; padding: 10px 14px; font-size: 13px; }
    .x-paybar-continue { order: 3; flex: 1; padding: 12px 22px; font-size: 15px; }
}