/*
 * ColdProxy's order form: its own rules (spec #1, phase 3; docs/theme-styles.md, "The order form's
 * stylesheet").
 *
 * Rules for this file (tests/cases/CartStylesheetTest.php and OrderFormContractTest.php check them):
 * - Only the pages this child order form overrides link it, through
 *   includes/coldproxy-cart-stylesheet.tpl, right after standard_cart's common.tpl. So its rules
 *   reach customers with the order form (#31's go-live) and leave with an order form rollback; a
 *   theme promotion never carries them. The rules css/theme.css keeps for standard_cart (right to
 *   left, phones) stay there, so they hold after such a rollback too.
 * - It loads after standard_cart's all.min.css, so a rule here wins by order where it names what
 *   standard_cart names, with the same weight: write standard_cart's own selector, #order-standard_cart
 *   included.
 * - Colours: none. It reads the theme's --cp-* tokens, which css/theme.css defines on every cart page,
 *   and defines no token of its own. Use only tokens the live theme release has: a token added to
 *   css/theme.css for this file reaches customers with a theme promotion, which goes before the
 *   order form release that reads it.
 * - The page links this file with ?v=<version of this file>. After any change, run
 *   php tools/theme/stamp.php and commit the stamped includes/coldproxy-cart-stylesheet.tpl with it.
 * - Each phase 3 page ticket writes its rules under its own "page:" banner, in ticket order.
 * - Right to left: logical properties where they can; standard_cart's physical floats are mirrored
 *   under [dir="rtl"], at the widths where standard_cart sets them.
 */

/* ======================================================================= page: store and configure (#28) */

/* Right to left, the categories column and the order summary take the right, the page and the options
   the left, wherever standard_cart floats them: from 1200px and from 992px, the exact complements of its
   (max-width:1199px) and (max-width:991px). Under those widths nothing floats and the summary keeps its
   centre. */
@media not all and (max-width:1199px){
[dir="rtl"] #order-standard_cart .cart-sidebar{float:right}
[dir="rtl"] #order-standard_cart .cart-body{float:left}
}
@media not all and (max-width:991px){
[dir="rtl"] #order-standard_cart .secondary-cart-body{float:right}
[dir="rtl"] #order-standard_cart .secondary-cart-sidebar{float:left}
}

/* The page title. css/theme.css reverses a title's column so a breadcrumb sits above the h1; a cart page
   has none, and the reversal put the store group's tagline above its name. The tagline is the page's
   lead, as on the canvas. */
#order-standard_cart .header-lined{flex-direction:column}
#order-standard_cart .header-lined p{max-width:68ch;margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--cp-text)}

/* The sidebar below 1200px. standard_cart hides its categories column there and prints Categories and
   Actions over the page instead, each a card holding one select (sidebar-categories-collapsed.tpl,
   which every cart page includes from standard_cart's folder, so it is restyled here). As the canvas's
   fields, a 13px semibold label over a 44px select, they take the page's width, side by side where two
   fit. Without the card's padding a select at 320px has room for Hebrew's "- Choose Another Category -",
   which the card cut (#28, layer 3 run 8 N8-1). At 340px and narrower each select takes its own row with
   the least padding its chevron allows, 8px at its start and 28px at its end for the chevron's 8px
   inset, 16px icon and 4px gap, and writes at 12px, so the longer translations show as much as they
   can. Macedonian's "- ИЗБЕРИ ДРУГА КАТЕГОРИЈА НА УСЛУГИ -" needs 261.9px of the 250px at 12px (run 13
   F3), so under lang="mk", which the theme prints for it, it writes at 11px (240.1px). The block holds
   exactly where standard_cart shows the selects: the complement of its (min-width:1200px), which hides
   them. Its column hides at (max-width:1199px), a different rule, so between 1199px and 1200px stock
   shows both. */
@media not all and (min-width:1200px){
#order-standard_cart .sidebar-collapsed{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;margin:0 0 24px;padding:0;border-radius:0}
#order-standard_cart .sidebar-collapsed::after{display:none}
#order-standard_cart .sidebar-collapsed>.panel{flex:1 1 260px;min-width:0;margin:0;border:0;border-radius:0;box-shadow:none;background-color:transparent}
#order-standard_cart .sidebar-collapsed .panel-heading{padding:0 0 6px;border:0;background-color:transparent}
#order-standard_cart .sidebar-collapsed h3{font-size:13px;font-weight:600;line-height:1.5;color:var(--cp-ink)}
#order-standard_cart .sidebar-collapsed h3>i{color:var(--cp-muted)}
#order-standard_cart .sidebar-collapsed .panel-body{padding:0}
#order-standard_cart .sidebar-collapsed .panel-footer{padding:6px 0 0;border:0;background-color:transparent}
}
@media (max-width:340px){
#order-standard_cart .sidebar-collapsed>.panel{flex-basis:100%}
#order-standard_cart .sidebar-collapsed select.form-control{padding-inline-start:8px;padding-inline-end:28px;font-size:12px;background-position:right 8px center}
[dir="rtl"] #order-standard_cart .sidebar-collapsed select.form-control{background-position:left 8px center}
#order-standard_cart .sidebar-collapsed select.form-control:lang(mk){font-size:11px}
}

