/* =====================================================================
   Inovate Digital - order form styles (inovate_cart)

   common.tpl loads this file LAST on every order form page: after the
   order form's own all.min.css and after the theme's custom.css. So a
   rule here beats an equally specific rule anywhere else, and there is
   no need for the two-id trick that section 21 of the theme stylesheet
   has to use. The selectors below still carry #order-standard_cart
   #products, but only to match section 21 rule for rule where it has to
   be switched off.

   Theme-wide styling (brand tokens, header, footer, homepage, client
   area, and the shared card look for this page) stays in
       templates/inovate-digital/css/custom.css
   Only what is specific to the rebuilt order form belongs here.
   ===================================================================== */

/* ---- full width: this template ships no sidebar at all ---- */
#order-standard_cart .id-cart-body-full {
    float: none;
    width: 100%;
}

/* ---- turn off section 21's stand-ins ----
   The stock template had no tick icon and no ribbon, so section 21 drew
   both with ::before. This template has real elements for each, so the
   pseudo-elements have to go or everything doubles up. */
#order-standard_cart #products .product div.product-desc ul li::before { content: none; }
#order-standard_cart #products #product17::before { content: none; }

/* ---- the real tick, same look as the homepage cards ---- */
#order-standard_cart #products .product div.product-desc ul li > i {
    flex: 0 0 auto;
    margin-top: 4px;
    font-size: .8rem;
    line-height: 1;
    color: var(--id-primary);
}

/* ---- the popular card ---- */
#order-standard_cart #products .product.id-plan-pop {
    border-color: var(--id-primary);
    box-shadow: var(--id-shadow-blue);
}
#order-standard_cart #products .product.id-plan-pop:hover {
    box-shadow: var(--id-shadow-blue), var(--id-shadow-lg);
}

/* ---- Annually / Monthly switch ----
   .id-cycle and .id-cycle-btn are already styled in the theme stylesheet
   for the homepage; only the spacing differs here. The show/hide rules
   there key off .id-plans, so the ones for #products are written here. */
#order-standard_cart .id-cycle { margin-bottom: 30px; }

#order-standard_cart #products .id-price-m,
#order-standard_cart #products .id-price-a,
#order-standard_cart #products .id-billed-m,
#order-standard_cart #products .id-billed-a { display: none; }

#order-standard_cart #products[data-cycle="annually"] .id-price-a,
#order-standard_cart #products[data-cycle="annually"] .id-billed-a { display: inline; }

#order-standard_cart #products[data-cycle="monthly"] .id-price-m,
#order-standard_cart #products[data-cycle="monthly"] .id-billed-m { display: inline; }

/* JavaScript off, or the attribute missing: fall back to annually */
#order-standard_cart #products:not([data-cycle]) .id-price-a,
#order-standard_cart #products:not([data-cycle]) .id-billed-a { display: inline; }

/* ---- price line ---- */
#order-standard_cart #products .product div.product-pricing .cyc {
    font-size: .88rem;
    font-weight: 500;
    color: var(--id-muted);
    letter-spacing: 0;
}
#order-standard_cart #products .product div.product-pricing .id-from {
    display: block;
    margin-bottom: 2px;
    font-size: .8rem;
    color: var(--id-muted);
}
#order-standard_cart #products .product .id-setup-fee {
    margin: -12px 0 14px;
    font-size: .78rem;
    color: var(--id-muted);
}

/* =====================================================================
   Help band, below the package cards.
   Same dark gradient and orb as the homepage .id-cta band, so the two
   pages read as one site.

   Tile colours: every one clears 4.5:1 against white, measured, so the
   labels stay readable. The brand blue itself is 4.31:1 and just misses,
   so the tile uses --id-primary-dark instead - the same choice the theme
   already makes for text links.
     WhatsApp  #16874A  4.57:1
     Ticket    #1557D8  6.20:1   (--id-primary-dark)
     Call      #0B6E94  5.72:1   (a deeper take on the logo cyan)
     Email     #C22750  5.68:1
   ===================================================================== */
#order-standard_cart .id-help {
    position: relative;
    overflow: hidden;
    margin: 56px 0 8px;
    padding: 54px 40px;
    border-radius: 20px;
    background: radial-gradient(120% 140% at 50% 0%, #143375 0%, #000000 65%);
    color: #fff;
    text-align: center;
}
#order-standard_cart .id-help-inner { position: relative; z-index: 2; }

#order-standard_cart .id-help h2 {
    margin: 0 0 10px;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #fff;
}
#order-standard_cart .id-help p {
    max-width: 620px;
    margin: 0 auto 32px;
    font-size: 1rem;
    line-height: 1.7;
    color: #fff;
}

#order-standard_cart .id-help-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    max-width: 760px;
    margin: 0 auto;
}

#order-standard_cart .id-help-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 26px 12px 20px;
    border-radius: var(--id-radius);
    color: #fff;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
#order-standard_cart .id-help-tile:hover,
#order-standard_cart .id-help-tile:focus {
    color: #fff;
    text-decoration: none;
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
    filter: brightness(1.08);
}
#order-standard_cart .id-help-tile:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
#order-standard_cart .id-help-tile i {
    font-size: 1.9rem;
    line-height: 1;
}
#order-standard_cart .id-help-tile span {
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: .01em;
}

#order-standard_cart .id-help-wa     { background: #16874A; }
#order-standard_cart .id-help-ticket { background: #1557D8; }
#order-standard_cart .id-help-call   { background: #0B6E94; }
#order-standard_cart .id-help-mail   { background: #C22750; }

