/* ==========================================================================
   SINGLE STYLESHEET — Lagom design system + client area
   --------------------------------------------------------------------------
   This one file replaces the old custom.css AND lagom.css. It is loaded
   automatically by the theme via {assetExists file="custom.css"}, so there is
   no <link> to maintain and no second file to keep in sync.

   DO NOT split or rename this file. A previous split into lagom.css +
   custom.css broke the order form: lagom.css went missing, and because the
   card styling lives here (products.tpl was trimmed to layout only), the
   product cards rendered with no background, padding or shadow.

   Layout:
     PART 1  tokens + order form components   (scoped #order-standard_cart)
     PART 2  client area                      (scoped #main-body)

   Token values were MEASURED from computed styles on the live Lagom 2.4.3
   demo, with the source element named per group. They are measurements, not
   preferences — if a component looks wrong, fix the component rule.
   ========================================================================== */

/* =========================== PART 1 — ORDER FORM =========================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
    /* Colour — source: body, h1.main-header-title, .btn-primary, .btn, .package-selected */
    --lg-primary:        #065cfe;   /* rgb(6,92,254)    primary bg, selected ring, active tab */
    --lg-heading:        #17191c;   /* rgb(23,25,28)    all headings, default btn label */
    --lg-body:           #4b4f58;   /* rgb(75,79,88)    body copy, price cycle, features */
    --lg-border:         #dee0e3;   /* rgb(222,224,227) default btn + input border */
    --lg-surface:        #ffffff;

    /* Typography — source: body, .main-header-title, .section-title, .package-name,
       .panel-title, .price, .price-cycle
       Lagom's heading scale is LIGHT. Section and card titles are weight 300. */
    --lg-font:           Roboto, sans-serif;

    --lg-text-size:      14px;  --lg-text-lh:  24px;  --lg-text-weight: 400;

    --lg-h1-size:        40px;  --lg-h1-lh:    52px;  --lg-h1-weight:   900;  /* page title */
    --lg-h2-size:        26px;  --lg-h2-lh:    34px;  --lg-h2-weight:   300;  /* section title */
    --lg-h5-size:        20px;  --lg-h5-lh:    28px;  --lg-h5-weight:   300;  /* card title */
    --lg-h7-size:        17px;  --lg-h7-lh:    22px;  --lg-h7-weight:   500;  /* panel title */

    --lg-price-size:     26px;  --lg-price-lh: 34px;  --lg-price-weight: 700;
    --lg-cycle-size:     12px;  --lg-cycle-lh: 18px;

    --lg-weight-light:   300;
    --lg-weight-base:    400;
    --lg-weight-medium:  500;
    --lg-weight-black:   900;

    /* Radius — source: --border-radius-*, confirmed .btn 6px / .package 8px */
    --lg-radius-xs:      3px;
    --lg-radius-sm:      4px;
    --lg-radius:         6px;   /* buttons, inputs, pills */
    --lg-radius-lg:      8px;   /* cards, panels */
    --lg-radius-xlg:     12px;

    /* Shadow — source: --box-shadow-*; .package uses -lg.
       Note the paired hairline + wide soft spread; both halves matter. */
    --lg-shadow-xs:      0 1px 1px rgba(0, 0, 0, .05);
    --lg-shadow-sm:      0 0 1px rgba(0, 0, 0, .04), 0 2px 16px rgba(0, 0, 0, .08);
    --lg-shadow:         0 0 1px rgba(0, 0, 0, .04), 0 2px 24px rgba(0, 0, 0, .08);
    --lg-shadow-lg:      0 0 1px rgba(0, 0, 0, .04), 0 8px 40px rgba(0, 0, 0, .08);

    /* Selected state is an INSET RING, not a border — costs no layout shift.
       source: .panel box-shadow "inset 0 0 0 1px #065cfe" */
    --lg-ring:           inset 0 0 0 1px var(--lg-primary);

    /* Spacing — strict 8px grid.
       source: .package pad/margin 24px; .section margin-bottom 48px;
               .package-footer padding-top 16px; features li padding-bottom 4px */
    --lg-space-half:     4px;
    --lg-space:          8px;
    --lg-space-2x:       16px;
    --lg-space-3x:       24px;
    --lg-space-4x:       32px;
    --lg-space-6x:       48px;

    --lg-card-pad:       24px;
    --lg-section-gap:    48px;

    /* Controls — source: .btn (14px/500, pad 8px 16px, border .667px), pill 36px/13px */
    --lg-btn-size:       14px;
    --lg-btn-weight:     500;
    --lg-btn-pad:        8px 16px;
    --lg-btn-border:     .666667px;
    --lg-pill-height:    36px;
    --lg-pill-size:      13px;

    --lg-ease:           .2s ease;
}

/* ==========================================================================
   2. Surface & typography
   ========================================================================== */

#order-standard_cart {
    font-family: var(--lg-font);
    font-size: var(--lg-text-size);
    font-weight: var(--lg-text-weight);
    line-height: var(--lg-text-lh);
    color: var(--lg-body);
    background: var(--lg-surface);
}

#order-standard_cart p,
#order-standard_cart li,
#order-standard_cart td,
#order-standard_cart label,
#order-standard_cart span,
#order-standard_cart div {
    font-family: var(--lg-font);
}

#order-standard_cart h1,
#order-standard_cart h2,
#order-standard_cart h3,
#order-standard_cart h4,
#order-standard_cart h5,
#order-standard_cart h6 {
    font-family: var(--lg-font);
    color: var(--lg-heading);
    letter-spacing: normal;
    margin-top: 0;
}

/* Page title — "You're almost there! Complete your order" */
#order-standard_cart h1,
#order-standard_cart .main-header-title {
    font-size: var(--lg-h1-size);
    line-height: var(--lg-h1-lh);
    font-weight: var(--lg-h1-weight);
    margin-bottom: var(--lg-space-4x);
}

/* Section title — "Products", "Product Billing Cycle", "Product Domain".
   Deliberately LIGHT. This is the single biggest departure from a default
   WHMCS theme, and the main reason Lagom reads as calm rather than shouty. */
#order-standard_cart h2,
#order-standard_cart .section-title {
    font-size: var(--lg-h2-size);
    line-height: var(--lg-h2-lh);
    font-weight: var(--lg-h2-weight);
    margin-bottom: var(--lg-space-3x);
}