/* The store's products: each one the canvas's card. standard_cart floats the description (60%) beside
   the price (40%) under a grey name bar; the card is a column instead, the name, the description at the
   card's width, then a footer row with the price at its start and Order Now at its end. The footer sits
   at the card's bottom and each column stretches its card, so the two cards of a row line up. */
#order-standard_cart .products{margin:0}
#order-standard_cart .products .row-eq-height{display:flex;flex-wrap:wrap}
#order-standard_cart .products .row-eq-height::before,#order-standard_cart .products .row-eq-height::after{display:none}
#order-standard_cart .products .row-eq-height>.col-md-6{display:flex}
@media not all and (min-width:992px){
#order-standard_cart .products .row-eq-height>.col-md-6{width:100%}
}
#order-standard_cart .products .product{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;margin:0 0 24px;padding:0;background-color:var(--cp-surface);border:1px solid var(--cp-border);border-radius:var(--cp-radius);box-shadow:var(--cp-shadow)}
#order-standard_cart .products .product header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px 12px;margin:0;padding:20px 24px 0;background-color:transparent;border-radius:0}
#order-standard_cart .products .product header span{font-size:16px;line-height:1.4;font-weight:700;color:var(--cp-heading)}
#order-standard_cart .products .product header .qty{float:none;flex:none;padding:2px 10px;font-size:12px;line-height:1.5;font-weight:600;font-style:normal;white-space:nowrap;color:var(--cp-text);background-color:var(--cp-surface-3);border-radius:999px}
#order-standard_cart .products .product div.product-desc{float:none;width:auto;padding:10px 24px 16px;font-size:14px;line-height:1.6;color:var(--cp-text)}
#order-standard_cart .products .product div.product-desc p{margin:0 0 8px}
#order-standard_cart .products .product div.product-desc p:empty{display:none}
/* The portal's descriptions are lists written with a line break after each item. Where those reach the
   page as <br>, as they did through WHMCS's parsed text, the browser moves them between the items and
   after the list, as empty lines; these rules hide them. A break inside a paragraph stays. */
#order-standard_cart .products .product div.product-desc>br,#order-standard_cart .products .product div.product-desc ul>br,#order-standard_cart .products .product div.product-desc>strong>br{display:none}
#order-standard_cart .products .product div.product-desc ul{margin:0 0 8px;padding-inline-start:18px}
#order-standard_cart .products .product div.product-desc li{margin:0 0 6px}
#order-standard_cart .products .product div.product-desc li::marker{color:var(--cp-faint)}
#order-standard_cart .products .product div.product-desc strong{font-weight:600;color:var(--cp-ink)}
/* A safety net for a description that leaves a <strong> open. WHMCS's feature parser did so (run 13 F1):
   it split "<strong>User:Pass or IP Auth</strong>" at the colon. products.tpl prints the description as
   written since, so only an author's unclosed tag can. The browser reopens a copy of the open <strong>
   in each element that follows: the card's footer, the next cards' headers and descriptions, the
   columns, and the page footer under <body>. A copy gives its contents back to its parent's layout, so
   the footer is the card's flex item again and sits at its bottom, at the text's weight and colour.
   Where a description's own <strong> may sit, only a copy that holds a block matches. A browser without
   :has() drops a whole rule that names it, so those selectors sit in a rule of their own. */
#order-standard_cart .products .row-eq-height>strong,#order-standard_cart .products .row-eq-height>.col-md-6>strong,
#order-standard_cart .products .product>strong,#order-standard_cart .products .product div.product-desc ul>strong{display:contents;font-weight:normal;color:inherit}
#order-standard_cart .products .product div.product-desc>strong:has(>:is(p,ul,ol,div)),
body strong:has(>:is(div,header,footer,form,section)){display:contents;font-weight:normal;color:inherit}
#order-standard_cart .products .product footer{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px;float:none;width:auto;margin:0;margin-top:auto;padding:16px 24px 20px;font-size:13px;text-align:start;border-top:1px solid var(--cp-border-soft)}
#order-standard_cart .products .product div.product-pricing{margin:0;font-size:13px;line-height:1.5;color:var(--cp-muted)}
#order-standard_cart .products .product div.product-pricing span.price{display:inline-block;font-size:22px;line-height:1.3;font-weight:700;letter-spacing:-.01em;color:var(--cp-heading);font-variant-numeric:tabular-nums}
/* The DiscountCenter addon prints a discounted price as the old one in <del>, then the new one. */
#order-standard_cart .products .product div.product-pricing span.price del{font-size:14px;font-weight:400;letter-spacing:0;color:var(--cp-muted)}
#order-standard_cart .products .product .btn-order-now{--cp-ctl-r:var(--cp-radius-md);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;font-size:14px;line-height:20px}
@media (max-width:767.98px){
#order-standard_cart .products .product header{padding:18px 16px 0}
#order-standard_cart .products .product div.product-desc{padding:10px 16px 14px}
#order-standard_cart .products .product footer{padding:14px 16px 18px}
#order-standard_cart .products .product .btn-order-now{flex:1 1 100%}
}

/* Configure product. The product, on standard_cart's grey band, is a card; each section's title, which
   standard_cart centres on a rule, is the canvas's card title at the section's start. */
