/* ==========================================================================
   FinjanHost / Webhoster -- order form overrides
   File:  templates/orderforms/standard_cart/css/custom.css

   WHY THIS FILE EXISTS
   standard_cart is stock. Its stylesheet loads AFTER the theme's custom.css
   (see standard_cart/common.tpl) and every rule in it is ID-scoped as
   `#order-standard_cart .x`, so it outranks the theme on both order and
   specificity. The result was that the cart -- the highest-value page in the
   client area -- kept the stock palette: a yellow gradient domain bar
   (#ffce44 -> #ffb201), a green checkout button, and accents in #3090e0,
   #2ad588 and #f9615a. None of those are FinjanHost colours.

   HOW IT LOADS
   common.tpl already contains {assetExists file="custom.css"} immediately
   after the all.min.css link, so dropping this file in is enough. No template
   edit, and nothing here is touched by a WHMCS update.

   SPECIFICITY
   Selectors mirror the stock ones exactly rather than out-qualifying them.
   Same weight, later in the cascade, so they win by one rule and stay easy to
   trace. Where a stock rule is more specific it is matched, not beaten with
   !important.

   TOKENS
   var(--wh-*) comes from the theme's custom.css, which loads earlier on the
   same page. Literal fallbacks are given so this file degrades to correct
   brand colours even if the theme stylesheet is ever missing.
   ========================================================================== */

/* -------------------------------------------------- 1. Base + typography */
/* Panel headings sit on the navy fill, so they are white here regardless of
   what the content headings do. Stated at id weight so nothing in this file
   can quietly take it back. */
#order-standard_cart .panel-heading .panel-title,
#order-standard_cart .panel-sidebar .panel-title,
#order-standard_cart .panel-heading .panel-title i,
#order-standard_cart .panel-heading .panel-title a{color:#fff}
/* Stock pins the cart to 14px while the theme body is 15px, so the cart read
   as a smaller, denser page than everything around it. */
#order-standard_cart{
  font-size:15px;
  padding-bottom:48px;
}
/* `:not(.panel-title)` is load-bearing. Bootstrap renders a panel heading as
   an <h3 class="panel-title">, so a bare `#order-standard_cart h3` (0-1-0-1)
   also caught the sidebar panel headings -- which sit on a navy fill. That
   painted navy text on navy and made every sidebar heading in the store and
   cart look empty. Section 17.1 of the theme sets them white, but at 0-0-3-1
   it could not outrank this. */
#order-standard_cart h1:not(.panel-title),
#order-standard_cart h2:not(.panel-title),
#order-standard_cart h3:not(.panel-title),
#order-standard_cart .font-size-36,
#order-standard_cart .font-size-30{
  font-family:var(--wh-head,'Lato',Arial,sans-serif);
  font-weight:700;
  color:var(--wh-navy,#1A3E7C);
  letter-spacing:-.2px;
}
#order-standard_cart .font-size-36{font-size:32px}
#order-standard_cart .font-size-30{font-size:26px}
/* `:not(.btn)` matters here. Written as a bare `#order-standard_cart a` this
   is 0-1-0-1, which outranks every `.btn-*{color:#fff}` rule in the theme, so
   it repainted anchor-buttons in link colours -- teal text on the coral
   checkout fill at rest, and dark coral on coral at hover. Buttons are not
   links for colour purposes. */
#order-standard_cart a:not(.btn){color:var(--wh-teal,#0B6B95)}
#order-standard_cart a:not(.btn):hover,
#order-standard_cart a:not(.btn):focus{color:var(--wh-coral-ink,#A8450F)}

/* ------------------------------------------------ 2. Domain search banner */
/* The single most visible mismatch. Stock paints this bright yellow with a
   vendor-prefixed gradient stack; the theme's navy hero is the counterpart on
   every other page. Every legacy prefixed background is reset or the old
   value keeps painting in browsers that still honour it. */
.domain-checker-container,
#order-standard_cart .domain-checker-container,
#order-standard_cart .domain-checker-bg{
  background:linear-gradient(135deg,var(--wh-navy,#1A3E7C) 0%,var(--wh-navy-deep,#042551) 100%);
  border-radius:var(--wh-radius-lg,14px);
  padding:var(--wh-sp-6,24px);
  margin:0 0 var(--wh-sp-6,24px);
  box-shadow:var(--wh-shadow,0 6px 24px rgba(26,62,124,.08));
}
.domain-checker-container .input-group-box,
#order-standard_cart .domain-checker-container .input-group-box{
  background:transparent;
  padding:0;
  border-radius:0;
}
.domain-checker-container h2,
.domain-checker-container h3,
.domain-checker-container label,
#order-standard_cart .domain-checker-container h2,
#order-standard_cart .domain-checker-container h3,
#order-standard_cart .domain-checker-container label{color:#fff}
.domain-checker-container .form-control,
#order-standard_cart .domain-checker-container .form-control{
  height:52px;
  border:none;
  border-radius:var(--wh-radius,8px);
  box-shadow:none;
  font-size:16px;
}
/* The `background` shorthand here was resetting background-image, so this
   button kept the old flat coral while every other primary button on the site
   moved to the two-layer treatment. Stated as separate longhands so the
   underlay and the inset survive. */