/* Card title — "Professional", "Business", "Ultimate" */
#order-standard_cart h3,
#order-standard_cart h5,
#order-standard_cart .package-name,
#order-standard_cart .product-title {
    font-size: var(--lg-h5-size);
    line-height: var(--lg-h5-lh);
    font-weight: var(--lg-h5-weight);
}

/* Product-card title: FIXED two-line height so the price sits at the exact
   same level on every card no matter how long the name is. A short name is
   vertically centred in the reserved space; a name longer than two lines is
   clamped with an ellipsis rather than pushing the price down. */
#order-standard_cart .product-title {
    height: calc(var(--lg-h5-lh) * 2);      /* 2 lines = 56px */
    margin: 0 0 var(--lg-space-2x);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;               /* vertical centre in the 56px */
    -webkit-box-align: center;              /* horizontal centre */
    overflow: hidden;
    text-align: center;
}

/* Panel title — "Configuration Summary", "Order Summary" */
#order-standard_cart .panel-title,
#order-standard_cart h4 {
    font-size: var(--lg-h7-size);
    line-height: var(--lg-h7-lh);
    font-weight: var(--lg-h7-weight);
}

/* Uniform gap between page sections */
#order-standard_cart .section,
#order-standard_cart .order-section {
    margin-bottom: var(--lg-section-gap);
}

/* ==========================================================================
   3. Cards
   source: .package — white, radius 8px, pad 24px, margin-bottom 24px,
   shadow-lg, NO border when unselected; inset blue ring when selected.
   ========================================================================== */

#order-standard_cart .package,
#order-standard_cart .product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--lg-surface);
    border: 0;
    border-radius: var(--lg-radius-lg);
    box-shadow: var(--lg-shadow-lg);
    padding: var(--lg-card-pad);
    margin: 0 0 var(--lg-space-3x);
    overflow: hidden;
    transition: box-shadow var(--lg-ease);
}

/* Lagom does not lift cards on hover, and does not tint the border.
   It deepens the existing shadow only. */
#order-standard_cart .package:hover,
#order-standard_cart .product-card:hover {
    transform: none;
    box-shadow: var(--lg-shadow-lg), 0 0 0 1px rgba(6, 92, 254, .18);
}

#order-standard_cart .package.package-selected,
#order-standard_cart .product-card.selected {
    box-shadow: var(--lg-shadow-lg), var(--lg-ring);
}

/* Card internals — the header carries no gradient and no divider rule */
#order-standard_cart .package-header,
#order-standard_cart .product-card-header {
    background: none;
    border-bottom: 0;
    padding: 0;
    text-align: center;
}

#order-standard_cart .package-body,
#order-standard_cart .product-card-body {
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

#order-standard_cart .package-footer,
#order-standard_cart .product-card-footer {
    background: none;
    border-top: 0;
    padding: var(--lg-space-2x) 0 0;
    text-align: center;
}

/* Price — source: .price.price-sm 26px/34px w700 #17191c; .price-cycle 12px/18px */
#order-standard_cart .price,
#order-standard_cart .price-amount,
#order-standard_cart .package-price .price,
#order-standard_cart .product-card .price-amount {
    font-size: var(--lg-price-size);
    line-height: var(--lg-price-lh);
    font-weight: var(--lg-price-weight);
    color: var(--lg-heading);
}

#order-standard_cart .price-cycle,
#order-standard_cart .billing-cycle {
    font-size: var(--lg-cycle-size);
    line-height: var(--lg-cycle-lh);
    font-weight: var(--lg-weight-base);
    color: var(--lg-body);
}

/* Feature list — source: .package-features li 14px/24px, padding-bottom 4px,
   no divider rules, no hover treatment */
#order-standard_cart .package-features,
#order-standard_cart .features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}

#order-standard_cart .package-features li,
#order-standard_cart .features-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--lg-space);
    padding: 0 0 var(--lg-space-half);
    border-bottom: 0;
    font-size: var(--lg-text-size);
    line-height: var(--lg-text-lh);
    color: var(--lg-body);
    background: none;
    transition: none;
}

#order-standard_cart .features-list li:hover {
    background: none;
    padding: 0 0 var(--lg-space-half);
    margin: 0;
    border-radius: 0;
}

#order-standard_cart .features-list i,
#order-standard_cart .package-features i {
    color: var(--lg-primary);
    font-size: var(--lg-cycle-size);
    margin-top: 5px;
    flex-shrink: 0;
}

#order-standard_cart .feature-text strong {
    color: var(--lg-heading);
    font-weight: var(--lg-weight-medium);
}

/* --------------------------------------------------------------------------
   Selected corner ribbon
   source: span.check-sign 30x30 at top:0/right:0, radius 0 4px 0 0, overflow
   hidden; inner i.ls-check 80x30 bg #065cfe rotated into the corner.
   Rebuilt here with a pseudo-element so no markup is required.
   -------------------------------------------------------------------------- */

#order-standard_cart .check-sign {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 0 var(--lg-radius-sm) 0 0;
    z-index: 2;
    pointer-events: none;
}

#order-standard_cart .check-sign::before {
    content: "";
    position: absolute;
    top: -21px;
    right: -25px;
    width: 80px;
    height: 30px;
    background: var(--lg-primary);
    transform: rotate(45deg);
}

#order-standard_cart .check-sign > i {
    position: relative;
    z-index: 1;
    display: block;
    margin: 3px 4px 0 auto;
    width: 12px;
    height: 12px;
    font-size: 10px;
    line-height: 12px;
    color: #fff;
    text-align: center;
}

/* ==========================================================================
   4. Buttons
   source: .btn 14px/500, pad 8px 16px, radius 6px, border .667px.
   Primary #065cfe on white. Default transparent with #dee0e3 border and
   #17191c label. Note: NOT uppercase, NOT letter-spaced, NOT full-width,
   NOT pill-shaped, and no drop shadow.
   ========================================================================== */

#order-standard_cart .btn,
#order-standard_cart .btn-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--lg-space);
    width: auto;
    padding: var(--lg-btn-pad);
    font-family: var(--lg-font);
    font-size: var(--lg-btn-size);
    font-weight: var(--lg-btn-weight);
    line-height: var(--lg-text-lh);
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
    border: var(--lg-btn-border) solid var(--lg-border);
    border-radius: var(--lg-radius);
    background: transparent;
    color: var(--lg-heading);
    box-shadow: none;
    transition: background var(--lg-ease), border-color var(--lg-ease), color var(--lg-ease);
}