#order-standard_cart .product-info{margin:0 0 24px;padding:20px 24px;font-size:14px;line-height:1.6;color:var(--cp-text);background-color:var(--cp-surface);border:1px solid var(--cp-border);border-radius:var(--cp-radius);box-shadow:var(--cp-shadow)}
#order-standard_cart .product-info .product-title{margin:0 0 6px;font-size:18px;line-height:1.35;font-weight:700;color:var(--cp-heading)}
#order-standard_cart .product-info p:empty,#order-standard_cart .product-info>br,#order-standard_cart .product-info ul>br{display:none}
#order-standard_cart .product-info ul{margin:0;padding-inline-start:18px}
#order-standard_cart .product-info li{margin:0 0 6px}
#order-standard_cart .product-info li::marker{color:var(--cp-faint)}
#order-standard_cart .product-info strong{font-weight:600;color:var(--cp-ink)}
#order-standard_cart .sub-heading{height:auto;margin:28px 0 12px;border-top:0;text-align:start}
#order-standard_cart .sub-heading span{position:static;top:auto;display:block;padding:0;font-size:16px;line-height:1.4;font-weight:700;color:var(--cp-heading);background-color:transparent}
#order-standard_cart .sub-heading span small{font-size:13px;font-weight:400;color:var(--cp-muted)}
/* The fields' labels: standard_cart writes them light grey and 300. */
#order-standard_cart #frmConfigureProduct label{margin-right:0;font-size:13px;font-weight:600;color:var(--cp-ink)}
#order-standard_cart #frmConfigureProduct .field-help-text{display:block;margin-top:6px;font-size:13px;color:var(--cp-muted)}

/* A radio or yes-or-no option's choices: the canvas's speed tiers (board 14), each a bordered row with
   14px corners, 14px by 16px of padding and at least 44px tall, that takes the tier's hover line under
   the pointer and the focus colour with the tier's ring while chosen. iCheck keeps drawing the box and
   marks the chosen one .checked, which standard_cart's script recalculates the total on. The box stops
   floating, so it keeps the row's start either way round; css/theme.css floats it right to left for
   standard_cart. */
#order-standard_cart #frmConfigureProduct .product-configurable-options .form-group>br{display:none}
#order-standard_cart #frmConfigureProduct .product-configurable-options .form-group>label[for]{display:block;margin:0 0 8px}
#order-standard_cart #frmConfigureProduct .product-configurable-options .form-group>label:not([for]){display:flex;align-items:center;gap:10px;min-height:44px;margin:0 0 8px;padding:14px 16px;font-size:14px;line-height:1.4;font-weight:500;color:var(--cp-ink);background-color:var(--cp-surface);border:1px solid var(--cp-border);border-radius:14px;cursor:pointer;transition:border-color .2s var(--cp-ease),box-shadow .2s var(--cp-ease)}
#order-standard_cart #frmConfigureProduct .product-configurable-options .form-group>label:not([for]):hover{border-color:var(--cp-accent-line-hover)}
#order-standard_cart #frmConfigureProduct .product-configurable-options .form-group>label:not([for]):has(>.iradio_square-blue.checked),
#order-standard_cart #frmConfigureProduct .product-configurable-options .form-group>label:not([for]):has(>.icheckbox_square-blue.checked){border-color:var(--cp-focus);box-shadow:0 0 0 3px var(--cp-focus-ring-soft)}
/* A radio option's choices are the canvas's tier grid: standard_cart's half-width column held one column
   of them at 1440px, so the option takes the row and its choices fill as many 220px tracks as fit, 12px
   apart, under its name. iCheck wraps the radio in its box once its script runs. */
#order-standard_cart #frmConfigureProduct .product-configurable-options .row>.col-sm-6:has(>.form-group>label>input[type="radio"],>.form-group>label>.iradio_square-blue){width:100%}
#order-standard_cart #frmConfigureProduct .product-configurable-options .form-group:has(>label>input[type="radio"],>label>.iradio_square-blue){display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
#order-standard_cart #frmConfigureProduct .product-configurable-options .form-group:has(>label>input[type="radio"],>label>.iradio_square-blue)>label{margin:0}
#order-standard_cart #frmConfigureProduct .product-configurable-options .form-group:has(>label>input[type="radio"],>label>.iradio_square-blue)>label[for]{grid-column:1/-1}
#order-standard_cart #frmConfigureProduct .product-configurable-options label>.iradio_square-blue,
#order-standard_cart #frmConfigureProduct .product-configurable-options label>.icheckbox_square-blue{flex:none;float:none;margin:0}

/* Addons: standard_cart's grey price strip and green Add to Cart take the theme's tokens. */
#order-standard_cart .panel-addon{overflow:hidden;font-size:14px;text-align:start}
#order-standard_cart .panel-addon .panel-body label{font-size:14px;font-weight:600;color:var(--cp-ink)}
#order-standard_cart .panel-addon .panel-price{padding:8px 24px;font-weight:600;color:var(--cp-ink);background-color:var(--cp-surface-2);border-top:1px solid var(--cp-border-soft)}
#order-standard_cart .panel-addon .panel-add{padding:10px 24px;font-weight:600;color:var(--cp-accent-ink);background-color:var(--cp-accent-soft);border-radius:0}
#order-standard_cart .panel-addon-selected{border-color:var(--cp-focus);box-shadow:0 0 0 3px var(--cp-focus-ring-soft)}
#order-standard_cart .panel-addon-selected .panel-add{color:var(--cp-on-accent);background-color:var(--cp-accent)}