.domain-checker-container .input-group-box .input-group-btn .btn,
#order-standard_cart .domain-checker-container .btn,
#order-standard_cart #btnCheckAvailability{
  background-color:var(--wh-cta-face,#C25214);
  background-image:var(--wh-cta-underlay,none);
  box-shadow:var(--wh-cta-inset,none);
  color:#fff;
  border:none;
  border-radius:var(--wh-radius,8px);
  height:52px;
  font-weight:600;
}
.domain-checker-container .input-group-box .input-group-btn .btn:hover,
#order-standard_cart .domain-checker-container .btn:hover,
#order-standard_cart #btnCheckAvailability:hover{
  background-color:var(--wh-cta-face-hover,#A8450F);
  box-shadow:var(--wh-cta-inset-hover,none);
  color:#fff;
}

/* Availability wording. Stock uses #5cb85c / #d9534f, neither of which passes
   4.5:1 as text on white; the theme already keeps compliant siblings. */
.domain-checker-available,
#order-standard_cart .domain-checker-available{color:var(--wh-green,#1E7A34)}   /* 5.40:1 */
.domain-checker-unavailable,
.domain-checker-invalid,
#order-standard_cart .domain-checker-unavailable,
#order-standard_cart .domain-checker-invalid{color:var(--wh-danger,#C0392B)}    /* 5.44:1 */

/* Suggested-domain chips: three saturated fills carrying white text, all of
   them failing. Retoned onto the theme's status colours. */