@media (max-width: 767px) {
    #order-standard_cart .id-help { margin-top: 40px; padding: 40px 20px; border-radius: 16px; }
    #order-standard_cart .id-help h2 { font-size: 1.45rem; }
    #order-standard_cart .id-help p { font-size: .94rem; margin-bottom: 26px; }
    #order-standard_cart .id-help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    #order-standard_cart .id-help-tile { padding: 20px 8px 16px; gap: 9px; }
    #order-standard_cart .id-help-tile i { font-size: 1.6rem; }
    #order-standard_cart .id-help-tile span { font-size: .85rem; }
}

/* =====================================================================
   DOMAIN PAGES  (cart.php?a=add&domain=register / transfer)
   Rendered by domainregister.tpl / domaintransfer.tpl.

   CSS only - no markup touched. What we are overriding, and why the
   selectors look the way they do:

     .domain-checker-container   ships with background #ffce44 (yellow)
     .domain-checker-bg          80px padding + a background image
     .suggested-domains .card-header   2px solid #62cb31 (green)
     .suggested-domains .btn:not(...)  background #555 (grey)
     .domain-pricing .tld-pricing-header ...  6px solid #97b5d2 + #efefef
     .domain-promo-box           grey box, and its button is btn-warning

   Those live in the order form's own all.min.css as class-only rules,
   some three classes deep. This file loads after it, so prefixing with
   #order-standard_cart (one id) outranks all of them whatever they
   stack. Keep the prefix.

   The page has TWO states: before a search (search box + the full TLD
   price table) and after (results + suggestions, price table hidden by
   JS). Both are styled below - check both when you change anything.
   ===================================================================== */

/* ---- layout: no sidebar on the domain pages either ---- */
#order-standard_cart:has(.domain-checker-container) .cart-sidebar { display: none; }
#order-standard_cart:has(.domain-checker-container) .cart-body {
    float: none;
    width: 100%;
}

/* ---- page heading ----
   The intro line is a bare <p>, a direct child of .cart-body and OUTSIDE
   .header-lined, so it needs centring of its own. .sidebar-collapsed is
   the mobile category picker; with the sidebar gone it has nothing left
   to offer, so it goes too. */
#order-standard_cart:has(.domain-checker-container) .cart-body { padding-top: 18px; }
#order-standard_cart:has(.domain-checker-container) .sidebar-collapsed { display: none; }
#order-standard_cart:has(.domain-checker-container) .header-lined {
    text-align: center;
    border: 0;
    margin-bottom: 10px;
    padding-bottom: 0;
}
#order-standard_cart:has(.domain-checker-container) .cart-body > p {
    max-width: 560px;
    margin: 0 auto 30px;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--id-muted);
    text-align: center;
}
#order-standard_cart:has(.domain-checker-container) .header-lined h1 {
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--id-ink);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0;
}

/* ---- the search band ----
   Same dark gradient as the homepage hero, so the two searches feel
   like one product instead of two different sites. */
#order-standard_cart .domain-checker-container {
    position: relative;
    overflow: hidden;
    margin: 0 0 34px;
    padding: 0;
    border-radius: 20px;
    background: radial-gradient(120% 140% at 50% 0%, #143375 0%, #000000 65%);
    box-shadow: none;
}
#order-standard_cart .domain-checker-bg {
    margin: 0;
    padding: 52px 24px;
    background: none;
}
/* The box is built to the same recipe as the homepage hero search
   (theme custom.css, section 07): no white padding around the controls,
   a 16px corner on the box itself, and the button flush against the
   right edge at full height with square corners. One search field, two
   places, same object.

   Two stock rules have to be beaten here, and both are the reason the
   label looked cramped before:

     all.min.css  .domain-check-availability { width: 100px; height: 46px }
       A hard 100px box. With "padding: 0 30px" that left 40px for a
       word that needs about 68px, so "Search" was being squeezed
       against its own padding. "width: auto" + a min-width fixes it.

     theme.min.css  .input-group-lg > .input-group-append > .btn
       { font-size: 1.25rem }  -> 18.75px, noticeably bigger than the
       homepage button. Set explicitly below.

   Everything here is prefixed with #order-standard_cart, so (1,3,0)
   against their (0,1,0) and (0,2,0) - no !important needed except on
   border-radius, where Bootstrap's own input-group corner rules are
   themselves !important. */
#order-standard_cart .domain-checker-container .input-group-box {
    max-width: 680px;
    margin: 0 auto;
    padding: 0;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    flex-wrap: nowrap;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}
#order-standard_cart .domain-checker-container .input-group-box .form-control {
    flex: 1 1 auto;
    min-width: 0;
    height: 66px;
    padding: 0 26px;
    border: 0;
    background: transparent;
    font-size: 1.05rem;
    color: var(--id-ink);
    box-shadow: none;
    border-radius: 0 !important;
}
#order-standard_cart .domain-checker-container .input-group-box .form-control:focus {
    outline: none;
    box-shadow: none;
}
#order-standard_cart .domain-checker-container .input-group-box .form-control::placeholder {
    color: #000;
    opacity: 1;
}
#order-standard_cart .domain-checker-container .input-group-box .input-group-btn,
#order-standard_cart .domain-checker-container .input-group-box .input-group-append {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    margin: 0;
}
#order-standard_cart .domain-checker-container .input-group-box .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 130px;
    height: 66px;
    margin: 0;
    padding: 0 40px;
    border-radius: 0 !important;
    background: var(--id-primary);
    border: 1px solid var(--id-primary);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
#order-standard_cart .domain-checker-container .input-group-box .btn:hover {
    background: var(--id-primary-dark);
    border-color: var(--id-primary-dark);
}