#order-standard_cart .btn:hover,
#order-standard_cart .btn-order:hover {
    transform: none;
    box-shadow: none;
    text-decoration: none;
    background: rgba(6, 92, 254, .04);
    border-color: var(--lg-primary);
    color: var(--lg-heading);
}

#order-standard_cart .btn-primary,
#order-standard_cart .btn-order {
    background: var(--lg-primary);
    border-color: var(--lg-primary);
    color: #fff;
}

#order-standard_cart .btn-primary:hover,
#order-standard_cart .btn-order:hover {
    background: #0450d8;
    border-color: #0450d8;
    color: #fff;
}

/* Lagom does not animate button icons */
#order-standard_cart .btn-order:hover i,
#order-standard_cart .btn:hover i {
    transform: none;
}

#order-standard_cart .btn-block {
    width: 100%;
}

/* Segmented pill group — source: .btn-group .btn 36px tall, 13px/500,
   pad 4px 16px, radius only on the outer edges */
#order-standard_cart .btn-group > .btn {
    height: var(--lg-pill-height);
    padding: var(--lg-space-half) var(--lg-space-2x);
    font-size: var(--lg-pill-size);
    border-radius: 0;
}

#order-standard_cart .btn-group > .btn:first-child {
    border-radius: var(--lg-radius) 0 0 var(--lg-radius);
}

#order-standard_cart .btn-group > .btn:last-child {
    border-radius: 0 var(--lg-radius) var(--lg-radius) 0;
}

#order-standard_cart .btn-group > .btn.active {
    background: var(--lg-primary);
    border-color: var(--lg-primary);
    color: #fff;
}

/* ==========================================================================
   5. Forms
   source: .form-control 14px/24px, radius 6px, #17191c text
   ========================================================================== */

#order-standard_cart .form-control,
#order-standard_cart .custom-select,
#order-standard_cart select,
#order-standard_cart input[type="text"],
#order-standard_cart input[type="email"],
#order-standard_cart input[type="password"],
#order-standard_cart input[type="tel"],
#order-standard_cart textarea {
    font-family: var(--lg-font);
    font-size: var(--lg-text-size);
    line-height: var(--lg-text-lh);
    font-weight: var(--lg-weight-base);
    color: var(--lg-heading);
    background: var(--lg-surface);
    border: var(--lg-btn-border) solid var(--lg-border);
    border-radius: var(--lg-radius);
    padding: var(--lg-btn-pad);
    height: auto;
    box-shadow: none;
    transition: border-color var(--lg-ease), box-shadow var(--lg-ease);
}

#order-standard_cart .form-control:focus,
#order-standard_cart .custom-select:focus,
#order-standard_cart select:focus,
#order-standard_cart textarea:focus {
    border-color: var(--lg-primary);
    box-shadow: var(--lg-ring);
    outline: 0;
}

#order-standard_cart .form-control::placeholder {
    color: var(--lg-body);
    opacity: .7;
}

#order-standard_cart label,
#order-standard_cart .control-label {
    font-size: var(--lg-text-size);
    line-height: var(--lg-text-lh);
    font-weight: var(--lg-weight-medium);
    color: var(--lg-heading);
    margin-bottom: var(--lg-space-half);
}

/* ==========================================================================
   6. Panels — "Configuration Summary" / "Order Summary"
   source: .panel white, radius 8px, inset ring when active, padding 0
   ========================================================================== */

#order-standard_cart .panel,
#order-standard_cart .order-summary,
#order-standard_cart .summary-panel {
    background: var(--lg-surface);
    border: 0;
    border-radius: var(--lg-radius-lg);
    box-shadow: var(--lg-shadow-lg);
    padding: 0;
    margin-bottom: var(--lg-space-3x);
}

#order-standard_cart .panel-heading,
#order-standard_cart .panel-header {
    background: none;
    border-bottom: 0;
    padding: var(--lg-card-pad) var(--lg-card-pad) var(--lg-space-2x);
}

#order-standard_cart .panel-body {
    padding: 0 var(--lg-card-pad) var(--lg-card-pad);
}

#order-standard_cart .panel-footer {
    background: none;
    border-top: var(--lg-btn-border) solid var(--lg-border);
    padding: var(--lg-space-2x) var(--lg-card-pad);
}

/* ==========================================================================
   7. Tabs — product group navigation
   source: .nav-tabs a 14px/400; active is #065cfe with a 2px underline
   ========================================================================== */

#order-standard_cart .nav-tabs {
    border-bottom: var(--lg-btn-border) solid var(--lg-border);
}

#order-standard_cart .nav-tabs > li > a,
#order-standard_cart .nav-tabs .nav-link {
    font-size: var(--lg-text-size);
    line-height: var(--lg-text-lh);
    font-weight: var(--lg-weight-base);
    color: var(--lg-body);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: var(--lg-space-2x) var(--lg-space-2x) 12px;
    transition: color var(--lg-ease), border-color var(--lg-ease);
}

#order-standard_cart .nav-tabs > li > a:hover,
#order-standard_cart .nav-tabs .nav-link:hover {
    color: var(--lg-heading);
    background: none;
    border-bottom-color: var(--lg-border);
}

#order-standard_cart .nav-tabs > li.active > a,
#order-standard_cart .nav-tabs .nav-link.active {
    color: var(--lg-primary);
    background: none;
    border-bottom-color: var(--lg-primary);
}

/* ==========================================================================
   8. Tables — checkout line items
   Lagom keeps headers sentence-case and untinted: no uppercase, no
   letter-spacing, no filled header band.
   ========================================================================== */

#order-standard_cart .table {
    color: var(--lg-body);
    margin-bottom: 0;
}

#order-standard_cart .table > thead > tr > th {
    background: none;
    border-top: 0;
    border-bottom: var(--lg-btn-border) solid var(--lg-border);
    font-size: var(--lg-text-size);
    line-height: var(--lg-text-lh);
    font-weight: var(--lg-weight-medium);
    text-transform: none;
    letter-spacing: normal;
    color: var(--lg-body);
    padding: var(--lg-space-2x) var(--lg-card-pad);
}