.suggested-domains .promo.hot{background-color:var(--wh-danger,#C0392B)}
.suggested-domains .promo.sale{background-color:var(--wh-amber,#B85200);color:#fff}
.suggested-domains .promo.new{background-color:var(--wh-green,#1E7A34)}
.suggested-domains .promo.hot,
.suggested-domains .promo.sale,
.suggested-domains .promo.new{
  border-radius:var(--wh-pill,40px);
  padding:2px 10px;
  font-weight:600;
  letter-spacing:.4px;
}

/* -------------------------------------------------- 3. Product grid cards */
/* Stock lets each card size to its own content, so a three-across row ends at
   three different heights. The theme's section 20.10 flexed the row but could
   not reach inside the card, which is what actually makes the footers align. */
#order-standard_cart .products > .row,
#order-standard_cart .row-eq-height{
  display:flex;
  flex-wrap:wrap;
}
#order-standard_cart .products > .row > [class*="col-"],
#order-standard_cart .row-eq-height > [class*="col-"]{display:flex}
#order-standard_cart .product{
  display:flex;
  flex-direction:column;
  width:100%;
  border:none;
  border-radius:var(--wh-radius-lg,14px);
  box-shadow:var(--wh-shadow,0 6px 24px rgba(26,62,124,.08));
  overflow:hidden;
  margin-bottom:var(--wh-sp-6,24px);
}
#order-standard_cart .product .product-desc{
  flex:1 1 auto;                 /* pushes price + button to a common baseline */
  padding:var(--wh-sp-5,20px) var(--wh-sp-6,24px);
}
#order-standard_cart .product header{
  background:var(--wh-navy,#1A3E7C);
  color:#fff;
  font-family:var(--wh-head,'Lato',Arial,sans-serif);
  font-weight:700;
  border-radius:0;
  padding:16px 18px;
}
#order-standard_cart .product .price,
#order-standard_cart .product-pricing,
#order-standard_cart .price{
  color:var(--wh-coral-ink,#A8450F);
  font-family:var(--wh-head,'Lato',Arial,sans-serif);
  font-weight:900;
}
#order-standard_cart .product .cycle,
#order-standard_cart .cycle{color:var(--wh-muted,#5B6275);font-weight:500}

/* --------------------------------------------------- 4. Buttons + actions */
/* The checkout CTA ships as .btn-success, so the single most important button
   in the funnel was green while every other primary action in the client area
   is coral. Recoloured to match; the shape comes from the theme's .btn. */
#order-standard_cart .btn-checkout,
#order-standard_cart .btn-success.btn-checkout{
  background-color:var(--wh-cta-face,#C25214);
  background-image:var(--wh-cta-underlay,none);
  box-shadow:var(--wh-cta-inset,none);
  color:#fff;
  border:none;
  border-radius:var(--wh-pill,40px);
  padding:15px 40px;
  font-weight:700;
  font-size:16px;
}
#order-standard_cart .btn-checkout:hover,
#order-standard_cart .btn-checkout:focus{
  background-color:var(--wh-cta-face-hover,#A8450F);
  color:#fff;
  /* Inset first (the fill), lift second. One declaration, because a later
     box-shadow rule replaces rather than adds. */
  box-shadow:var(--wh-cta-inset-hover,none),0 8px 20px var(--wh-cta-shadow,rgba(199,60,50,.34));
}
/* The disabled state has to clear the inset as well as the fill, otherwise
   the coral inset shows straight through the grey. */
#order-standard_cart .btn-checkout.disabled,
#order-standard_cart .btn-checkout[disabled]{
  background-image:none;
  box-shadow:none;
  background:var(--wh-muted-soft,#9AA0B0);
  box-shadow:none;
  opacity:1;                     /* stock 0.65 on a pale fill is unreadable */
}
/* Addon "Add to cart" strip: stock #5cb85c is 3.0:1 under white text. */
#order-standard_cart .panel-addon .panel-add,
#order-standard_cart .panel-addon-selected .panel-add{
  background-color:var(--wh-green,#1E7A34);
  color:#fff;
  border-radius:0 0 var(--wh-radius,8px) var(--wh-radius,8px);
}
#order-standard_cart .btn-continue-shopping{color:var(--wh-teal,#0B6B95)}
#order-standard_cart .btn-remove-from-cart{color:var(--wh-danger,#C0392B)}

/* --------------------------------------------- 5. Summary + cart contents */
#order-standard_cart .summary-container,
#order-standard_cart .order-summary,
#order-standard_cart .bordered-totals{
  background:#fff;
  border:1px solid var(--wh-line,#DFE5F3);
  border-radius:var(--wh-radius-lg,14px);
  box-shadow:var(--wh-shadow,0 6px 24px rgba(26,62,124,.08));
}
#order-standard_cart .view-cart-items-header,
#order-standard_cart .cart-header{
  background:var(--wh-navy,#1A3E7C);
  color:#fff;
  border-radius:var(--wh-radius,8px) var(--wh-radius,8px) 0 0;
}
#order-standard_cart .total-due-today{
  color:var(--wh-navy,#1A3E7C);
  font-family:var(--wh-head,'Lato',Arial,sans-serif);
  font-weight:900;
}
#order-standard_cart .promo-box,
#order-standard_cart #promo-code{
  background:var(--wh-tint,#EDF1FC);
  border:none;
  border-radius:var(--wh-radius-lg,14px);
}

/* --------------------------------------------------------------- 6. Forms */
#order-standard_cart .form-control{
  border:1px solid var(--wh-line,#DFE5F3);
  border-radius:var(--wh-radius,8px);
  box-shadow:none;
}
#order-standard_cart .form-control:focus{
  border-color:var(--wh-teal,#0B6B95);
  box-shadow:0 0 0 3px rgba(11,107,149,.14);
}
/* Matches section 19.9 of the theme so focus looks the same on both sides of
   the checkout boundary. */
#order-standard_cart a:focus-visible,
#order-standard_cart .btn:focus-visible,
#order-standard_cart .form-control:focus-visible,
#order-standard_cart .list-group-item:focus-visible{
  outline:3px solid var(--wh-navy,#1A3E7C);
  outline-offset:2px;
  box-shadow:0 0 0 5px rgba(255,255,255,.9);
}

/* ------------------------------------------------------------- 7. Alerts */
#order-standard_cart .alert{
  border:none;
  border-left:4px solid transparent;
  border-radius:var(--wh-radius,8px);
}
#order-standard_cart .alert-success{border-left-color:var(--wh-green,#1E7A34)}
#order-standard_cart .alert-info{border-left-color:var(--wh-teal,#0B6B95)}
#order-standard_cart .alert-warning{border-left-color:var(--wh-amber,#B85200)}
#order-standard_cart .alert-danger{border-left-color:var(--wh-danger,#C0392B)}

/* --------------------------------------------- 7b. Domain promo boxes */
/* The two cards under the TLD table on the register/transfer pages. Stock
   leaves them square and unfilled, and ships their actions as `.btn-warning`
   and `.btn-primary` -- so one of them rendered navy while carrying the
   warning class. Treated as what they are: a secondary and a primary action
   on a pair of cards. */
#order-standard_cart .domain-promo-box{
  background:#fff;
  border:1px solid var(--wh-line,#DFE5F3);
  border-radius:var(--wh-radius-card,30px);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  padding:var(--wh-sp-6,24px);
}
#order-standard_cart .domain-promo-box .btn,
#order-standard_cart .domain-promo-box a.btn{
  border-radius:var(--wh-pill,40px);
  font-weight:600;
}
#order-standard_cart .domain-promo-box a.btn-primary,
#order-standard_cart .domain-promo-box a.btn-primary:hover,
#order-standard_cart .domain-promo-box a.btn-primary:focus{
  color:#fff;
}
/* Secondary: navy fill, white text. Overrides the `.btn-warning` class the
   template happens to use, which means neither amber nor teal text. */