/* ---- search result headline ---- */
#order-standard_cart .domain-checker-result-headline {
    margin: 8px 0 22px;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--id-ink);
    text-align: center;
    word-wrap: break-word;
}
#order-standard_cart .domain-checker-available   { color: #16874A; }
#order-standard_cart .domain-checker-invalid,
#order-standard_cart .domain-checker-unavailable { color: #C22750; }
#order-standard_cart .primary-domain-header {
    margin-bottom: 4px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--id-primary-dark);
    text-align: center;
}
#order-standard_cart .domain-price {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--id-ink);
}
#order-standard_cart .btn-add-to-cart,
#order-standard_cart .btn-add-to-cart:focus {
    background: var(--id-primary);
    border: 1px solid var(--id-primary);
    color: #fff;
    font-weight: 600;
    border-radius: var(--id-radius-sm);
}
#order-standard_cart .btn-add-to-cart:hover {
    background: var(--id-primary-dark);
    border-color: var(--id-primary-dark);
    color: #fff;
}

/* ---- suggested domains ---- */
#order-standard_cart .suggested-domains {
    margin-top: 8px;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
    overflow: hidden;
    background: #fff;
}
#order-standard_cart .suggested-domains .card-header,
#order-standard_cart .suggested-domains .panel-heading {
    padding: 16px 22px;
    background: #fff;
    border-bottom: 1px solid var(--id-line);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--id-muted);
}
#order-standard_cart .suggested-domains .list-group-item {
    padding: 14px 22px;
    border: 0;
    border-bottom: 1px solid var(--id-line);
    font-size: .95rem;
    color: var(--id-body);
}
#order-standard_cart .suggested-domains .list-group-item:last-child { border-bottom: 0; }
#order-standard_cart .suggested-domains .domain    { color: var(--id-ink); }
#order-standard_cart .suggested-domains .extension { font-weight: 700; color: var(--id-primary-dark); }
#order-standard_cart .suggested-domains .price {
    padding: 0 18px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--id-ink);
}
#order-standard_cart .suggested-domains .btn:not(.domain-contact-support) {
    padding: 7px 16px;
    font-size: .82rem;
    line-height: 1.4;
    border-radius: var(--id-radius-sm);
    background: var(--id-primary);
    border: 1px solid var(--id-primary);
    color: #fff;
    font-weight: 600;
}
#order-standard_cart .suggested-domains .btn:not(.domain-contact-support):hover {
    background: var(--id-primary-dark);
    border-color: var(--id-primary-dark);
}
/* the Hot / Sale / New flags */
#order-standard_cart .suggested-domains .promo.hot,
#order-standard_cart .suggested-domains .promo.sale,
#order-standard_cart .suggested-domains .promo.new {
    margin-right: 8px;
    padding: 3px 9px;
    border-radius: var(--id-radius-pill);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .06em;
}
#order-standard_cart .suggested-domains .promo.hot  { background: #C22750; }
#order-standard_cart .suggested-domains .promo.sale { background: #96680A; }
#order-standard_cart .suggested-domains .promo.new  { background: #16874A; }

/* ---- TLD price table (only shown before a search) ---- */
#order-standard_cart .domain-pricing {
    margin-top: 8px;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
    overflow: hidden;
    background: #fff;
}
/* "Browse extensions by category" - a bare <h3> flush against the card
   corner until it gets padding of its own. */
#order-standard_cart .domain-pricing > h3,
#order-standard_cart .domain-pricing > .font-size-18 {
    margin: 0;
    padding: 20px 22px 4px;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--id-ink);
}
#order-standard_cart .domain-pricing .tld-filters {
    padding: 14px 18px;
    background: #fff;
    border-bottom: 1px solid var(--id-line);
}
/* The filters are Bootstrap badges, not tabs: every one is
   "badge badge-secondary", and the selected one also carries
   "badge-success" (green). So the active state hangs off .badge-success,
   not .active or .selected. */
#order-standard_cart .domain-pricing .tld-filters a.badge {
    display: inline-block;
    margin: 3px 6px 3px 0;
    padding: 7px 15px;
    border-radius: var(--id-radius-pill);
    background: #fff;
    border: 1px solid var(--id-line);
    font-size: .84rem;
    font-weight: 600;
    color: var(--id-body);
    text-decoration: none;
    white-space: nowrap;
}
#order-standard_cart .domain-pricing .tld-filters a.badge:hover {
    border-color: var(--id-primary-line);
    color: var(--id-primary-dark);
}
#order-standard_cart .domain-pricing .tld-filters a.badge.badge-success {
    background: var(--id-primary);
    border-color: var(--id-primary);
    color: #fff;
}

/* Header is .tld-column ("Domain") plus three .col-4 cells inside
   .col-md-8 - New Price / Transfer / Renewal. */
#order-standard_cart .domain-pricing .tld-pricing-header { background: #fff; }
#order-standard_cart .domain-pricing .tld-pricing-header .tld-column,
#order-standard_cart .domain-pricing .tld-pricing-header .col-md-8 .col-4 {
    padding: 15px 10px;
    background: transparent;
    border-bottom: 1px solid var(--id-line);
    border-radius: 0;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--id-muted);
}
#order-standard_cart .domain-pricing .tld-pricing-header .tld-column {
    text-align: left;
    padding-left: 22px;
}
/* The theme stylesheet used to paint these blue with !important, which
   left grey labels on a blue field. That rule is gone; this keeps the
   nested .row from picking up any stray background. */
#order-standard_cart .domain-pricing .tld-pricing-header div { background: transparent; }