#order-standard_cart .table > tbody > tr > td {
    border-top: var(--lg-btn-border) solid var(--lg-border);
    padding: var(--lg-space-2x) var(--lg-card-pad);
    vertical-align: middle;
    font-size: var(--lg-text-size);
    line-height: var(--lg-text-lh);
    color: var(--lg-heading);
}

/* ==========================================================================
   9. Alerts & badges
   ========================================================================== */

#order-standard_cart .alert {
    border-radius: var(--lg-radius-lg);
    border: var(--lg-btn-border) solid var(--lg-border);
    box-shadow: none;
    padding: var(--lg-space-2x) var(--lg-card-pad);
    font-size: var(--lg-text-size);
    line-height: var(--lg-text-lh);
    margin-bottom: var(--lg-space-3x);
}

/* Gradient badges are not part of Lagom's language — flatten to the token set
   while leaving the badge text itself untouched. */
#order-standard_cart .badge,
#order-standard_cart .label,
#order-standard_cart .stock-badge,
#order-standard_cart .bundle-badge {
    background: rgba(6, 92, 254, .08);
    color: var(--lg-primary);
    border-radius: var(--lg-radius-sm);
    padding: 2px var(--lg-space);
    font-size: var(--lg-cycle-size);
    line-height: var(--lg-cycle-lh);
    font-weight: var(--lg-weight-medium);
    text-transform: none;
    letter-spacing: normal;
}

#order-standard_cart .stock-badge {
    position: absolute;
    top: var(--lg-space-2x);
    right: var(--lg-space-2x);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: var(--lg-space-half);
}

/* ==========================================================================
   9b. Shared client-area chrome
   --------------------------------------------------------------------------
   VERIFIED ON dev.host4india.com: the order form renders INSIDE #main-body,
   so css/custom.css also governs the cart. Two collisions were measured and
   have since been fixed at source — custom.css now consumes the same tokens:

     * .cart-sidebar .card resolved to border-radius 14px. The sidebar element
       carries BOTH .panel and .card; this file styled only .panel, so the old
       value was unopposed. Both are covered below now.
     * #main-body .panel carried `border-radius: ... !important`, which beat any
       normal declaration. That !important has been removed from custom.css, so
       nothing here needs to force a value.

   The rules below now agree with custom.css rather than fighting it. They are
   kept so the cart is correct even if custom.css is absent.
   ========================================================================== */

#order-standard_cart .card,
#order-standard_cart .panel,
#order-standard_cart .card-sidebar,
#order-standard_cart .panel-sidebar {
    border-radius: var(--lg-radius-lg);
    border: 0;
    box-shadow: var(--lg-shadow-lg);
    background: var(--lg-surface);
}

#order-standard_cart .card .card-header,
#order-standard_cart .panel .panel-heading {
    background: none;
    border-bottom: var(--lg-btn-border) solid var(--lg-border);
    padding: var(--lg-space-2x) var(--lg-card-pad);
}

#order-standard_cart .card .card-title,
#order-standard_cart .panel .panel-title {
    font-size: var(--lg-h7-size);
    line-height: var(--lg-h7-lh);
    font-weight: var(--lg-h7-weight);
    color: var(--lg-heading);
}

/* Sidebar rows — custom.css paints these in the old blue (#0774ff) at
   weight 600 with a tinted hover. Lagom keeps them quiet. */
#order-standard_cart .list-group-item {
    border: 0;
    border-top: var(--lg-btn-border) solid var(--lg-border);
    border-radius: 0;
    padding: 12px var(--lg-card-pad);
    font-size: var(--lg-text-size);
    line-height: var(--lg-text-lh);
    font-weight: var(--lg-weight-base);
    color: var(--lg-heading);
    background: var(--lg-surface);
}

#order-standard_cart .list-group-item:first-child {
    border-top: 0;
}

#order-standard_cart .list-group-item:hover {
    padding-left: var(--lg-card-pad);
    background: rgba(6, 92, 254, .04);
    color: var(--lg-primary);
}

#order-standard_cart .list-group-item.active {
    background: rgba(6, 92, 254, .06);
    color: var(--lg-primary);
    font-weight: var(--lg-weight-medium);
    border-color: var(--lg-border);
}

/* custom.css makes every .btn a pill (999px) with a lift-on-hover shadow.
   Lagom buttons are 6px and flat. */
#order-standard_cart .btn,
#order-standard_cart .btn-sm,
#order-standard_cart .btn-xs,
#order-standard_cart .btn-lg {
    border-radius: var(--lg-radius);
}

#order-standard_cart .btn:hover {
    transform: none;
    box-shadow: none;
}

/* ==========================================================================
   9a2. Base font-size guard
   --------------------------------------------------------------------------
   MEASURED: theme.min.css sets `#order-standard_cart { font-size: 15px }` at
   the SAME specificity (1,0,0) as PART 1's base rule, but loads later in the
   document, so it won on order — inflating every em/rem-derived size across
   all four order-form pages by ~7%. That is what made the boxes read large.

   MEASURED: theme.min.css sets it with `!important`, so specificity alone can
   never win — the override below must also be `!important`. The doubled id
   (2,0,0) plus !important pins the cart to Lagom's measured 14px/24px base.

   Same story for form fields: theme's `.form-group input` forces
   var(--font-size-b2) (~10px) and a 4px radius via the theme scale. Restated
   here on the scoped control so inputs read at Lagom's 14px / 6px.
   Delete only if theme.min.css / style.css stop shipping those rules.
   ========================================================================== */

#order-standard_cart#order-standard_cart {
    font-size: var(--lg-text-size, 14px) !important;
    line-height: var(--lg-text-lh, 24px);
}

#order-standard_cart .form-control,
#order-standard_cart .form-group input,
#order-standard_cart input[type="text"],
#order-standard_cart input[type="email"],
#order-standard_cart input[type="password"],
#order-standard_cart input[type="tel"],
#order-standard_cart input[type="number"] {
    font-size: var(--lg-text-size, 14px);
    border-radius: var(--lg-radius, 6px);
}