#order-standard_cart .domain-promo-box a.btn-warning{
  background:var(--wh-navy,#1A3E7C);
  background-image:none;
  color:#fff;
}
#order-standard_cart .domain-promo-box a.btn-warning:hover,
#order-standard_cart .domain-promo-box a.btn-warning:focus{
  background:var(--wh-navy-dark,#152F5E);
  background-image:none;
  color:#fff;
  box-shadow:0 8px 20px rgba(26,62,124,.30);
}

/* ==========================================================================
   8. RTL
   The cart lays itself out with hardcoded floats -- .cart-sidebar{float:left},
   .cart-body{float:right} and the two secondary variants -- rather than
   Bootstrap columns. The theme's RTL block flips .pull-* and .col-*, so it
   never touched these, and the Arabic cart came out mirrored the wrong way:
   sidebar still on the left, body still on the right, inside a page whose
   reading order had reversed.
   ========================================================================== */
html[dir="rtl"] #order-standard_cart .cart-sidebar{float:right}
html[dir="rtl"] #order-standard_cart .cart-body{float:left}
html[dir="rtl"] #order-standard_cart .secondary-cart-body{float:right}
html[dir="rtl"] #order-standard_cart .secondary-cart-sidebar{float:left}
html[dir="rtl"] #order-standard_cart .pull-left,
html[dir="rtl"] #order-standard_cart .float-left{float:right!important}
html[dir="rtl"] #order-standard_cart .pull-right,
html[dir="rtl"] #order-standard_cart .float-right{float:left!important}
html[dir="rtl"] #order-standard_cart .text-right{text-align:left}
html[dir="rtl"] #order-standard_cart .text-left{text-align:right}
html[dir="rtl"] #order-standard_cart .cart-sidebar .list-group-item{text-align:right}
html[dir="rtl"] #order-standard_cart .alert{
  border-left:none;
  border-right:4px solid transparent;
}
html[dir="rtl"] #order-standard_cart .alert-success{border-right-color:var(--wh-green,#1E7A34)}
html[dir="rtl"] #order-standard_cart .alert-info{border-right-color:var(--wh-teal,#0B6B95)}
html[dir="rtl"] #order-standard_cart .alert-warning{border-right-color:var(--wh-amber,#B85200)}
html[dir="rtl"] #order-standard_cart .alert-danger{border-right-color:var(--wh-danger,#C0392B)}
/* .panel-add rounds its two bottom corners; the pair is symmetrical so the
   radius holds, but the addon panel's own float needs the flip. */
html[dir="rtl"] #order-standard_cart .mc-promo .expander{float:right}

/* ==================================================== 9. Small screens === */
/* Stock hides .cart-sidebar below 991px and exposes the two <select> menus in
   .sidebar-collapsed instead. Those inherit the cart's own float pair, so they
   sat side by side and clipped on narrow phones. */
@media (max-width:767px){
  #order-standard_cart .sidebar-collapsed .pull-left,
  #order-standard_cart .sidebar-collapsed .pull-right,
  #order-standard_cart .sidebar-collapsed .float-left,
  #order-standard_cart .sidebar-collapsed .float-right{
    float:none!important;
    width:100%;
    margin-bottom:var(--wh-sp-3,12px);
  }
  #order-standard_cart .sidebar-collapsed .form-control{width:100%}
  #order-standard_cart .cart-body,
  #order-standard_cart .secondary-cart-body,
  #order-standard_cart .secondary-cart-sidebar{
    float:none;
    width:100%;
  }
  #order-standard_cart .font-size-36{font-size:25px}
  #order-standard_cart .btn-checkout{width:100%;padding:15px 20px}
  .domain-checker-container,
  #order-standard_cart .domain-checker-container{padding:var(--wh-sp-5,20px)}
}

/* ================================================= 10. Reduced motion === */
@media (prefers-reduced-motion:reduce){
  #order-standard_cart .product:hover,
  #order-standard_cart .btn:hover,
  #order-standard_cart .btn:focus{transform:none!important}
  #order-standard_cart *{transition-duration:.01ms!important}
}

/* ==========================================================================
   NOT CHANGED, ON PURPOSE
   .mc-promo.spamexperts / .sitelock / .marketgoo keep their vendor colours
   (#56a2da, #f29f44, #3090e0). Those are third-party product identities on
   MarketConnect upsell panels, and recolouring them to FinjanHost navy would
   misrepresent whose product is being sold. Only the generic #99bc3a expander
   below is retoned, since it belongs to no vendor.
   ========================================================================== */
#order-standard_cart .mc-promo .body i{color:var(--wh-green,#1E7A34)}

/* ==========================================================================
   11. Product cards -- layout
   These live in THIS file, not the theme's, on purpose. The order form's
   all.min.css loads after the theme stylesheet, and its product rules match
   these at identical specificity (0-1-3-1), so an equal-weight rule in the
   theme file loses on source order every time. Here it loads last and wins
   without needing !important.
   ========================================================================== */