/* Row cells: the TLD on the left, three prices on the right, each with
   a <small>1 Year</small> under it. */
#order-standard_cart .domain-pricing .tld-row .two-row-center strong {
    font-size: 1rem;
    font-weight: 700;
    color: var(--id-primary-dark);
}
#order-standard_cart .domain-pricing .tld-row .col-4 { color: var(--id-ink); font-weight: 600; }
#order-standard_cart .domain-pricing .tld-row .col-4 small {
    display: block;
    margin-top: 2px;
    font-size: .74rem;
    font-weight: 400;
    color: var(--id-muted);
}
#order-standard_cart .domain-pricing .tld-row {
    padding: 4px 0;
    border-bottom: 1px solid var(--id-line);
    font-size: .92rem;
    color: var(--id-body);
    transition: background .14s ease;
}
#order-standard_cart .domain-pricing .tld-row:last-child { border-bottom: 0; }
/* The stripe stays faint; the blue tint is saved for hover, so the row
   under the cursor is the one that stands out. */
#order-standard_cart .domain-pricing .tld-row.highlighted { background: #fff; }
#order-standard_cart .domain-pricing .tld-row:hover { background: var(--id-primary-soft); }
#order-standard_cart .domain-pricing .tld-row .price { color: var(--id-ink); font-weight: 700; }
/* Stock draws a short vertical rule beside the TLD name that stops well
   short of the row edges. Dropped - the column alignment is enough. */
#order-standard_cart .domain-pricing .two-row-center {
    border-right: 0;
    margin: 0;
    padding: 14px 22px;
    line-height: 1.5;
    text-align: left;
}
#order-standard_cart .domain-pricing .tld-row .col-md-8 .col-4 { padding: 14px 10px; }

/* ---- "Add Web Hosting" promo box ---- */
#order-standard_cart .domain-promo-box {
    margin: 26px 0;
    padding: 24px 26px;
    background: var(--id-primary-soft);
    border: 1px solid var(--id-primary-line);
    border-radius: var(--id-radius);
}
#order-standard_cart .domain-promo-box h3 {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--id-ink);
}
#order-standard_cart .domain-promo-box p { font-size: .9rem; color: var(--id-body); }
#order-standard_cart .domain-promo-box .btn-warning,
#order-standard_cart .domain-promo-box .btn-warning:focus {
    background: var(--id-primary);
    border: 1px solid var(--id-primary);
    color: #fff;
    font-weight: 600;
    border-radius: var(--id-radius-sm);
}
#order-standard_cart .domain-promo-box .btn-warning:hover {
    background: var(--id-primary-dark);
    border-color: var(--id-primary-dark);
    color: #fff;
}

@media (max-width: 767px) {
    #order-standard_cart:has(.domain-checker-container) .header-lined h1 { font-size: 1.6rem; }
    #order-standard_cart .domain-checker-container { border-radius: 16px; }
    #order-standard_cart .domain-checker-bg { padding: 34px 14px; }
    /* stays one flush row on phones, exactly like the homepage box:
       the field shrinks, the button keeps a tighter label. all.min.css
       has its own "width: 100%" for this button under 767px, which would
       drop it onto a second line - overridden here.

       The box also sits in a "col-10 offset-1" column, which on a 375px
       screen left 26px of empty gutter on each side INSIDE a band that
       already has its own padding, and squeezed the field to 173px - too
       narrow for its own placeholder. Full width on phones; the column
       keeps its 15px padding, otherwise the row's -15px margins push the
       box past the band's edge. */
    #order-standard_cart .domain-checker-container .domain-checker-bg .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        margin-left: 0;
    }
    #order-standard_cart .domain-checker-container .input-group-box {
        border-radius: var(--id-radius);
        padding: 0;
    }
    #order-standard_cart .domain-checker-container .input-group-box .form-control {
        height: 54px; padding: 0 16px; font-size: .95rem;
    }
    #order-standard_cart .domain-checker-container .input-group-box .btn {
        width: auto; min-width: 0; height: 54px; padding: 0 20px; font-size: .92rem;
    }
    #order-standard_cart .domain-checker-result-headline { font-size: 1.1rem; }
    #order-standard_cart .suggested-domains .list-group-item { padding: 12px 16px; }
    #order-standard_cart .domain-pricing .tld-filters { padding: 10px 12px; }
}

/* =====================================================================
   DOMAIN TRANSFER PAGE  (cart.php?a=add&domain=transfer)
   Rendered by domaintransfer.tpl.

   IMPORTANT - why this block does not reuse the scope above:
   the transfer page has NO .domain-checker-container, so every rule
   scoped ":has(.domain-checker-container)" misses it (the sidebar was
   still showing at 1280px because of exactly that). The hook here is
   the form id, which only this page has: #frmDomainTransfer.

   Markup we are styling (captured from the live page):
     .cart-body
       .header-lined > h1              "Transfer Domain"
       .sidebar-collapsed              (mobile category picker)
       .text-center > h2 + p           "Transfer your domain to us" / "...1 year!*"
       <br>
       form#frmDomainTransfer
         .row > .col-sm-8.col-sm-offset-2.offset-sm-2
           .panel.card.panel-default
             .panel-heading.card-header > h3.panel-title
             .panel-body.card-body
               .form-group x2  (label + .form-control)
               #transferUnavailable.alert.alert-warning.slim-alert
             .panel-footer.card-footer.text-right
               button#btnTransferDomain.btn.btn-primary.btn-transfer
       p.text-center.small             footnote

   CSS only - no markup touched.
   ===================================================================== */