/* ==========================================================================
   9c. Order summary sidebar — vendor overrides
   --------------------------------------------------------------------------
   MEASURED on the live configure page: three values leak in from the vendored
   order-form sheets (hosti_cart/css/all.css and theme.min.css), which predate
   this design system and size in ems with `font-weight: bold`:

     * .order-summary .product-name  -> bold at 1.2em
     * .order-summary .amt           -> 2.3em, resolving to weight 800
     * bare <strong> in the cart     -> weight 700

   Overriding here rather than editing all.css, which is a 73KB vendor file we
   do not want to fork. Selectors carry one extra element qualifier so they
   outrank the originals regardless of sheet order.
   ========================================================================== */

#order-standard_cart .order-summary span.product-name {
    font-size: var(--lg-text-size, 14px);
    line-height: var(--lg-text-lh, 24px);
    font-weight: var(--lg-weight-medium, 500);
    color: var(--lg-heading, #17191c);
}

#order-standard_cart .order-summary .total-due-today span.amt {
    font-size: var(--lg-price-size, 26px);
    line-height: var(--lg-price-lh, 34px);
    font-weight: var(--lg-price-weight, 700);
    color: var(--lg-heading, #17191c);
}

/* Lagom's heaviest inline emphasis is medium. */
#order-standard_cart strong,
#order-standard_cart b {
    font-weight: var(--lg-weight-medium, 500);
}

/* ==========================================================================
   10. Responsive
   Lagom keeps the type scale but steps h1 down on narrow viewports.
   ========================================================================== */

@media (max-width: 991px) {
    :root {
        --lg-h1-size: 32px;  --lg-h1-lh: 42px;
        --lg-h2-size: 22px;  --lg-h2-lh: 30px;
        --lg-card-pad: 20px;
        --lg-section-gap: 32px;
    }
}

@media (max-width: 767px) {
    :root {
        --lg-h1-size: 26px;  --lg-h1-lh: 34px;
        --lg-h2-size: 20px;  --lg-h2-lh: 28px;
        --lg-section-gap: 24px;
    }

    #order-standard_cart .package,
    #order-standard_cart .product-card {
        margin-bottom: var(--lg-space-2x);
    }

    #order-standard_cart .table > thead > tr > th,
    #order-standard_cart .table > tbody > tr > td {
        padding: 12px var(--lg-space-2x);
    }
}


/* =========================== PART 2 — CLIENT AREA ========================== */

/* Tokens are consumed from css/lagom.css, which defines them on :root from
   values MEASURED on the live Lagom demo. Fallbacks are supplied so this file
   still renders sanely if lagom.css ever fails to load.

   The previous --la-* set contradicted Lagom on nearly every value (pill
   buttons, 14px radius, #f6f6f6 page bg, 700/800 heading weights, #0774ff
   blue). Those aliases are re-pointed here rather than deleted, so the rules
   below keep working unchanged. */

:root {
    --la-navy-900: var(--lg-heading, #17191c);
    --la-navy-700: var(--lg-heading, #17191c);
    --la-blue:     var(--lg-primary, #065cfe);
    --la-blue-deep: #0450d8;
    --la-blue-050: rgba(6, 92, 254, .04);
    --la-blue-100: rgba(6, 92, 254, .06);
    --la-blue-200: rgba(6, 92, 254, .18);
    --la-muted:    var(--lg-body, #4b4f58);
    --la-border:   var(--lg-border, #dee0e3);
    --la-grey-050: var(--lg-surface, #ffffff);

    /* Lagom: 8px surfaces, 6px controls. No pills. */
    --la-radius:      var(--lg-radius-lg, 8px);
    --la-radius-sm:   var(--lg-radius, 6px);
    --la-radius-pill: var(--lg-radius, 6px);

    --la-shadow:       var(--lg-shadow-lg, 0 0 1px rgba(0,0,0,.04), 0 8px 40px rgba(0,0,0,.08));
    --la-shadow-hover: var(--lg-shadow-lg, 0 0 1px rgba(0,0,0,.04), 0 8px 40px rgba(0,0,0,.08));
    --la-ease: .2s ease;
}

/* --------------------------------------------------------------------------
   1. Page surface & typography
   -------------------------------------------------------------------------- */

#main-body {
    font-family: var(--lg-font, Roboto, sans-serif);
    font-size: var(--lg-text-size, 14px);
    line-height: var(--lg-text-lh, 24px);
    background: var(--lg-surface, #fff);
    padding-top: 36px;
    padding-bottom: 56px;
    color: var(--la-navy-900);
}

#main-body h1,
#main-body h2,
#main-body h3,
#main-body h4,
#main-body h5 {
    color: var(--la-navy-900);
    letter-spacing: -.01em;
}

/* Lagom's heading scale: h1 heavy, everything below it LIGHT. */
#main-body h1 { font-size: var(--lg-h1-size, 40px); line-height: var(--lg-h1-lh, 52px); font-weight: var(--lg-h1-weight, 900); margin-bottom: var(--lg-space-4x, 32px); }
#main-body h2 { font-size: var(--lg-h2-size, 26px); line-height: var(--lg-h2-lh, 34px); font-weight: var(--lg-h2-weight, 300); }
#main-body h3 { font-size: var(--lg-h5-size, 20px); line-height: var(--lg-h5-lh, 28px); font-weight: var(--lg-h5-weight, 300); }

#main-body p,
#main-body .text-muted,
#main-body small {
    color: var(--la-muted);
}

/* Buttons are usually anchors in WHMCS, and not always classed `.btn`
   (hosti_cart uses `.btn-order`, `.btn-text`, ...). Matching any class that
   contains "btn" keeps every button label its authored colour instead of
   forcing it to link-blue. Only genuine text links get recoloured. */
#main-body a:not([class*="btn"]):not(.list-group-item):not(.tile):not(.back-link):not(.page-link) {
    color: var(--la-blue);
}

#main-body a:not([class*="btn"]):not(.list-group-item):not(.tile):not(.back-link):not(.page-link):hover {
    color: var(--la-blue-deep);
}

/* Legacy rule from when the order form owned all its own styling: it forced
   every classed anchor in the cart to inherit its parent's colour.

   MEASURED BUG: at specificity (2,1,1) it beat PART 1's
   `#order-standard_cart .btn-order` (1,1,0), so the blue "Order Now" button
   rendered its label in body grey (#4b4f58) instead of white.

   Buttons are now excluded — PART 1 owns them. Plain classed anchors still
   inherit, which is what this rule was actually for. */
#main-body #order-standard_cart a[class]:not([class*="btn"]):not(.list-group-item) {
    color: inherit;
}

/* --------------------------------------------------------------------------
   2. Dashboard tiles  (.tiles > .tile)
   Lagom uses uniform white cards. The coloured .highlight underline is
   reduced to a soft tinted footprint rather than a hard stripe.
   -------------------------------------------------------------------------- */

#main-body .tiles {
    margin-bottom: 28px !important;
}