/* 29.1  Product cards: dead space beside the specs, price and button hugging
   the left edge.
   Stock lays the card out as two columns:
       div.product-desc { float:left;  width:60% }
       footer           { float:right; width:40% }
   Round 1's order form sheet set `.product { display:flex; flex-direction:
   column }` to equalise card heights. Flex items do not float, so the two
   blocks stopped sitting side by side -- but kept their 60% and 40% widths.
   Measured on a 465px card: the description rendered 278px wide and the
   footer 185px, both left-aligned, leaving a 187px empty strip down the right
   of every card and the price and button stranded under the text.

   The stacked arrangement is the right one for a card this narrow; the widths
   just have to follow. `margin-top:auto` on the footer pins price and button
   to the bottom of the card, so across a row of equal-height cards they line
   up on one baseline no matter how much the spec lists differ. */
body #order-standard_cart .products .product > div.product-desc,
body #order-standard_cart .product > div.product-desc,
body #products .product > div.product-desc{
  float:none;
  width:100%;
  padding:var(--wh-sp-5) var(--wh-sp-6);
  font-size:14px;
}
body #order-standard_cart .products .product > footer,
body #order-standard_cart .product > footer,
body #products .product > footer{
  float:none;
  width:100%;
  margin:auto 0 0;                 /* pins the block to the card's bottom */
  padding:var(--wh-sp-5) var(--wh-sp-6) var(--wh-sp-6);
  text-align:center;
  border-top:1px solid var(--wh-line);
  font-size:14px;
}
/* The spec list is the card's substance, so it gets the readable size rather
   than stock's 0.8em, and its own rhythm. */
body #order-standard_cart .product .product-desc ul{
  padding-left:18px;
  margin:0;
}
html[dir="rtl"] #order-standard_cart .product .product-desc ul{
  padding-left:0;
  padding-right:18px;
}
body #order-standard_cart .product .product-desc li{margin-bottom:var(--wh-sp-2)}
/* Price block: one clear hierarchy -- amount, then term, then any setup fee. */
body #order-standard_cart .product footer .product-pricing,
body #order-standard_cart .product footer .price{
  margin-bottom:var(--wh-sp-2);
}
body #order-standard_cart .product footer .price{
  font-family:var(--wh-head);
  font-weight:900;
  font-size:26px;
  color:var(--wh-coral-ink);
  display:block;
}
body #order-standard_cart .product footer .cycle{
  color:var(--wh-muted);
  font-weight:600;
  display:block;
  margin-bottom:var(--wh-sp-2);
}
body #order-standard_cart .product footer .btn{
  margin-top:var(--wh-sp-3);
  min-width:170px;
}
/* Header: stock paints it #f8f8f8 with #333 text, which is the one part of
   the card still wearing the default palette. */
body #order-standard_cart .products .product header,
body #order-standard_cart .product > header{
  background:var(--wh-navy);
  margin:0;
  padding:var(--wh-sp-4) var(--wh-sp-6);
  border-radius:0;
}
body #order-standard_cart .products .product header span,
body #order-standard_cart .product > header span{
  color:#fff;
  font-family:var(--wh-head);
  font-weight:700;
  font-size:18px;
}
body #order-standard_cart .products .product header .qty,
body #order-standard_cart .product > header .qty{color:rgba(255,255,255,.75)}



/* ==========================================================================
   12. Order summary — itemised, so the discount has a visible subject
   The first pass here fixed the sign and the labels but left the box opening
   at "Subtotal", which meant a percentage off still floated under a single
   aggregate number. Listing the items first is what actually answers "off
   what". Nothing below changes a figure.
   ========================================================================== */

#order-standard_cart .fh-summary-items{
  margin:0 0 var(--wh-sp-4,12px);
  padding:0 0 var(--wh-sp-3,10px);
  border-bottom:1px solid var(--wh-line,#DFE5F3);
}
/* Name and price on one line, the detail beneath in muted type -- so a
   scanning eye gets "what and how much" first and the specifics second. */
#order-standard_cart .fh-sum-item{
  display:grid;
  grid-template-columns:1fr auto;
  column-gap:var(--wh-sp-3,10px);
  padding:var(--wh-sp-2,6px) 0;
}
#order-standard_cart .fh-sum-item + .fh-sum-item{
  border-top:1px solid var(--wh-line,#DFE5F3);
}
#order-standard_cart .fh-sum-name{font-weight:600;color:var(--wh-slate,#2E354E);min-width:0}
#order-standard_cart .fh-sum-price{font-weight:600;white-space:nowrap;text-align:end}
#order-standard_cart .fh-sum-meta{
  grid-column:1 / -1;
  margin-top:1px;
  font-size:12px;
  line-height:1.45;
  color:var(--wh-muted,#5B6275);
  word-break:break-word;
}

#order-standard_cart .order-summary .subtotal{padding:0 0 var(--wh-sp-3,10px);margin:0}
#order-standard_cart .order-summary .bordered-totals{margin:0;padding:var(--wh-sp-3,10px) 0}

