/* ==========================================================================
   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,#C63A18)}

/* ------------------------------------------------ 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,#FE575B);
  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,#FF643F);
  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,#C63A18);
  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,#FE575B);
  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,#FF643F);
  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)}