/* ---- layout: full width, no sidebar ---- */
#order-standard_cart:has(#frmDomainTransfer) .cart-sidebar,
#order-standard_cart:has(#frmDomainTransfer) .sidebar-collapsed { display: none; }
#order-standard_cart:has(#frmDomainTransfer) .cart-body {
    float: none;
    width: 100%;
    padding-top: 18px;
    padding-bottom: 10px;
}
/* the stray <br> between the intro and the form - the margins below do
   that job now */
#order-standard_cart:has(#frmDomainTransfer) .cart-body > br { display: none; }

/* ---- page heading ----
   Two headings ship on this page: h1 "Transfer Domain" and h2 "Transfer
   your domain to us". Keeping both at heading size reads as a mistake,
   so h1 stays the title and h2 drops to a subtitle line. */
#order-standard_cart:has(#frmDomainTransfer) .header-lined {
    text-align: center;
    border: 0;
    margin-bottom: 8px;
    padding-bottom: 0;
}
#order-standard_cart:has(#frmDomainTransfer) .header-lined h1 {
    margin: 0;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--id-ink);
}
#order-standard_cart:has(#frmDomainTransfer) .cart-body > .text-center h2 {
    max-width: 560px;
    margin: 0 auto 14px;
    font-size: 1.02rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--id-muted);
}
/* the "extend by 1 year" line earns a soft green pill - it is the one
   real incentive on the page */
#order-standard_cart:has(#frmDomainTransfer) .cart-body > .text-center p {
    display: inline-block;
    margin: 0 0 30px;
    padding: 8px 18px;
    border-radius: var(--id-radius-pill);
    background: #E8F6EE;
    border: 1px solid #BFE5CF;
    font-size: .86rem;
    font-weight: 600;
    color: #16874A;
}

/* ---- the card ----
   .col-sm-8 + .offset-sm-2 leaves the card off-centre and too wide once
   the sidebar is gone; a fixed max-width centred in the row is steadier
   at every breakpoint. */
#order-standard_cart:has(#frmDomainTransfer) #frmDomainTransfer > .row {
    margin-left: 0;
    margin-right: 0;
}
#order-standard_cart:has(#frmDomainTransfer) #frmDomainTransfer > .row > .col-sm-8 {
    flex: 0 0 100%;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    float: none;
    padding-left: 0;
    padding-right: 0;
}
#order-standard_cart #frmDomainTransfer .panel.card {
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
    box-shadow: 0 10px 30px rgba(16, 24, 40, .06);
    overflow: hidden;
}
#order-standard_cart #frmDomainTransfer .panel-heading {
    padding: 24px 26px 0;
    background: #fff;
    border: 0;
}
#order-standard_cart #frmDomainTransfer .panel-heading h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--id-ink);
}
#order-standard_cart #frmDomainTransfer .panel-body { padding: 20px 26px 4px; }

/* ---- fields ---- */
#order-standard_cart #frmDomainTransfer .form-group { margin-bottom: 20px; }
#order-standard_cart #frmDomainTransfer .panel-body label {
    display: block;
    margin-bottom: 8px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--id-ink);
}
#order-standard_cart #frmDomainTransfer .panel-body .form-control {
    height: 48px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius-sm);
    font-size: .95rem;
    color: var(--id-ink);
    box-shadow: none;
    transition: border-color .14s ease, box-shadow .14s ease;
}
#order-standard_cart #frmDomainTransfer .panel-body .form-control::placeholder { color: #000; }
#order-standard_cart #frmDomainTransfer .panel-body .form-control:focus {
    border-color: var(--id-primary);
    box-shadow: 0 0 0 3px var(--id-primary-soft);
    outline: none;
}
/* the "? Help" tooltip link sitting on the Authorization Code label */
#order-standard_cart #frmDomainTransfer .panel-body label a {
    font-size: .78rem;
    font-weight: 600;
    color: var(--id-primary-dark);
    text-decoration: none;
    cursor: help;
}
#order-standard_cart #frmDomainTransfer .panel-body label a:hover { text-decoration: underline; }
#order-standard_cart #frmDomainTransfer .panel-body label a i { margin-right: 3px; }

/* ---- the error strip JS un-hides when a transfer is not possible ---- */
#order-standard_cart:has(#frmDomainTransfer) #transferUnavailable {
    margin-bottom: 18px;
    padding: 12px 16px;
    background: #FDECF0;
    border: 1px solid #F3C6D1;
    border-radius: var(--id-radius-sm);
    font-size: .88rem;
    color: #A31F44;
}

/* ---- captcha, when it is switched on ---- */
#order-standard_cart #frmDomainTransfer .captcha-container { margin-bottom: 18px; }
#order-standard_cart #frmDomainTransfer .default-captcha p {
    margin-bottom: 8px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--id-ink);
}
#order-standard_cart #frmDomainTransfer .default-captcha > div {
    display: flex;
    align-items: center;
    gap: 10px;
}
#order-standard_cart #frmDomainTransfer .default-captcha input { max-width: 140px; }

/* ---- footer + button ----
   text-right puts a small button in the corner; on a 620px card a full
   width primary action is the clearer target, on phones especially. */
#order-standard_cart #frmDomainTransfer .panel-footer {
    padding: 4px 26px 26px;
    background: #fff;
    border: 0;
    text-align: center;
}
#order-standard_cart:has(#frmDomainTransfer) #btnTransferDomain,
#order-standard_cart:has(#frmDomainTransfer) #btnTransferDomain:focus {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 22px;
    background: var(--id-primary);
    border: 1px solid var(--id-primary);
    border-radius: var(--id-radius-sm);
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    box-shadow: none;
}
#order-standard_cart:has(#frmDomainTransfer) #btnTransferDomain:hover {
    background: var(--id-primary-dark);
    border-color: var(--id-primary-dark);
    color: #fff;
}
#order-standard_cart:has(#frmDomainTransfer) #btnTransferDomain .loader { margin-right: 6px; }