/* Flex rather than floats: a long promotion description wraps to a second
   line without the amount following it down. */
#order-standard_cart .fh-discount-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--wh-sp-3,10px);
  font-weight:600;
  color:var(--wh-coral-ink,#A8450F);
}
#order-standard_cart .fh-discount-label{min-width:0}
#order-standard_cart .fh-discount-amt{white-space:nowrap;flex:0 0 auto}

/* The code, on its own line under the amount -- it did not fit beside the
   label on a 260px sidebar, and pushing the amount onto a second line to make
   room was worse than giving it a line of its own. */
#order-standard_cart .fh-promo-tag{
  display:inline-block;
  margin-top:var(--wh-sp-2,6px);
  padding:1px 8px;
  border-radius:20px;
  background:var(--wh-accent-wash,#FFF3EC);
  border:1px solid var(--wh-coral-ink,#A8450F);
  color:var(--wh-coral-ink,#A8450F);
  font-size:11px;
  font-weight:700;
  letter-spacing:.4px;
}
#order-standard_cart .fh-discount-note{
  margin:var(--wh-sp-3,10px) 0 0;
  font-size:12px;
  line-height:1.55;
  color:var(--wh-muted,#5B6275);
}

/* The amount due is the answer to the page, so it sits on its own with the
   saving restated beneath it in the customer's favour. */
#order-standard_cart .order-summary .total-due-today-padded{
  margin:var(--wh-sp-5,16px) 0;
  padding-top:var(--wh-sp-4,12px);
  border-top:1px solid var(--wh-line,#DFE5F3);
}
#order-standard_cart .fh-saving{
  display:block;
  margin-top:var(--wh-sp-2,6px);
  font-size:12px;
  font-weight:600;
  line-height:1.5;
  color:var(--wh-coral-ink,#A8450F);
}

/* Renewal: a different kind of number, so it is set off as its own block
   AFTER the amount due rather than above it. */
#order-standard_cart .fh-renewal-block{
  margin:0;
  padding:var(--wh-sp-4,12px) var(--wh-sp-4,12px) var(--wh-sp-3,10px);
  border:1px solid var(--wh-line,#DFE5F3);
  border-radius:var(--wh-radius,8px);
  background:#fff;
}
#order-standard_cart .fh-renewal-head{
  display:block;
  margin-bottom:var(--wh-sp-2,6px);
  font-size:11px;
  font-weight:700;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:var(--wh-muted,#5B6275);
}
#order-standard_cart .fh-renewal-row{margin:0;padding:0}
#order-standard_cart .fh-renewal-label{font-weight:600;color:var(--wh-slate,#2E354E)}
#order-standard_cart .order-summary .recurring-charges{line-height:1.6;font-style:normal}
#order-standard_cart .fh-renewal-note{
  margin:var(--wh-sp-2,6px) 0 0;
  font-size:12px;
  line-height:1.5;
  color:var(--wh-muted,#5B6275);
}

/* The applied-promotion box: stock printed "CODE - description" on one line.
   Now a stack, so the eye lands on "applied", then the amount. */
#order-standard_cart .view-cart-promotion-code{
  padding:var(--wh-sp-4,12px) var(--wh-sp-5,16px);
  border-style:solid;
  border-color:var(--wh-line,#DFE5F3);
  border-radius:var(--wh-radius,8px);
  background:var(--wh-accent-wash,#FFF3EC);
  line-height:1.6;
}
#order-standard_cart .fh-promo-applied{display:block;font-weight:700;color:var(--wh-green,#1E7A34)}
#order-standard_cart .fh-promo-code{
  display:inline-block;
  margin:var(--wh-sp-2,6px) 6px 0 0;
  padding:1px 8px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--wh-coral-ink,#A8450F);
  font-weight:700;
  font-size:12px;
  letter-spacing:.4px;
}
html[dir="rtl"] #order-standard_cart .fh-promo-code{margin:var(--wh-sp-2,6px) 0 0 6px}
#order-standard_cart .fh-promo-desc{color:var(--wh-slate,#2E354E)}
#order-standard_cart .fh-promo-amount{
  display:block;
  margin-top:var(--wh-sp-2,6px);
  font-weight:700;
  color:var(--wh-coral-ink,#A8450F);
}
#order-standard_cart .fh-checkout-breakdown{
  display:block;
  margin-top:var(--wh-sp-2,6px);
  font-size:13px;
  font-weight:400;
  opacity:.85;
}

/* ==========================================================================
   13. Checkout form — the collapsed field gaps
   The theme has `body .form-group:last-child{margin-bottom:0}`, written for a
   form whose final field should not add trailing space. On this page every
   field sits alone inside its own `.col-sm-6`, so EVERY field is a last child
   and every vertical gap collapsed to zero. Restoring the gap only where a
   form-group is a grid column's only child leaves the original intent intact.
   ========================================================================== */
#order-standard_cart [class*="col-"] > .form-group:last-child,
#order-standard_cart [class*="col-"] > .form-group.prepend-icon:last-child{
  margin-bottom:var(--wh-sp-5,16px);
}
#order-standard_cart .field-container > .row:last-child [class*="col-"] > .form-group:last-child{
  margin-bottom:var(--wh-sp-4,12px);
}
/* Section headings on that page were the same distance from the field above
   them as the fields were from each other, so the form read as one long run
   rather than three groups. */