/* The order summary, a dark grey box in standard_cart, is a white card: its title as a card head, the
   lines in the page's text, and the total as the canvas's figure at the end. Its contents come from
   standard_cart's ordersummary.tpl, which WHMCS renders by AJAX for the active order form, so they are
   styled here. Continue is the canvas's 44px primary button across the card's width. */
#order-standard_cart .order-summary{margin:0 0 16px;padding:0;background-color:var(--cp-surface);border:1px solid var(--cp-border);border-radius:var(--cp-radius);box-shadow:var(--cp-shadow)}
#order-standard_cart .order-summary h2{margin:0;padding:18px 24px 14px;font-size:16px;line-height:1.4;font-weight:700;text-align:start;color:var(--cp-heading);border-bottom:1px solid var(--cp-border-soft)}
#order-standard_cart .order-summary .loader{top:18px;padding:0 24px;text-align:end;color:var(--cp-muted)}
#order-standard_cart .summary-container{min-height:0;padding:16px 24px 20px;font-size:13px;line-height:1.5;color:var(--cp-text);background-color:transparent;border-radius:0}
#order-standard_cart .summary-container .clearfix{padding:2px 0}
#order-standard_cart .summary-container .pull-right{color:var(--cp-ink);font-variant-numeric:tabular-nums}
#order-standard_cart .order-summary .product-name{font-size:14px;line-height:1.4;font-weight:700;color:var(--cp-heading)}
#order-standard_cart .order-summary .product-group{margin:0 0 10px;font-size:12px;font-style:normal;color:var(--cp-muted)}
#order-standard_cart .order-summary .summary-totals{margin:10px 0;padding:10px 0;border-color:var(--cp-border-soft)}
#order-standard_cart .order-summary .total-due-today span{text-align:end;font-size:13px;color:var(--cp-muted)}
#order-standard_cart .order-summary .total-due-today .amt{font-size:26px;line-height:1.25;font-weight:700;letter-spacing:-.015em;color:var(--cp-heading);font-variant-numeric:tabular-nums}
#order-standard_cart #btnCompleteProductConfig{--cp-ctl-r:var(--cp-radius-md);display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;padding:0 16px;font-size:14px;line-height:20px}
#order-standard_cart .info-text-sm{font-size:13px;text-align:start}
@media (max-width:767.98px){
#order-standard_cart .product-info{padding:18px 16px}
#order-standard_cart .order-summary h2{padding:16px 16px 12px}
#order-standard_cart .order-summary .loader{top:16px;padding:0 16px}
#order-standard_cart .summary-container{padding:14px 16px 18px}
}

/* ======================================================================= page: view cart (#29) */

/* The items: one card, its column titles as the canvas's table head and each item a row between
   dividers, where standard_cart drew a dark blue title bar over white and grey stripes. The rows keep
   standard_cart's columns. From 768px an item's name, price and remove button share a line, centred on
   it; the row's clearfix boxes would be flex items there, so they go. */
#order-standard_cart .view-cart-items-header{margin:0;padding:10px 24px;font-size:12px;line-height:1.5;font-weight:600;color:var(--cp-muted);background-color:var(--cp-surface-2);border:1px solid var(--cp-border);border-radius:var(--cp-radius) var(--cp-radius) 0 0}
#order-standard_cart .view-cart-items{margin:0 0 8px;background-color:var(--cp-surface);border:1px solid var(--cp-border);border-top:0;border-radius:0 0 var(--cp-radius) var(--cp-radius);box-shadow:var(--cp-shadow)}
#order-standard_cart .view-cart-items .item{padding:16px 24px;font-size:14px;line-height:1.5;color:var(--cp-text);background-color:transparent}
#order-standard_cart .view-cart-items .item:nth-child(even){background-color:transparent}
#order-standard_cart .view-cart-items .item+.item{border-top:1px solid var(--cp-border-soft)}
#order-standard_cart .view-cart-items .item-title{font-size:14px;line-height:1.4;font-weight:600;color:var(--cp-heading)}
#order-standard_cart .view-cart-items .item-group{margin-top:2px;font-size:13px;color:var(--cp-muted)}
#order-standard_cart .view-cart-items .item-domain{font-size:13px;color:var(--cp-ink)}
#order-standard_cart .view-cart-items .item small{display:block;margin-top:6px;font-size:13px;line-height:1.6;color:var(--cp-muted)}
#order-standard_cart .view-cart-items .item-price{font-size:13px;line-height:1.5;color:var(--cp-muted)}
#order-standard_cart .view-cart-items .item-price span{font-size:16px;line-height:1.4;font-weight:700;color:var(--cp-heading);font-variant-numeric:tabular-nums}
#order-standard_cart .view-cart-items .item-price .cycle{font-size:13px;line-height:1.5;font-weight:400;color:var(--cp-muted)}
#order-standard_cart .view-cart-items .item-qty input{height:44px;padding:10px 8px}
#order-standard_cart .view-cart-items .item-qty button{min-height:36px;padding:0 12px;font-size:13px}
#order-standard_cart .view-cart-empty{padding:40px 24px;font-size:14px;color:var(--cp-muted)}
@media not all and (max-width:767.98px){
#order-standard_cart .view-cart-items .item>.row{display:flex;align-items:center}
#order-standard_cart .view-cart-items .item>.row::before,#order-standard_cart .view-cart-items .item>.row::after{display:none}
}
@media (max-width:767.98px){
#order-standard_cart .view-cart-items-header{padding:10px 16px}
#order-standard_cart .view-cart-items .item{padding:14px 16px}
#order-standard_cart .view-cart-items .item-price{margin-top:6px}
}