#main-body .tiles .row.no-gutters {
    margin-left: -9px;
    margin-right: -9px;
}

#main-body .tiles [class*="col-"] {
    padding: 9px;
}

#main-body .tile {
    position: relative;
    display: block;
    background: #fff;
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius);
    box-shadow: var(--la-shadow);
    padding: 26px 24px 24px;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
    transition: transform var(--la-ease), box-shadow var(--la-ease), border-color var(--la-ease);
}

#main-body .tile:hover {
    transform: none;
    box-shadow: var(--la-shadow-hover);
    border-color: var(--la-blue-200);
    text-decoration: none;
}

#main-body .tile .stat {
    font-size: 38px;
    font-weight: var(--lg-weight-black, 900);
    line-height: 1.1;
    color: var(--la-navy-900);
    margin-bottom: 2px;
}

#main-body .tile .title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--la-muted);
}

/* Icon lifted into a soft tinted circle, top-right */
#main-body .tile > i {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border-radius: 50%;
    background: var(--la-blue-050);
    color: var(--la-blue);
    transition: background var(--la-ease), color var(--la-ease);
}

#main-body .tile:hover > i {
    background: var(--la-blue);
    color: #fff;
}

/* Hard underline -> thin accent seated at the very bottom */
#main-body .tile .highlight {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    margin: 0;
    height: 3px;
    border-radius: 0;
    opacity: .55;
    transition: opacity var(--la-ease), height var(--la-ease);
}

#main-body .tile:hover .highlight {
    opacity: 1;
    height: 4px;
}

/* --------------------------------------------------------------------------
   3. Cards — dashboard panels and sidebar
   Removes the multi-coloured card-accent-* top stripes so every card reads
   as one consistent surface, the way Lagom does it.
   -------------------------------------------------------------------------- */

#main-body .card {
    background: #fff;
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius);
    box-shadow: var(--la-shadow);
    margin-bottom: 22px;
    overflow: hidden;
    transition: box-shadow var(--la-ease), border-color var(--la-ease);
}

#main-body .client-home-cards .card:hover {
    box-shadow: var(--la-shadow-hover);
}

/* Neutralise Bootstrap/Twenty-One accent stripes */
#main-body .card[class*="card-accent-"] {
    border-top: 1px solid var(--la-border);
}

#main-body .card .card-header {
    background: #fff;
    border-bottom: 1px solid var(--la-border);
    padding: 18px 22px;
}

#main-body .card .card-header .card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--la-navy-900);
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
}

/* Leading icon stays ahead of the label (flex treats the bare text node as
   an anonymous item at order 0, so the icon needs a negative order). */
#main-body .card .card-header .card-title > i:not(.card-minimise) {
    color: var(--la-blue);
    font-size: 15px;
    order: -1;
    flex: 0 0 auto;
}

/* Twenty-One floats the header button and the collapse chevron with
   .float-right. Flex cancels float, so push them to the end explicitly. */
#main-body .card .card-header .card-title > .float-right,
#main-body .card .card-header .card-title > .card-minimise {
    float: none !important;
    margin-left: auto;
    order: 99;
}

#main-body .card .card-header .card-title > .float-right + .card-minimise {
    margin-left: 12px;
}

/* Header action buttons stay on one line and stay small */
#main-body .card .card-header .card-title .btn {
    white-space: nowrap;
    padding: 7px 15px;
    font-size: 12.5px;
    line-height: 1.3;
}

#main-body .card .card-body {
    padding: 22px;
    color: var(--la-muted);
}

/* Footers are emitted even when the panel has nothing to put in them, which
   left an empty bordered strip under several cards. Collapse by default and
   only reinstate padding/border when the footer actually holds an element. */
#main-body .card .card-footer {
    background: #fff;
    border-top: none;
    padding: 0;
}

#main-body .card .card-footer:has(*) {
    border-top: 1px solid var(--la-border);
    padding: 13px 22px;
}

#main-body .card .card-footer:empty {
    display: none;
}

/* Header buttons inside card titles */
#main-body .card .card-header .btn-xs {
    border-radius: var(--la-radius-pill);
    padding: 6px 15px;
    font-size: 12px;
    font-weight: 600;
    border: none;
}

/* --------------------------------------------------------------------------
   4. Sidebar cards
   -------------------------------------------------------------------------- */

#main-body .sidebar .card-sidebar {
    border-radius: var(--la-radius);
}

#main-body .sidebar .card-sidebar .card-header {
    padding: 16px 20px;
}

#main-body .sidebar .card-minimise {
    color: var(--la-muted);
    font-size: 12px;
    transition: transform var(--la-ease);
}

#main-body .sidebar .list-group-item {
    border: none;
    border-top: 1px solid var(--la-border);
    padding: 13px 20px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--la-navy-900);
    background: #fff;
    transition: background var(--la-ease), color var(--la-ease), padding-left var(--la-ease);
}

#main-body .sidebar .list-group-item:first-child {
    border-top: none;
}

#main-body .sidebar .list-group-item i {
    color: var(--la-muted);
    transition: color var(--la-ease);
}

#main-body .sidebar .list-group-item:hover {
    background: var(--la-blue-050);
    color: var(--la-blue);
    padding-left: 24px;
}

#main-body .sidebar .list-group-item:hover i {
    color: var(--la-blue);
}

#main-body .sidebar .list-group-item.active {
    background: var(--la-blue-050);
    color: var(--la-blue);
    border-color: var(--la-border);
    font-weight: 600;
}

#main-body .sidebar .list-group-item.active i {
    color: var(--la-blue);
}

/* Panel list rows on the dashboard read the same way */
#main-body .client-home-cards .list-group-item {
    border-left: none;
    border-right: none;
    border-color: var(--la-border);
    padding: 14px 22px;
    transition: background var(--la-ease);
}