#order-standard_cart .sub-heading,
#order-standard_cart .sub-heading-borderless{
  margin-top:var(--wh-sp-6,24px);
  margin-bottom:var(--wh-sp-6,24px);
}

/* ==========================================================================
   14. Product cards — the price block
   Stock separated amount, term and setup fee with bare <br> tags, so their
   spacing was whatever line-height happened to be: a large gap under the
   amount, another under the term, and the button floating away below. The
   template now gives each part an element; this gives the stack its rhythm.
   ========================================================================== */
#order-standard_cart .product footer .product-pricing{
  margin:0 0 var(--wh-sp-4,12px);
  line-height:1.25;
}
#order-standard_cart .product footer .fh-from{
  display:block;
  margin-bottom:2px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--wh-muted,#5B6275);
}
#order-standard_cart .product footer .price{
  display:block;
  margin:0;
  font-family:var(--wh-head);
  font-weight:900;
  font-size:30px;
  line-height:1.1;
  color:var(--wh-coral-ink,#A8450F);
}
/* The term belongs to the amount, so it sits tight under it -- one object,
   not two. The setup fee is a separate fact and keeps its own distance. */
#order-standard_cart .product footer .cycle{
  display:block;
  margin:2px 0 0;
  font-size:13px;
  font-weight:600;
  color:var(--wh-muted,#5B6275);
}
#order-standard_cart .product footer .fh-setup{
  display:block;
  margin-top:var(--wh-sp-2,6px);
  font-size:12px;
  color:var(--wh-muted,#5B6275);
}
#order-standard_cart .product footer .btn{
  margin-top:0;
  min-width:170px;
}

/* ==========================================================================
   15. RTL — field icons and the phone widget
   Every value below was measured in a headless browser against these exact
   stylesheets, not reasoned about. The two faults were:
     - the icon sat 10px inside the text, and
     - the country dropdown opened on the wrong side.
   ========================================================================== */

/* 15.1  The leading icons.
   Two separate causes, both invisible in English.
   (a) Stock reserves room for the icon with `padding-left:36px` on the input,
       so in Arabic the gap opened on the wrong side and the placeholder ran
       underneath the icon.
   (b) Stock also sets `#order-standard_cart label{margin-right:10px}`. On an
       icon pinned to the left that margin is on the far side and does nothing.
       Pinned to the right it pushes the icon 10px into the field -- measured:
       the label's right edge landed at 923px inside a group ending at 933px.
   Both are mirrored here. */
html[dir="rtl"] #order-standard_cart .prepend-icon .field:not([type="tel"]),
html[dir="rtl"] #order-standard_cart .prepend-icon .form-control:not([type="tel"]){
  padding-left:12px;
  padding-right:36px;
}
html[dir="rtl"] #order-standard_cart .prepend-icon .field-icon{
  right:0;
  left:auto;
  margin-right:0;
  margin-left:10px;
}

/* 15.2  The phone widget.
   WHMCS ships the older intl-tel-input, which builds
   `.intl-tel-input.allow-dropdown.separate-dial-code.iti-sdc-N` and pins the
   flag with `left:0`, reserving room with `padding-left` on the input. The
   width varies with the length of the dial code, which is what iti-sdc-N
   encodes -- so each variant needs its own mirrored padding. Values below are
   the stock left paddings, applied on the right.
   The country list is pinned `right:0` so it opens inside the field rather
   than off the side of the viewport, which is what gave the Arabic page a
   horizontal scrollbar. */