/* An item's Edit and Remove are the canvas's 36px small controls at every width; css/theme.css makes
   them 36px on phones only, for standard_cart. Edit is a link button, Remove a muted icon button that
   turns red when pointed at: written out beside Edit on phones, the icon alone at the row's end from
   768px. Empty Cart is the same red-on-hover button under the card's end, where standard_cart hung a
   blue tab from the card's bottom edge. */
#order-standard_cart .view-cart-items .btn-link.btn-xs{--cp-ctl-r:10px;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 8px;font-size:13px;line-height:18px;font-weight:600;vertical-align:middle}
#order-standard_cart .view-cart-items .btn-link.btn-xs:hover,#order-standard_cart .view-cart-items .btn-link.btn-xs:focus{color:var(--cp-accent-ink);background-color:var(--cp-accent-soft);text-decoration:none}
#order-standard_cart .view-cart-items .btn-link.btn-remove-from-cart{min-width:36px;color:var(--cp-muted)}
#order-standard_cart .view-cart-items .btn-link.btn-remove-from-cart:hover,#order-standard_cart .view-cart-items .btn-link.btn-remove-from-cart:focus{color:var(--cp-bad);background-color:var(--cp-bad-soft)}
#order-standard_cart .empty-cart{margin:0 0 24px;text-align:end}
#order-standard_cart .empty-cart .btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;margin:0;padding:0 10px;font-size:13px;line-height:18px;font-weight:600;color:var(--cp-muted);background-color:transparent;border:0;border-radius:10px}
#order-standard_cart .empty-cart .btn:hover,#order-standard_cart .empty-cart .btn:focus{color:var(--cp-bad);background-color:var(--cp-bad-soft)}

/* The promotion code. standard_cart sets its tabs over a grey panel 15px inside the column; here they
   are a tab row on the page, and the field and Validate Code sit under it at the column's width, side
   by side from 768px and one over the other on phones. So at 320px the field has room for Hebrew's
   hint, "אם יש ברשותכם קוד הנחה - הזינו אותו כאן", which needs 237px at 13px where the panel and the
   field's icon left 212px (#29, layer 3 run 8 N8-2); at 340px and narrower it also drops its icon, and
   css/theme.css writes the hint at 13px. The field's padding names its id, which outweighs
   css/theme.css's right-to-left padding for the order form's icon fields. The icon is centred on the
   theme's 44px field: standard_cart draws it 36px tall. An applied code is the canvas's success notice,
   with Remove Promotion Code a 36px small button under it. */
#order-standard_cart .view-cart-tabs{margin:0 0 24px}
#order-standard_cart .view-cart-tabs .nav-tabs{padding-inline:0;font-size:14px}
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"],#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"]{background-color:transparent}
#order-standard_cart .view-cart-tabs .tab-content{padding:16px 0 0;background-color:transparent}
#order-standard_cart .view-cart-tabs .promo form{display:flex;align-items:flex-start;gap:12px}
#order-standard_cart .view-cart-tabs .promo .form-group{flex:1 1 auto;min-width:0;margin:0}
#order-standard_cart .view-cart-tabs .promo .btn-block{flex:none;width:auto;margin:0}
#order-standard_cart .view-cart-tabs .prepend-icon .field-icon{height:44px;line-height:44px}
#order-standard_cart .view-cart-tabs .field-icon i{color:var(--cp-muted)}
#order-standard_cart .view-cart-promotion-code{margin:0 0 12px;padding:14px 16px;font-size:14px;line-height:1.55;font-weight:600;color:var(--cp-ok-strong);background-color:var(--cp-ok-soft);border:1px solid var(--cp-ok-line);border-radius:14px;text-align:start}
#order-standard_cart .view-cart-tabs .promo .text-center{text-align:start}
#order-standard_cart .view-cart-tabs .promo .btn-xs{--cp-ctl-r:10px;min-height:36px;padding:7px 12px;font-size:13px;line-height:20px}
@media (max-width:767.98px){
#order-standard_cart .view-cart-tabs .promo form{flex-direction:column;align-items:stretch}
#order-standard_cart .view-cart-tabs .promo .btn-block{width:100%}
}
@media (max-width:340px){
#order-standard_cart .view-cart-tabs .prepend-icon .field-icon{display:none}
#order-standard_cart #inputPromotionCode{padding-inline:12px 8px}
}

/* The order summary's lines, in #28's card: the subtotal, then the discount and the taxes, each over a
   divider, the recurring totals muted at the end, the total due today as #28's figure. Checkout is the
   canvas's 44px primary button across the card and Continue Shopping a 36px link button under it, where
   standard_cart had a 56px button at the card's end. */