/* ---- footnote ---- */
#order-standard_cart:has(#frmDomainTransfer) .cart-body > p.small {
    max-width: 560px;
    margin: 22px auto 0;
    font-size: .8rem;
    line-height: 1.6;
    color: var(--id-muted);
}

@media (max-width: 767px) {
    #order-standard_cart:has(#frmDomainTransfer) .header-lined h1 { font-size: 1.6rem; }
    #order-standard_cart:has(#frmDomainTransfer) .cart-body > .text-center h2 { font-size: .95rem; }
    #order-standard_cart:has(#frmDomainTransfer) .cart-body > .text-center p {
        margin-bottom: 24px;
        font-size: .8rem;
    }
    #order-standard_cart #frmDomainTransfer .panel-heading { padding: 20px 18px 0; }
    #order-standard_cart #frmDomainTransfer .panel-body { padding: 16px 18px 2px; }
    #order-standard_cart #frmDomainTransfer .panel-footer { padding: 4px 18px 20px; }
}

/* =====================================================================
   CART FUNNEL  -  the four checkout steps
     1. cart.php?a=add&pid=N        choose a domain   (#frmProductDomain)
     2. cart.php?a=confproduct&i=0  configure         (#frmConfigureProduct)
     3. cart.php?a=view             review cart       (.view-cart-items)
     4. cart.php?a=checkout         checkout          (#frmCheckout)

   PASS 1 - CSS only. No .tpl touched, no WHMCS JS touched.

   Everything the stock order form paints lives in inovate_cart's own
   all.min.css as "#order-standard_cart .something" (one id, one class).
   This file loads after it, so the same shape of selector wins on order
   alone - that is why the rules below are not more specific than they
   need to be. Do not "simplify" them by dropping #order-standard_cart.

   The three off-brand colours being replaced here, for the record:
     #005588  section headings + cart table header  (old teal blue)
     #666666  order summary panel background
     #28a745  the green Checkout button
   ===================================================================== */

/* Matches only the four funnel pages. :has() takes the specificity of
   its heaviest argument, so this whole prefix is (2,0,0) and outranks
   the (1,1,0) layout rules in all.min.css without !important. */
#order-standard_cart:has(#frmProductDomain, #frmConfigureProduct, .view-cart-items, #frmCheckout) .cart-sidebar,
#order-standard_cart:has(#frmProductDomain, #frmConfigureProduct, .view-cart-items, #frmCheckout) .sidebar-collapsed {
    display: none;
}
#order-standard_cart:has(#frmProductDomain, #frmConfigureProduct, .view-cart-items, #frmCheckout) .cart-body {
    float: none;
    width: 100%;
    padding-top: 14px;
}
#order-standard_cart:has(#frmProductDomain, #frmConfigureProduct, .view-cart-items, #frmCheckout) .header-lined {
    text-align: center;
    border: 0;
    margin-bottom: 26px;
    padding-bottom: 0;
}
#order-standard_cart:has(#frmProductDomain, #frmConfigureProduct, .view-cart-items, #frmCheckout) .header-lined h1 {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--id-ink);
}

/* ---- form fields, matched to the contact and transfer pages ----
   all.min.css sets "#order-standard_cart .field, #order-standard_cart
   .form-control" with a 1px #ddd border, which outranks the theme's own
   .form-control rule. Same selector shape here, so this wins. */
#order-standard_cart .form-control:not([type="tel"]),
#order-standard_cart .custom-select {
    padding: 11px 14px;
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius-sm);
    font-size: .95rem;
    color: var(--id-ink);
    box-shadow: none;
    transition: border-color .14s ease, box-shadow .14s ease;
}
#order-standard_cart .form-control:focus,
#order-standard_cart .custom-select:focus {
    border-color: var(--id-primary);
    box-shadow: 0 0 0 3px var(--id-primary-soft);
    outline: none;
}
#order-standard_cart .form-control::placeholder { color: #000; }

/* ---- phone field ----
   WHMCS runs intl-tel-input on the phone input. That plugin overlays an
   absolutely positioned .flag-container (a flag + the dial code, 88px
   wide for "+880") on the LEFT of the input, and clears it with its own
   padding-left, set per dial-code length by .iti-sdc-1 ... .iti-sdc-5
   (82px, 92px, 102px ...).

   A "padding: X Y" shorthand on .form-control flattens that to Y and
   drops "+880" straight on top of the placeholder. So the tel input is
   excluded from the shorthand above and only gets the properties it
   actually needs - padding-left stays the plugin's business, which also
   means it keeps working when the customer picks a country with a
   longer or shorter dial code. */
#order-standard_cart input[type="tel"].form-control {
    padding-right: 14px;
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius-sm);
    font-size: .95rem;
    color: var(--id-ink);
    box-shadow: none;
}
#order-standard_cart .intl-tel-input .selected-flag {
    border-right: 1px solid var(--id-line);
    border-radius: var(--id-radius-sm) 0 0 var(--id-radius-sm);
}

#order-standard_cart label { font-size: .84rem; font-weight: 600; color: var(--id-ink); }

/* ---- section headings ----
   Stock draws a 1px rule and floats a label on top of it, in #005588 on
   a grey pill. Keeping the shape, swapping the colours. */