html[dir="rtl"] .intl-tel-input.allow-dropdown .flag-container,
html[dir="rtl"] .intl-tel-input.separate-dial-code .flag-container,
html[dir="rtl"] .intl-tel-input .flag-container{
  left:auto;
  right:0;
}
html[dir="rtl"] .intl-tel-input.allow-dropdown input[type=tel],
html[dir="rtl"] .intl-tel-input.separate-dial-code input[type=tel],
html[dir="rtl"] #order-standard_cart .intl-tel-input.allow-dropdown input[type=tel],
html[dir="rtl"] #order-standard_cart .intl-tel-input.separate-dial-code input[type=tel]{
  padding-left:6px;
  padding-right:52px;
}
html[dir="rtl"] .intl-tel-input.separate-dial-code.iti-sdc-2 input[type=tel],
html[dir="rtl"] #order-standard_cart .intl-tel-input.separate-dial-code.iti-sdc-2 input[type=tel]{padding-right:66px;padding-left:6px}
html[dir="rtl"] .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type=tel],
html[dir="rtl"] #order-standard_cart .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type=tel]{padding-right:76px;padding-left:6px}
html[dir="rtl"] .intl-tel-input.separate-dial-code.iti-sdc-3 input[type=tel],
html[dir="rtl"] #order-standard_cart .intl-tel-input.separate-dial-code.iti-sdc-3 input[type=tel]{padding-right:74px;padding-left:6px}
html[dir="rtl"] .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=tel],
html[dir="rtl"] #order-standard_cart .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=tel]{padding-right:84px;padding-left:6px}
html[dir="rtl"] .intl-tel-input.separate-dial-code.iti-sdc-4 input[type=tel],
html[dir="rtl"] #order-standard_cart .intl-tel-input.separate-dial-code.iti-sdc-4 input[type=tel]{padding-right:82px;padding-left:6px}
html[dir="rtl"] .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=tel],
html[dir="rtl"] #order-standard_cart .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=tel]{padding-right:92px;padding-left:6px}
html[dir="rtl"] .intl-tel-input.separate-dial-code.iti-sdc-5 input[type=tel],
html[dir="rtl"] #order-standard_cart .intl-tel-input.separate-dial-code.iti-sdc-5 input[type=tel]{padding-right:90px;padding-left:6px}
html[dir="rtl"] .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input[type=tel],
html[dir="rtl"] #order-standard_cart .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input[type=tel]{padding-right:100px;padding-left:6px}

/* Inside the flag button: the arrow moves to the far edge, and the dial code's
   reserved space for the flag image moves with it. */
html[dir="rtl"] .intl-tel-input .selected-flag{padding:0 8px 0 0}
html[dir="rtl"] .intl-tel-input .selected-flag .iti-arrow{right:auto;left:6px}
html[dir="rtl"] .intl-tel-input.separate-dial-code .selected-dial-code{
  padding-left:0;
  padding-right:28px;
  /* "+90" is a dial code, not a sentence: under RTL bidi the plus sign jumps
     to the end and it renders "90+". Measured in the browser -- forcing the
     element to LTR keeps the sign where it belongs. */
  direction:ltr;
}
html[dir="rtl"] .intl-tel-input .selected-flag .iti-flag{right:8px;left:auto}

/* The list keeps its own left-to-right reading -- a flag, a country name and
   a dial code are not mirrored content -- but the box is anchored to the right
   edge of the field and cannot widen the page. */
html[dir="rtl"] .intl-tel-input .country-list{
  left:auto;
  right:0;
  margin:0 -1px 0 0;
  text-align:left;
  max-width:min(320px,88vw);
}

/* The template's own phone icon would land on the flag button. Hidden for the
   two tel fields, matched by name as well as by :has(), which older browsers
   drop silently. */
html[dir="rtl"] #order-standard_cart .prepend-icon:has(input[type="tel"]) .field-icon{display:none}

/* Digits and a dial code read left-to-right in Arabic as in English, but the
   field itself stays right-aligned so it matches the fields around it. */
html[dir="rtl"] #order-standard_cart input[type="tel"].field{
  direction:ltr;
  text-align:right;
}

/* 15.3  The same fault in ENGLISH, found while measuring the Arabic one.
   Stock's `#order-standard_cart .prepend-icon .field{padding-left:36px}`
   carries an ID, so it outranks intl-tel-input's own
   `.separate-dial-code.allow-dropdown.iti-sdc-2 input{padding-left:76px}`.
   Measured: the flag button is 72px wide but only 36px was reserved, so a
   typed number slid underneath it -- and the template's phone icon rendered at
   exactly the same x as the flag container, one on top of the other.
   Restoring the library's own widths at ID weight fixes both, in both
   directions. */
#order-standard_cart .intl-tel-input.allow-dropdown input[type=tel],
#order-standard_cart .intl-tel-input.separate-dial-code input[type=tel]{
  padding-left:52px;
  padding-right:6px;
}
#order-standard_cart .intl-tel-input.separate-dial-code.iti-sdc-2 input[type=tel]{padding-left:66px}
#order-standard_cart .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type=tel]{padding-left:76px}
#order-standard_cart .intl-tel-input.separate-dial-code.iti-sdc-3 input[type=tel]{padding-left:74px}
#order-standard_cart .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=tel]{padding-left:84px}
#order-standard_cart .intl-tel-input.separate-dial-code.iti-sdc-4 input[type=tel]{padding-left:82px}
#order-standard_cart .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=tel]{padding-left:92px}
#order-standard_cart .intl-tel-input.separate-dial-code.iti-sdc-5 input[type=tel]{padding-left:90px}
#order-standard_cart .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input[type=tel]{padding-left:100px}
/* The flag button already identifies the field, so the duplicate icon goes in
   both directions rather than only in Arabic. */
#order-standard_cart label[for="inputPhone"].field-icon,
#order-standard_cart label[for="inputDCPhone"].field-icon{display:none}