#order-standard_cart .order-summary .subtotal{margin:0;padding:0 0 10px;font-size:14px;color:var(--cp-ink);border-bottom:1px solid var(--cp-border-soft)}
#order-standard_cart .order-summary .bordered-totals{margin:0;padding:10px 0;border-bottom:1px solid var(--cp-border-soft)}
#order-standard_cart .order-summary .recurring-totals{margin:10px 0 0}
#order-standard_cart .order-summary .recurring-charges{font-size:13px;font-style:normal;color:var(--cp-muted)}
#order-standard_cart .order-summary .total-due-today-padded{margin:16px 0}
#order-standard_cart .express-checkout-buttons .separator{margin:0;padding:8px 0;font-size:13px;color:var(--cp-muted);text-align:center}
#order-standard_cart #checkout{--cp-ctl-r:var(--cp-radius-md);display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;padding:0 16px;font-size:14px;line-height:20px}
#order-standard_cart #continueShopping{--cp-ctl-r:10px;display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:36px;margin-top:8px;padding:0 12px;font-size:13px;line-height:18px;color:var(--cp-accent)}
#order-standard_cart #continueShopping:hover,#order-standard_cart #continueShopping:focus{color:var(--cp-accent-hover);background-color:var(--cp-accent-soft);text-decoration:none}

/* The amounts' side. Right to left, css/theme.css gives each amount the direction of its own text
   (unicode-bidi: plaintext), and with it that text's start and end: text-align:end put "$3.80 USD" at
   the right of a column whose billing cycle sat at its left. So the item's price column and the
   recurring totals are aligned by side, at the right and, right to left, at the left, as standard_cart
   aligns them to the right; and so is the line under the total due today, which #28's "end" put at the
   left under a total at the right, here and in Configure product's summary. */
#order-standard_cart .view-cart-items .item-price,#order-standard_cart .order-summary .recurring-charges{text-align:right}
[dir="rtl"] #order-standard_cart .view-cart-items .item-price,[dir="rtl"] #order-standard_cart .order-summary .recurring-charges,
[dir="rtl"] #order-standard_cart .order-summary .total-due-today span{text-align:left}

/* The Remove Item and Empty Cart dialogs. standard_cart gives their footer 45px under its buttons, over
   css/theme.css's dialog footer, which leaves an empty grey strip (layer 3 run 14 N4): it takes the
   theme's bottom padding back, 14px and on phones 12px. Their close button, which sits in the dialog's
   body and not in a head, where css/theme.css makes it 36px on phones, is a 36px square at every width
   with its × centred (N5); the negative margins keep the × where it was. Bootstrap floats it to the
   right and css/theme.css to the left right to left, so its end margin follows the page. */
#order-standard_cart .modal-remove-item .modal-footer{padding-bottom:14px}
#order-standard_cart .modal-remove-item .close{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;margin-block:-8px;margin-inline-end:-10px}
@media (max-width:767.98px){
#order-standard_cart .modal-remove-item .modal-footer{padding-bottom:12px}
}

/* ======================================================================= page: checkout (#30) */

/* The page's lead, then the switch between signing in and a new account at its end. standard_cart floats
   the switch right; in the row it keeps the end in either direction. */
#order-standard_cart .already-registered{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin:0 0 20px}
#order-standard_cart .already-registered::before,#order-standard_cart .already-registered::after{display:none}
#order-standard_cart .already-registered>p{flex:1 1 260px;order:-1;margin:0;font-size:15px;line-height:1.5;color:var(--cp-text)}
#order-standard_cart .already-registered .btn{--cp-ctl-r:var(--cp-radius-md);min-height:44px;padding:0 18px;font-size:14px;line-height:20px}

/* Each section is the canvas's card (checkout.tpl wraps it in .cp-card), its title the card's title,
   which "page: store and configure (#28)" draws from standard_cart's .sub-heading. The last row of fields
   gives back its fields' bottom margin, so a card ends 22px under its last field, as on the canvas. */
#order-standard_cart #frmCheckout .cp-card{margin:0 0 16px}
#order-standard_cart #frmCheckout .cp-card>.sub-heading:first-child{margin-top:0}
#order-standard_cart #frmCheckout .cp-card>.row:last-child:has(>:last-child>.form-group:last-child),
#order-standard_cart #frmCheckout .cp-card>.field-container:last-child{margin-bottom:-16px}
#order-standard_cart #frmCheckout .form-group:not(.recaptcha-container){margin-bottom:16px}
/* The CAPTCHA card: the box keeps the CAPTCHA box's own margins (css/theme.css, which take back the
   height a scaled box frees on phones), and neither it nor the include's wrapper, Six's 20px
   .margin-bottom, adds space under it, so the card ends 22px under the box. */
#order-standard_cart #frmCheckout .cp-captcha,#order-standard_cart #frmCheckout .margin-bottom:has(>.cp-captcha){margin-bottom:0}
/* The mailing list's card (css/theme.css) takes the same sides as the others. */
#order-standard_cart #frmCheckout .marketing-email-optin{margin:0 0 16px;padding:20px 24px 22px}

/* Fields: standard_cart's own rules give them a light grey line, 3px corners and no focus ring; they take
   the theme's field back, its icon centred in the 44px field. */