#order-standard_cart .sub-heading,
#order-standard_cart .sub-heading-borderless {
    margin-top: 34px;
    margin-bottom: 30px;
    border-top: 1px solid var(--id-line);
}
#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading-borderless span {
    padding: 0 16px;
    background: var(--id-bg);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--id-primary-dark);
}
/* .primary-bg-color is a theme class that paints #f1f1f1; inside the
   cart it sits on these labels only, so it is neutralised here. */
#order-standard_cart .sub-heading span.primary-bg-color { background: var(--id-bg); }

/* =====================================================================
   ORDER SUMMARY  (steps 2, 3)
   ===================================================================== */
#order-standard_cart .order-summary {
    margin: 0 0 20px;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--id-line);
    border-bottom: 1px solid var(--id-line);
    border-radius: var(--id-radius);
    box-shadow: var(--id-shadow);
}
#order-standard_cart .order-summary h2 {
    margin: 0;
    padding: 16px 20px;
    background: #fff;
    border-bottom: 1px solid var(--id-line);
    font-size: .78rem !important;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--id-muted);
}
#order-standard_cart .order-summary .summary-container {
    padding: 18px 20px;
    background: #fff;
    font-size: .92rem;
    color: var(--id-body);
}
#order-standard_cart .order-summary .product-name {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--id-ink);
}
#order-standard_cart .order-summary .product-group {
    display: block;
    margin-bottom: 10px;
    font-size: .8rem;
    color: var(--id-muted);
}
#order-standard_cart .order-summary .subtotal,
#order-standard_cart .order-summary .recurring-totals {
    padding: 8px 0;
    border-top: 1px solid var(--id-line);
}
#order-standard_cart .order-summary .subtotal span,
#order-standard_cart .order-summary .recurring-totals span { color: var(--id-body); }
#order-standard_cart .order-summary #subtotal,
#order-standard_cart .order-summary .recurring-charges { font-weight: 600; color: var(--id-ink); }

/* Markup order is amount first, label second. row-reverse puts the
   amount on the right without touching the template. */
#order-standard_cart .order-summary .total-due-today {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    margin: 14px -20px -18px;
    padding: 16px 20px;
    background: var(--id-primary-soft);
    border-top: 1px solid var(--id-primary-line);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--id-primary-dark);
}
#order-standard_cart .order-summary .total-due-today .amt {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--id-ink);
}

/* The two continue buttons that sit under the summary. */
#order-standard_cart #checkout,
#order-standard_cart #checkout:focus,
#order-standard_cart #btnCompleteProductConfig,
#order-standard_cart #btnCompleteProductConfig:focus,
#order-standard_cart #btnDomainContinue,
#order-standard_cart #btnDomainContinue:focus {
    display: block;
    width: 100%;
    margin: 0;
    padding: 15px 20px;
    background: var(--id-primary);
    border: 1px solid var(--id-primary);
    border-radius: var(--id-radius-sm);
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    box-shadow: none;
}
#order-standard_cart #checkout:hover,
#order-standard_cart #btnCompleteProductConfig:hover,
#order-standard_cart #btnDomainContinue:hover {
    background: var(--id-primary-dark);
    border-color: var(--id-primary-dark);
    color: #fff;
}
#order-standard_cart #continueShopping,
#order-standard_cart .btn-continue-shopping {
    display: block;
    margin-top: 10px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--id-muted);
}
#order-standard_cart #continueShopping:hover { color: var(--id-primary-dark); }
/* The stock markup wraps these in .text-right / .text-center and adds a
   <br>; both are pointless once the button is full width. */
#order-standard_cart .order-summary .text-right,
#order-standard_cart .order-summary .text-center { text-align: center; }
#order-standard_cart .order-summary .text-right br { display: none; }

/* =====================================================================
   STEP 3  -  review cart
   ===================================================================== */
#order-standard_cart .view-cart-items-header {
    margin: 0;
    padding: 13px 18px;
    background: #fff;
    border: 1px solid var(--id-line);
    border-bottom: 0;
    border-radius: var(--id-radius) var(--id-radius) 0 0;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--id-muted);
}
#order-standard_cart .view-cart-items {
    border: 1px solid var(--id-line);
    border-top: 0;
    border-radius: 0 0 var(--id-radius) var(--id-radius);
    background: #fff;
    overflow: hidden;
}
#order-standard_cart .view-cart-items .item {
    margin: 0;
    padding: 16px 18px;
    background: #fff;
    border: 0;
    border-bottom: 1px solid var(--id-line);
    font-size: .92rem;
    color: var(--id-body);
}
#order-standard_cart .view-cart-items .item:last-child { border-bottom: 0; }
#order-standard_cart .view-cart-items .item strong { color: var(--id-ink); }
/* Price is the single most important number on this page and stock ships
   it at 11px. */
#order-standard_cart .view-cart-items .item-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--id-ink);
}
#order-standard_cart .empty-cart { margin-top: 12px; text-align: right; }
#order-standard_cart .empty-cart .btn {
    font-size: .82rem;
    color: var(--id-muted);
}
#order-standard_cart .empty-cart .btn:hover { color: var(--id-danger); }

#order-standard_cart .view-cart-tabs { margin-top: 26px; }
#order-standard_cart .view-cart-tabs .nav-tabs {
    border-bottom: 1px solid var(--id-line);
}
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"],
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"],
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active {
    background: transparent;
    border-color: transparent transparent var(--id-primary);
    color: var(--id-primary-dark);
    font-weight: 600;
}
#order-standard_cart .view-cart-tabs .tab-content {
    padding: 20px 0 0;
    background: transparent;
}
#order-standard_cart #applyPromo .btn,
#order-standard_cart #calcTaxes .btn {
    background: #fff;
    border: 1px solid var(--id-primary-line);
    border-radius: var(--id-radius-sm);
    color: var(--id-primary-dark);
    font-weight: 600;
}
#order-standard_cart #applyPromo .btn:hover,
#order-standard_cart #calcTaxes .btn:hover {
    background: var(--id-primary);
    border-color: var(--id-primary);
    color: #fff;
}