/* The theme's .list-group-item-action:hover forces white text (meant for a
   dark hover fill). Our hover fill is a light tint, so white text vanished.
   Keep the text its normal dark colour on hover. Covers the -action variant
   and inheriting children (the bold service name inherits this). */
#main-body .client-home-cards .list-group-item:hover,
#main-body .client-home-cards .list-group-item-action:hover {
    background: var(--la-blue-050);
    color: var(--la-navy-900);
}

/* --------------------------------------------------------------------------
   5. Buttons — one shape, existing colours preserved
   -------------------------------------------------------------------------- */

#main-body .btn {
    border-radius: var(--la-radius-pill);
    font-weight: var(--lg-weight-medium, 500);
    font-size: var(--lg-btn-size, 14px);
    padding: 10px 22px;
    border-width: 1px;
    box-shadow: none;
    transition: transform var(--la-ease), box-shadow var(--la-ease), background var(--la-ease);
}

#main-body .btn:hover {
    transform: none;
    box-shadow: none;
}

#main-body .btn:active {
    transform: translateY(0);
}

#main-body .btn-primary {
    background: var(--la-blue);
    border-color: var(--la-blue);
}

#main-body .btn-primary:hover {
    background: var(--la-blue-deep);
    border-color: var(--la-blue-deep);
}

#main-body .btn-sm,
#main-body .btn-xs {
    padding: 7px 16px;
    font-size: 13px;
}

#main-body .btn-lg {
    padding: 14px 30px;
    font-size: 16px;
}

#main-body .btn-block {
    width: 100%;
}

/* --------------------------------------------------------------------------
   5b. Button variants -> Lagom palette
   --------------------------------------------------------------------------
   The site theme (theme.min.css) colours WHMCS/Bootstrap button variants in
   its own navy/gold palette via --color-primary, so the client area showed a
   mix (Update navy, My Services gold, View Details grey). Remapped here:

     primary / success / gold CTA  -> solid Lagom blue   (main actions)
     default / secondary           -> white + hairline   (neutral)
     danger                        -> red   (kept for safety)
     warning                       -> amber (kept for meaning)

   The theme uses NO !important on these, so the #main-body id scope (0,1,1,0)
   beats the theme's (0,0,1,0) with a normal declaration. Scoped to #main-body
   only — the order form and public site are untouched.
   -------------------------------------------------------------------------- */

/* Main actions — solid blue. .bg-color-gold is the theme's gold CTA class
   (that's what made "My Services" yellow); folding it in makes it a proper
   primary action. */
#main-body .btn-primary,
#main-body .btn-success,
#main-body .btn-info,
#main-body .btn.bg-color-gold {
    background: var(--lg-primary, #065cfe);
    border-color: var(--lg-primary, #065cfe);
    color: #fff;
}

/* The theme forces `.btn-default:hover { background: navy !important }`, and
   the coloured buttons carry .btn-default as a base class too — so their hover
   must also be !important to keep the blue. !important here is visual only and
   does not affect the buttons' click/PHP behaviour. */
#main-body .btn-primary:hover,
#main-body .btn-success:hover,
#main-body .btn-info:hover,
#main-body .btn.bg-color-gold:hover {
    background: var(--la-blue-deep) !important;
    border-color: var(--la-blue-deep) !important;
    color: #fff !important;
}

/* Neutral — white with a hairline border */
#main-body .btn-default,
#main-body .btn-secondary {
    background: #fff;
    border-color: var(--lg-border, #dee0e3);
    color: var(--lg-heading, #17191c);
}

/* Neutral-button hover: light tint + dark text.
   !important is required because the theme forces `.btn-default:hover {
   background: navy !important }` — only !important beats !important. Visual
   only; does not affect click/PHP behaviour.
   The :not() guards are essential — WHMCS also puts .btn-default as a BASE
   class on SOLID coloured buttons (My Services = .btn-default + .bg-color-gold);
   those keep their blue treatment above. Only genuinely neutral buttons match. */
#main-body .btn-default:not([class*="bg-color-"]):not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-danger):not(.btn-warning):hover,
#main-body .btn-secondary:not([class*="bg-color-"]):hover {
    background: rgba(6, 92, 254, .04) !important;
    border-color: var(--lg-primary, #065cfe) !important;
    color: var(--lg-heading, #17191c) !important;
}

/* Destructive — kept red */
#main-body .btn-danger {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

#main-body .btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

/* Warning — kept amber */
#main-body .btn-warning {
    background: #d97706;
    border-color: #d97706;
    color: #fff;
}

#main-body .btn-warning:hover {
    background: #b45309;
    border-color: #b45309;
    color: #fff;
}

/* --------------------------------------------------------------------------
   6. Forms
   -------------------------------------------------------------------------- */

#main-body .form-control,
#main-body .custom-select {
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-sm);
    padding: 11px 15px;
    height: auto;
    font-size: 14.5px;
    color: var(--la-navy-900);
    background-color: #fff;
    box-shadow: none;
    transition: border-color var(--la-ease), box-shadow var(--la-ease);
}

#main-body .form-control:focus,
#main-body .custom-select:focus {
    border-color: var(--la-blue);
    box-shadow: 0 0 0 3px rgba(7, 116, 255, .12);
    outline: none;
}

#main-body .form-control::placeholder {
    color: var(--la-muted);
    opacity: .6;
}

#main-body label,
#main-body .control-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--la-navy-900);
    margin-bottom: 7px;
}

#main-body .input-group-text {
    border: 1px solid var(--la-border);
    background: var(--la-blue-050);
    color: var(--la-muted);
    border-radius: var(--la-radius-sm);
}

/* --------------------------------------------------------------------------
   7. Tables
   -------------------------------------------------------------------------- */

#main-body .table {
    color: var(--la-navy-900);
    margin-bottom: 0;
}

#main-body .table thead th {
    background: none;
    border-bottom: 1px solid var(--la-border);
    border-top: none;
    font-size: var(--lg-text-size, 14px);
    font-weight: var(--lg-weight-medium, 500);
    letter-spacing: normal;
    text-transform: none;
    color: var(--la-muted);
    padding: 16px 24px;
    white-space: nowrap;
}

#main-body .table tbody td {
    border-top: 1px solid var(--la-border);
    padding: 15px 18px;
    vertical-align: middle;
    font-size: 14.5px;
}

#main-body .table tbody tr {
    transition: background var(--la-ease);
}