#order-standard_cart #frmCheckout .field,#order-standard_cart #frmCheckout .form-control{border-color:var(--cp-border-strong);border-radius:var(--cp-ctl-r);color:var(--cp-heading)}
#order-standard_cart #frmCheckout .field:focus,#order-standard_cart #frmCheckout .form-control:focus{border-color:var(--cp-focus);box-shadow:0 0 0 4px var(--cp-focus-ring)}
#order-standard_cart #frmCheckout .prepend-icon .field-icon{height:44px;line-height:44px}
#order-standard_cart #frmCheckout .field-icon i{color:var(--cp-muted)}
/* The security question. The stock row puts its select in a column without a .form-group, so on phones,
   where the columns stack, it sat on the answer field: it takes a field's 16px gap (layer 3 run 14 N3).
   Under 373px it keeps the least padding its chevron allows and writes at 12px, as the sidebar's
   selects ("page: store and configure (#28)"), so English's "Please choose a security question" fits
   inside the card at 320px (N2), and from 373px Danish's text, the widest of the others, fits at 14px
   (run 15). Ukrainian, Hungarian, Russian, both Portuguese, French, German and Spanish (lang uk, hu,
   ru, pt-BR, pt-PT, fr, de and es) keep that rule at every width: at 14px some of their live texts
   ended in an ellipsis at 373px to 414px (N6) and at 768px, beside the answer; at 12px each is whole
   from 373px. */
@media (max-width:767.98px){
#order-standard_cart #frmCheckout #inputSecurityQId{margin-bottom:16px}
}
#order-standard_cart #frmCheckout #inputSecurityQId:lang(uk),#order-standard_cart #frmCheckout #inputSecurityQId:lang(hu),
#order-standard_cart #frmCheckout #inputSecurityQId:lang(ru),#order-standard_cart #frmCheckout #inputSecurityQId:lang(pt),
#order-standard_cart #frmCheckout #inputSecurityQId:lang(fr),#order-standard_cart #frmCheckout #inputSecurityQId:lang(de),
#order-standard_cart #frmCheckout #inputSecurityQId:lang(es){padding-inline-start:8px;padding-inline-end:28px;font-size:12px;background-position:right 8px center}
@media (max-width:372.98px){
#order-standard_cart #frmCheckout #inputSecurityQId{padding-inline-start:8px;padding-inline-end:28px;font-size:12px;background-position:right 8px center}
[dir="rtl"] #order-standard_cart #frmCheckout #inputSecurityQId{background-position:left 8px center}
}

/* Social Media Login's buttons, under "Sign up with", with "or" over the e-mail sign-up below them. The
   card shows only when the addon prints a button: it prints none for a signed-in client. */
#order-standard_cart .cp-checkout-social:not(:has(.row-media>a.btn-media)){display:none}
#order-standard_cart .cp-checkout-social .row-media.row-centered{margin:14px 0 0 !important}
#order-standard_cart .cp-checkout-social .row-media>a.btn-media{flex-basis:136px}
#order-standard_cart .cp-checkout-or{display:flex;align-items:center;gap:12px;margin:22px 0 0;font-size:12px;font-weight:600;color:var(--cp-muted)}
#order-standard_cart .cp-checkout-or::before,#order-standard_cart .cp-checkout-or::after{content:"";flex:1;height:1px;background-color:var(--cp-border)}

/* A signed-in client's accounts: bordered rows side by side where two fit, the chosen one outlined.
   standard_cart draws them as grey cells joined by their lines, with physical borders. */
#order-standard_cart .account-select-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px;margin:0;border:0}
#order-standard_cart .account-select-container::before,#order-standard_cart .account-select-container::after{display:none}
#order-standard_cart .account-select-container>[class*="col-"]{float:none;width:auto;padding:0}
#order-standard_cart .account-select-container>.col-sm-12{grid-column:1/-1}
#order-standard_cart .account-select-container div.account,#order-standard_cart .account-select-container div.account:not(.border-bottom){height:100%;padding:12px 14px;background-color:var(--cp-surface);border:1px solid var(--cp-border);border-radius:var(--cp-radius-md)}
#order-standard_cart .account-select-container div.account.active{border-color:var(--cp-focus);box-shadow:0 0 0 3px var(--cp-focus-ring)}
#order-standard_cart .account-select-container label{display:flex;align-items:flex-start;gap:10px;margin:0;padding:0;font-size:14px;font-weight:500;color:var(--cp-ink)}
#order-standard_cart .account-select-container label>.iradio_square-blue{flex:none;margin:0}

/* The total due today, which the PaymentGatewayCharges addon rewrites as the total, the fee and the
   total due, one line each: a grey panel with the amounts in figures of one width. The box keeps the
   exact classes the addon finds it by, so its rules name its id, inside the form: View Cart prints its
   summary's figure with the same id, which these rules drew as this panel (layer 3 run 14 N1). An
   amount never breaks between its number and its currency. Right to left each line takes its own
   direction (css/theme.css) at the right. */
#order-standard_cart #frmCheckout #totalDueToday{margin:0 0 16px;padding:14px 18px;font-size:14px;line-height:1.75;color:var(--cp-text);text-align:start;background-color:var(--cp-surface-2);border:1px solid var(--cp-border-soft);border-radius:var(--cp-radius-md)}
#order-standard_cart #frmCheckout #totalDueToday strong{font-weight:700;color:var(--cp-heading);font-variant-numeric:tabular-nums;white-space:nowrap}
[dir="rtl"] #order-standard_cart #frmCheckout #totalDueToday{text-align:right}