/* =====================================================================
   STEP 2  -  configure
   ===================================================================== */
#order-standard_cart .product-info {
    margin-bottom: 22px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
}
#order-standard_cart .product-info .product-title {
    margin: 0 0 10px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--id-ink);
}
#order-standard_cart .product-info p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.9;
    color: var(--id-body);
}
#order-standard_cart .product-info strong { color: var(--id-ink); }
/* Stock separates the feature lines with double <br>. One line of air is
   enough once line-height is doing the work. */
#order-standard_cart .product-info br + br { display: none; }

#order-standard_cart .field-container {
    padding: 20px 22px;
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
}
#order-standard_cart .field-container .form-group:last-child { margin-bottom: 0; }
#order-standard_cart .field-container label { margin-bottom: 8px; }
#order-standard_cart .field-container br { display: none; }
#order-standard_cart .select-inline { width: auto; min-width: 260px; max-width: 100%; }

/* =====================================================================
   STEP 4  -  checkout
   ===================================================================== */
#order-standard_cart .already-registered {
    margin-bottom: 26px;
    padding: 16px 20px;
    background: var(--id-primary-soft);
    border: 1px solid var(--id-primary-line);
    border-radius: var(--id-radius);
}
#order-standard_cart .already-registered p {
    margin: 6px 0 0;
    font-size: .9rem;
    color: var(--id-body);
}
/* btn-info teal and btn-warning amber were a third and fourth colour on
   a page that already has one. */
#order-standard_cart #btnAlreadyRegistered,
#order-standard_cart #btnAlreadyRegistered:focus,
#order-standard_cart #btnNewUserSignup,
#order-standard_cart #btnNewUserSignup:focus {
    background: #fff;
    border: 1px solid var(--id-primary);
    border-radius: var(--id-radius-sm);
    color: var(--id-primary-dark);
    font-weight: 600;
    font-size: .88rem;
}
#order-standard_cart #btnAlreadyRegistered:hover,
#order-standard_cart #btnNewUserSignup:hover {
    background: var(--id-primary);
    border-color: var(--id-primary);
    color: #fff;
}

#order-standard_cart #totalDueToday.alert {
    margin-bottom: 18px;
    padding: 16px 20px;
    background: var(--id-primary-soft);
    border: 1px solid var(--id-primary-line);
    border-radius: var(--id-radius);
    color: var(--id-primary-dark);
    font-size: .88rem;
}
#order-standard_cart #totalCartPrice {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--id-ink);
}

/* Payment method picker - one tile per gateway, so the choice reads as a
   choice instead of a stray radio button. */
#order-standard_cart #paymentGatewaysContainer .radio-inline {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 8px 8px 0;
    padding: 13px 20px;
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius-sm);
    font-size: .92rem;
    font-weight: 600;
    color: var(--id-ink);
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease;
}
#order-standard_cart #paymentGatewaysContainer .radio-inline:hover {
    border-color: var(--id-primary-line);
    background: var(--id-primary-soft);
}
#order-standard_cart #paymentGatewaysContainer p.small { margin-bottom: 12px; }

#order-standard_cart .marketing-email-optin {
    margin: 26px 0;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
}
#order-standard_cart .marketing-email-optin h4 {
    margin: 0 0 6px;
    font-size: 1rem !important;
    font-weight: 700;
    color: var(--id-ink);
}
#order-standard_cart .marketing-email-optin p {
    margin: 0 0 12px;
    font-size: .88rem;
    color: var(--id-body);
}

#order-standard_cart #btnCompleteOrder,
#order-standard_cart #btnCompleteOrder:focus {
    width: 100%;
    max-width: 420px;
    padding: 15px 24px;
    background: var(--id-primary);
    border: 1px solid var(--id-primary);
    border-radius: var(--id-radius-sm);
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}
#order-standard_cart #btnCompleteOrder:hover {
    background: var(--id-primary-dark);
    border-color: var(--id-primary-dark);
}

#order-standard_cart .checkout-security-msg {
    margin-top: 22px;
    padding: 14px 18px;
    background: var(--id-success-soft);
    border: 1px solid #BFE5CF;
    border-radius: var(--id-radius);
    font-size: .84rem;
    color: #0B7A54;
}
#order-standard_cart .checkout-security-msg i { color: #0B7A54; }

/* ---- responsive ---- */
@media (max-width: 991px) {
    #order-standard_cart .secondary-cart-body,
    #order-standard_cart .secondary-cart-sidebar {
        float: none;
        width: 100%;
    }
    #order-standard_cart .secondary-cart-sidebar { margin-top: 24px; }
}
@media (max-width: 575px) {
    #order-standard_cart:has(#frmProductDomain, #frmConfigureProduct, .view-cart-items, #frmCheckout) .header-lined h1 { font-size: 1.55rem; }
    #order-standard_cart .view-cart-items .item { padding: 14px; }
    #order-standard_cart .product-info,
    #order-standard_cart .field-container { padding: 16px 14px; }
    #order-standard_cart #paymentGatewaysContainer .radio-inline { width: 100%; margin-right: 0; }
    #order-standard_cart #btnCompleteOrder { max-width: none; }
}