#main-body .table-hover tbody tr:hover {
    background: var(--la-blue-050);
}

#main-body .card > .table:first-child thead th,
#main-body .card > .table-responsive:first-child thead th {
    border-top: none;
}

/* --------------------------------------------------------------------------
   8. Alerts & badges
   -------------------------------------------------------------------------- */

#main-body .alert,
#main-body .panel,
#main-body .announcement {
    border-radius: var(--la-radius);
    padding: 18px 22px;
    font-size: 14.5px;
    box-shadow: var(--la-shadow);
    border: 1px solid var(--la-border);
    margin-bottom: 22px;
}

/* Dashboard welcome / notice blocks keep their own tint but pick up the
   same rounding and border as every other surface. */
#main-body .alert-info,
#main-body .alert-warning,
#main-body .alert-success,
#main-body .alert-danger {
    border-color: rgba(18, 24, 51, .08);
}

#main-body .alert h1,
#main-body .alert h2,
#main-body .alert h3,
#main-body .alert h4 {
    font-size: 17px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 6px;
}

#main-body .badge {
    border-radius: var(--la-radius-pill);
    padding: 5px 11px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
}

#main-body .label,
#main-body .status {
    border-radius: var(--la-radius-pill);
}

/* --------------------------------------------------------------------------
   9. Pagination & tabs
   -------------------------------------------------------------------------- */

#main-body .pagination .page-link {
    border: 1px solid var(--la-border);
    color: var(--la-navy-900);
    margin: 0 3px;
    border-radius: var(--la-radius-sm);
    padding: 8px 14px;
    font-size: 14px;
}

#main-body .pagination .page-item.active .page-link {
    background: var(--la-blue);
    border-color: var(--la-blue);
    color: #fff;
}

#main-body .nav-tabs {
    border-bottom: 1px solid var(--la-border);
}

#main-body .nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--la-muted);
    font-weight: 600;
    padding: 12px 18px;
    transition: color var(--la-ease), border-color var(--la-ease);
}

#main-body .nav-tabs .nav-link:hover {
    color: var(--la-navy-900);
}

/* The theme fills the active tab navy via a rule that out-muscles normal
   specificity here (module/late CSS), giving blue-text-on-navy = unreadable.
   !important forces Lagom's underline tab: transparent fill, blue underline,
   blue text on white. Verified live that !important on background wins. */
#main-body .nav-tabs .nav-link.active {
    color: var(--la-blue);
    border-color: transparent transparent var(--la-blue) !important;
    background: transparent !important;
}

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    #main-body {
        padding-top: 26px;
        padding-bottom: 40px;
    }

    #main-body .sidebar .card-sidebar {
        margin-bottom: 18px;
    }
}

@media (max-width: 767px) {
    #main-body h1 { font-size: 25px; }

    #main-body .tile {
        padding: 20px 18px 18px;
    }

    #main-body .tile .stat {
        font-size: 30px;
    }

    #main-body .tile > i {
        width: 36px;
        height: 36px;
        font-size: 15px;
        top: 15px;
        right: 15px;
    }

    #main-body .card .card-body,
    #main-body .card .card-header {
        padding: 16px;
    }

    #main-body .table thead th,
    #main-body .table tbody td {
        padding: 12px 14px;
    }
}

@media (max-width: 575px) {
    #main-body .tile .stat { font-size: 27px; }
    #main-body .tile .title { font-size: 11px; }
    #main-body .btn { padding: 9px 18px; }
}
/* --- "View More..." link in the Active Products/Services panel ---
   Core renders this as a bare <a class="btn-view-more"> in the card
   footer; theme.min.css only sets font-size, so it reads as grey text.
   Style it as a proper pill button. Change $blue (#0d6efd) below to
   match your brand if needed. */


/* --------------------------------------------------------------------------
   11. "View More..." — Active Products/Services panel
   --------------------------------------------------------------------------
   Core emits this as a bare anchor in the panel's card-footer
   (clientareahome.tpl -> {$item->getFooterHtml()}); js/whmcs.js reveals the
   next 8 rows on click and adds .disabled when the list is exhausted.
   MEASURED on dev.host4india.com:
     <a href="#" class="btn-view-more pull-right float-right disabled">
     computed: font-size 7.5px, colour #6c757d, no border, no padding.
   Three things to fix, all of them here:
     * theme.min.css sets font-size: .75rem — and this theme's root font-size
       is 10px, so that resolves to 7.5px, not 12px. Set an absolute px value.
     * .pull-right / .float-right are `float: right !important`, so centring
       the footer alone does nothing — the float must be cancelled with
       !important too.
     * With few enough services the link ships ALREADY .disabled, so on most
       accounts the disabled state is the only one ever seen. It gets the same
       button shape, just muted — not the bare grey text core leaves behind.
   -------------------------------------------------------------------------- */
#main-body div[menuitemname="Active Products/Services"] .card-footer:has(*) {
    text-align: center;
}

#main-body div[menuitemname="Active Products/Services"] .card-footer .clearfix {
    display: none;
}

#main-body div[menuitemname="Active Products/Services"] .btn-view-more {
    float: none !important;
    display: inline-block;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: var(--lg-weight-medium, 500);
    line-height: 1.4;
    color: var(--la-blue);
    background: #fff;
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-pill);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--la-ease), border-color var(--la-ease), color var(--la-ease);
}

#main-body div[menuitemname="Active Products/Services"] .btn-view-more:hover,
#main-body div[menuitemname="Active Products/Services"] .btn-view-more:focus {
    background: var(--la-blue-050);
    border-color: var(--la-blue);
    color: var(--la-blue);
    text-decoration: none;
}

#main-body div[menuitemname="Active Products/Services"] .btn-view-more:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(6, 92, 254, .12);
}

/* Exhausted state — same shape, muted. Also the initial state whenever the
   account has fewer services than the panel shows at once. */
#main-body div[menuitemname="Active Products/Services"] .btn-view-more.disabled,
#main-body div[menuitemname="Active Products/Services"] .btn-view-more.disabled:hover,
#main-body div[menuitemname="Active Products/Services"] .btn-view-more.disabled:focus {
    cursor: default;
    color: var(--la-muted);
    background: #fff;
    border-color: var(--la-border);
    opacity: .75;
    box-shadow: none;
    text-decoration: none;
}