/* The credit balance's choice, standard_cart's grey band, as the total's panel. */
#order-standard_cart .apply-credit-container{margin:0 0 16px;padding:14px 18px;font-size:14px;color:var(--cp-text);background-color:var(--cp-surface-2);border:1px solid var(--cp-border-soft);border-radius:var(--cp-radius-md)}
#order-standard_cart .apply-credit-container span{font-weight:600;color:var(--cp-ink)}

/* The payment methods: the canvas's speed tiers, as Configure product's choices, each a bordered row with
   14px corners, 14px by 16px of padding and at least 44px tall, with the tier's hover line and, while
   chosen, the focus colour with the tier's ring. iCheck keeps drawing each radio at its row's start, and PaymentGatewayCharges and
   standard_cart's script follow its ifChecked event. */
#order-standard_cart #paymentGatewaysContainer>p{margin:0 0 8px;font-size:13px;color:var(--cp-muted)}
#order-standard_cart #paymentGatewaysContainer>.text-center{display:flex;flex-wrap:wrap;gap:8px 12px;text-align:start}
#order-standard_cart #paymentGatewaysContainer .radio-inline{display:flex;align-items:center;gap:10px;flex:1 1 220px;min-height:44px;margin:0;padding:14px 16px;font-size:14px;line-height:1.4;font-weight:500;color:var(--cp-ink);background-color:var(--cp-surface);border:1px solid var(--cp-border);border-radius:14px;cursor:pointer;transition:border-color .2s var(--cp-ease),box-shadow .2s var(--cp-ease)}
#order-standard_cart #paymentGatewaysContainer .radio-inline:hover{border-color:var(--cp-accent-line-hover)}
#order-standard_cart #paymentGatewaysContainer .radio-inline:has(>.iradio_square-blue.checked){border-color:var(--cp-focus);box-shadow:0 0 0 3px var(--cp-focus-ring-soft)}
#order-standard_cart #paymentGatewaysContainer .radio-inline>.iradio_square-blue{flex:none;margin:0}

/* PaymentGatewayCharges' fee table, which the addon puts after #creditCardInputFields, its cells in
   English in every language. An amount never breaks between its number and its currency (#30, layer 3
   run 8): the rate and amount cells keep one line. Three columns of those need about 350px, more than a
   phone's card holds, so on phones each row is a wrapping line: the payment method across it, then its
   rate and, at the line's end, its amount, and the headings stand the same way. Where the rate and the
   amount do not fit side by side, the amount goes under the rate; a rate wider than the card makes the
   table scroll inside the card, never the page, and nothing overlaps. */
#order-standard_cart #mg-charge-table{overflow-x:auto}
#order-standard_cart #mg-charge-table .table{margin:0;font-variant-numeric:tabular-nums}
#order-standard_cart #mg-charge-table td:nth-child(n+2){white-space:nowrap}
@media (max-width:767.98px){
#order-standard_cart #mg-charge-table .table,#order-standard_cart #mg-charge-table thead,#order-standard_cart #mg-charge-table tbody{display:block}
#order-standard_cart #mg-charge-table tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:10px 12px;border-top:1px solid var(--cp-border-soft)}
#order-standard_cart #mg-charge-table thead tr{background-color:var(--cp-surface-2);border-top:0;border-bottom:1px solid var(--cp-border)}
#order-standard_cart #mg-charge-table .table>thead>tr>th,#order-standard_cart #mg-charge-table .table>tbody>tr>td{flex:none;padding:0;font-size:13px;background-color:transparent;border:0}
#order-standard_cart #mg-charge-table .table>thead>tr>th:first-child,#order-standard_cart #mg-charge-table .table>tbody>tr>td:first-child{flex:1 0 100%}
#order-standard_cart #mg-charge-table td:first-child{font-weight:600;color:var(--cp-ink)}
#order-standard_cart #mg-charge-table :is(th,td):nth-child(3){margin-inline-start:auto;text-align:end}
}

/* The Terms of Service and Complete Order, the last card, at its start as on the canvas's forms.
   Complete Order is the canvas's 44px primary button, the card's width on phones. */
#order-standard_cart .cp-checkout-confirm{text-align:start}
#order-standard_cart .cp-checkout-confirm>p{margin:0 0 12px}
/* iCheck draws the box in the line, so Bootstrap's room for an absolute checkbox would indent it. */
#order-standard_cart .cp-checkout-confirm .checkbox-inline{padding-right:0;padding-left:0}
#order-standard_cart #btnCompleteOrder{--cp-ctl-r:var(--cp-radius-md);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;font-size:15px;line-height:20px}
@media (max-width:767.98px){
#order-standard_cart #frmCheckout .marketing-email-optin{padding:18px 16px 20px}
#order-standard_cart #btnCompleteOrder{width:100%}
}

/* The line about the secure order form and the visitor's address: its lock at the line's start, where
   standard_cart floats it left beside a 75px left padding, so right to left it stood over the text. */
#order-standard_cart .checkout-security-msg{position:relative;margin:0 0 16px;padding:14px 16px;padding-inline-start:48px;font-size:13px;line-height:1.5;border-radius:var(--cp-radius-md)}
#order-standard_cart .checkout-security-msg i{position:absolute;top:14px;inset-inline-start:16px;float:none;margin:0;font-size:20px;line-height:1}