/*
 * ProStack Cart Orderform
 * Overrides nexus_cart variables with ProStack brand colours.
 * These --vl-* variables are consumed by the Shadow DOM cart components.
 */

@font-face {
    font-family: 'Sailec';
    src: url('/templates/prostack26/css/fonts/sailec.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Stolzl';
    src: url('/templates/prostack26/css/fonts/stotzl.woff2') format('woff2');
    /* Single font file covers any weight in this range — prevents browsers
       applying faux-bold when we request weight 500 for the H1 / price. */
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

:host, :root {
    --font-sans: 'Sailec', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-inter: 'Sailec', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Primary — ProStack navy */
    --vl-primary: #1c1f38;
    --vl-primary-lifted: #282a41;
    --vl-primary-accented: #14162b;

    /* Secondary */
    --vl-secondary: #4e62b7;
    --vl-secondary-lifted: #3d4fa3;
    --vl-secondary-accented: #354590;

    /* Info — ProStack blue */
    --vl-info: #4e62b7;
    --vl-info-lifted: #3d4fa3;
    --vl-info-accented: #354590;

    /* Success */
    --vl-success: #00a63e;
    --vl-success-lifted: #008236;
    --vl-success-accented: #016630;

    /* Notice */
    --vl-notice: #7f22fe;
    --vl-notice-lifted: #7008e7;
    --vl-notice-accented: #5d0ec0;

    /* Warning */
    --vl-warning: #f54a00;
    --vl-warning-lifted: #ca3500;
    --vl-warning-accented: #9f2d00;

    /* Error */
    --vl-error: #e7000b;
    --vl-error-lifted: #c10007;
    --vl-error-accented: #9f0712;

    /* Grayscale */
    --vl-grayscale: #1c1f38;
    --vl-grayscale-lifted: #282a41;
    --vl-grayscale-accented: #14162b;

    /* Neutral */
    --vl-neutral: #4a4a5a;
    --vl-neutral-lifted: #353858;
    --vl-neutral-accented: #282a41;

    /* Text */
    --vl-text: #1c1f38;
    --vl-text-lifted: #4a4a5a;
    --vl-text-accented: #282a41;
    --vl-text-muted: #727381;
    --vl-text-inverted: #ffffff;

    /* Borders */
    --vl-border: #e3e0de;
    --vl-border-muted: #ece9e5;
    --vl-border-lifted: #cbc8c4;
    --vl-border-accented: #9e9a92;

    /* Backgrounds — cream tones */
    --vl-bg: #fffaf5;
    --vl-bg-muted: #f9f4ef;
    --vl-bg-lifted: #f0ebe4;
    --vl-bg-accented: #e3e0de;
    --vl-bg-inverted: #1c1f38;

    /* Font sizes */
    --vl-text-xs: 0.625rem;
    --vl-text-sm: 0.75rem;
    --vl-text-md: 0.875rem;
    --vl-text-lg: 1rem;

    /* Rounding — sharp corners */
    --vl-rounding-sm: 0;
    --vl-rounding-md: 0;
    --vl-rounding-lg: 0;

    /* Other */
    --vl-letter-spacing: 0em;
    --vl-disabled-opacity: 25%;
}

/* Override variables on the Shadow DOM host element */
#nexus-root {
    --font-sans: 'Sailec', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-inter: 'Sailec', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-weight-semibold: 800;
    --font-weight-bold: 900;
    --vl-rounding-sm: 0;
    --vl-rounding-md: 0;
    --vl-rounding-lg: 0;
    --vl-bg: #ffffff;
    --vl-bg-lifted: #ffffff;
    --vl-bg-muted: #f9f4ef;
    --vl-bg-accented: #f9f4ef;
    --vl-border: #e3e0de;
    --vl-border-muted: #ebebed;
    --vl-text-muted: #727381;
    --radius-4xl: 0;
    --radius-xs: 0;
    --radius-sm: 0;
}

/* Force sharp corners on outer elements */
#order-standard_cart *,
#order-standard_cart *::before,
#order-standard_cart *::after {
    border-radius: 0 !important;
}

/* Cart layout — narrow sidebar, visible gap */
#order-standard_cart > .row:has(> .cart-sidebar) {
    gap: 0 30px;
}

#order-standard_cart .cart-sidebar {
    width: calc(20% - 15px) !important;
}

#order-standard_cart .cart-body {
    width: calc(80% - 15px) !important;
}

@media only screen and (max-width: 1199px) {
    #order-standard_cart > .row:has(> .cart-sidebar) {
        gap: 0;
    }
    #order-standard_cart .cart-body {
        width: 100% !important;
    }
}

/* Configure product page — secondary sidebar spacing */
#order-standard_cart .secondary-cart-body {
    width: calc(70% - 15px);
}

#order-standard_cart .secondary-cart-sidebar {
    width: calc(30% - 15px);
    margin-left: 30px;
}

@media only screen and (max-width: 1199px) {
    #order-standard_cart .secondary-cart-body {
        width: calc(72% - 15px);
    }
    #order-standard_cart .secondary-cart-sidebar {
        width: calc(28% - 15px);
    }
}

/* Find Domains button — coral. Scoped away from .prostack-products-page
   so it does not catch the currency-toggle <button type="submit"> pills. */
#order-standard_cart:not(.prostack-products-page) [class*="btn-primary"],
#order-standard_cart:not(.prostack-products-page) button[type="submit"] {
    background-color: #ff5b63 !important;
    border-color: #ff5b63 !important;
}

#order-standard_cart:not(.prostack-products-page) [class*="btn-primary"]:hover,
#order-standard_cart:not(.prostack-products-page) button[type="submit"]:hover {
    background-color: #e5505a !important;
    border-color: #e5505a !important;
}

/* View cart page — Shadow DOM overrides. Override --vl-bg and --vl-bg-lifted
   (both set to #ffffff in the base #nexus-root block above) so the cart's
   internal background matches the header cream-light instead of plain white.
   Domain register (data-app="domain-module") is unaffected and keeps its
   own styling. */
/* View cart page — Shadow DOM overrides.
   bg-default (--vl-bg) is used by both the main column and the cart
   item cards, so we keep it cream and inject a style into the Shadow
   DOM via JS (in viewcart.tpl) to make the item cards white. */
#nexus-root[data-app="cart-module"] {
    overflow: auto;
    --vl-bg: #fffaf5;
    --vl-bg-muted: #f9f4ef;
    --font-inter: 'Stolzl', 'Sailec', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* And the outer body on the view cart page — switch from the default
   cream (var(--bg-muted) = #f9f4ef) to cream-light so the whole page
   matches. */
body:has(#nexus-root[data-app="cart-module"]) {
    background-color: #fffaf5;
}
body:has(#nexus-root[data-app="cart-module"]) #main-body {
    background-color: #fffaf5;
}

/* Stock WHMCS cart templates (e.g. domaintransfer) use a legacy Bootstrap 3
   layout: a separate H1 column, a sidebar column, and a content column,
   relying on `pull-md-*` float utilities. Those classes don't exist in
   Bootstrap 4, and `.row` is a flex container that ignores floats, so the
   third column wraps to a new line below the sidebar — creating a big gap
   between the H1 and the form. Restore the intended float layout: H1 and
   body float left at 75% (stacked via `clear: left`), sidebar floats right
   at 25% and occupies whatever height it needs.

   Scoped with :has() so it only triggers on rows with 3 children (the legacy
   pattern). Our Shadow-DOM cart pages (domainregister, viewcart) have 1–2
   children and are unaffected. */
@media (min-width: 768px) {
    #order-standard_cart > .row:has(> *:nth-child(3)) {
        display: block;
    }
    #order-standard_cart > .row:has(> *:nth-child(3))::after {
        content: "";
        display: table;
        clear: both;
    }
    /* Header (child 1) and body (child 3) float left at 75%, stacked */
    #order-standard_cart > .row:has(> *:nth-child(3)) > *:nth-child(1),
    #order-standard_cart > .row:has(> *:nth-child(3)) > *:nth-child(3) {
        float: left;
        width: 75%;
        max-width: 75%;
        clear: left;
    }
    /* Sidebar (child 2) floats right at 25%, takes its natural height */
    #order-standard_cart > .row:has(> *:nth-child(3)) > *:nth-child(2) {
        float: right;
        width: 25%;
        max-width: 25%;
    }
}

/* ============================================================
 * Product Group Landing Page (cart.php?gid=N)
 * Scoped under .prostack-products-page so it does not affect
 * domainregister, viewcart, or other cart steps.
 * ============================================================ */

/* Body bg + sidebar hide for this page live in prostack26/css/custom.css
   (section 25, "CART PRODUCTS PAGE") so they sit alongside the equivalent
   .page-kb rules. Here we just style the wrapper itself. */
.prostack-products-page {
    background: #1c1f38;
    color: #ffffff;
    padding: 60px 0 100px;
    min-height: 80vh;
    font-family: 'Sailec', -apple-system, BlinkMacSystemFont, sans-serif;
}

.prostack-products-page .prostack-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Breadcrumb */
.prostack-products-page .prostack-breadcrumb {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 32px;
}
.prostack-products-page .prostack-breadcrumb a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
}
.prostack-products-page .prostack-breadcrumb a:hover {
    color: #ffffff;
}
.prostack-products-page .prostack-breadcrumb .sep {
    margin: 0 10px;
}
.prostack-products-page .prostack-breadcrumb .current {
    color: #ffffff;
    font-weight: 700;
}

/* Page header */
.prostack-products-page .prostack-page-header {
    margin-bottom: 28px;
}
.prostack-products-page .prostack-page-header h1 {
    font-family: 'Stolzl', 'Sailec', sans-serif;
    font-size: 44px;
    font-weight: 500;
    color: #ffffff;
    margin: 0 0 12px;
    line-height: 1.2;
    letter-spacing: -0.5px;
}
.prostack-products-page .prostack-page-header .tagline {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    margin: 0;
    max-width: 720px;
}

/* Currency toggle (pills) */
.prostack-products-page .prostack-currency-toggle {
    display: inline-flex;
    margin-bottom: 40px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 4px;
}
.prostack-products-page .prostack-currency-toggle form {
    margin: 0;
}
.prostack-products-page .prostack-currency-toggle .pill {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Sailec', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 22px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.prostack-products-page .prostack-currency-toggle .pill:hover {
    color: #ffffff;
}
.prostack-products-page .prostack-currency-toggle .pill:focus-visible {
    outline: 2px solid #7188ea;
    outline-offset: 2px;
}
.prostack-products-page .prostack-currency-toggle .pill.is-active {
    background: #4e62b7;
    color: #ffffff;
}

/* Alert overrides for navy bg */
.prostack-products-page .alert {
    margin-bottom: 24px;
}

/* Product card grid */
.prostack-products-page .prostack-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 80px;
}
@media (max-width: 992px) {
    .prostack-products-page .prostack-product-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Pricing card */
.prostack-products-page .prostack-product-card {
    background: #ffffff;
    color: #1c1f38;
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.04);
}
.prostack-products-page .prostack-product-card .cycle-pill {
    display: inline-block;
    align-self: flex-start;
    background: #ebeefc;
    color: #4e62b7;
    font-family: 'Sailec', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 6px 12px;
    margin-bottom: 16px;
}
.prostack-products-page .prostack-product-card .product-name {
    display: block;
    font-family: 'Sailec', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #4e62b7;
    text-decoration: none;
    margin-bottom: 8px;
}
.prostack-products-page .prostack-product-card .product-name:hover {
    text-decoration: underline;
}
.prostack-products-page .prostack-product-card .price {
    font-family: 'Stolzl', 'Sailec', sans-serif;
    margin-bottom: 24px;
}
.prostack-products-page .prostack-product-card .price .from {
    display: block;
    font-family: 'Sailec', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #727381;
    margin-bottom: 4px;
}
.prostack-products-page .prostack-product-card .price .amount {
    display: block;
    font-size: 48px;
    font-weight: 500;
    color: #1c1f38;
    line-height: 1;
    letter-spacing: -1px;
}
.prostack-products-page .prostack-product-card .price .setup {
    display: block;
    font-family: 'Sailec', sans-serif;
    font-size: 12px;
    color: #727381;
    margin-top: 6px;
}
.prostack-products-page .prostack-product-card .features {
    list-style: none;
    padding: 20px 0 0;
    margin: 0 0 24px;
    flex-grow: 1;
    border-top: 1px solid #e3e0de;
}
.prostack-products-page .prostack-product-card .features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: 'Sailec', sans-serif;
    font-size: 13px;
    color: #1c1f38;
    margin-bottom: 10px;
    line-height: 1.45;
}
.prostack-products-page .prostack-product-card .features li:last-child {
    margin-bottom: 0;
}
.prostack-products-page .prostack-product-card .features li i {
    color: #4e62b7;
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}
.prostack-products-page .prostack-product-card .features li .feature-value {
    font-weight: 500;
}
/* Description paragraph (if a product has featuresdesc set) — render as
   a block, not a flex row with an icon gap */
.prostack-products-page .prostack-product-card .features li.features-desc {
    display: block;
    color: #727381;
    font-size: 13px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e3e0de;
}
.prostack-products-page .prostack-product-card .btn-order {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #7188ea;
    color: #ffffff;
    font-family: 'Sailec', sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 14px 20px;
    text-decoration: none;
    border: 0;
    margin-bottom: 12px;
    transition: background 0.15s;
}
.prostack-products-page .prostack-product-card .btn-order:hover {
    background: #5b73d6;
    color: #ffffff;
}
.prostack-products-page .prostack-product-card .vat-note {
    font-family: 'Sailec', sans-serif;
    font-size: 12px;
    color: #727381;
    margin: 0;
    text-align: left;
}

/* Categories section */
.prostack-products-page .prostack-categories-section h2 {
    font-family: 'Stolzl', 'Sailec', sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: #ffffff;
    margin: 0 0 24px;
}
.prostack-products-page .prostack-categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 992px) {
    .prostack-products-page .prostack-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 576px) {
    .prostack-products-page .prostack-categories-grid {
        grid-template-columns: 1fr;
    }
}
.prostack-products-page .prostack-categories-grid .tile {
    background: #ffffff;
    color: #1c1f38;
    padding: 22px 22px 20px;
    text-decoration: none;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    column-gap: 14px;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: transform 0.15s, box-shadow 0.15s;
}
.prostack-products-page .prostack-categories-grid .tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.prostack-products-page .prostack-categories-grid .tile .tile-icon {
    font-size: 26px;
    color: #4e62b7;
}
.prostack-products-page .prostack-categories-grid .tile .tile-label {
    font-family: 'Sailec', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: #1c1f38;
}
.prostack-products-page .prostack-categories-grid .tile .arrow {
    color: #4e62b7;
    font-size: 13px;
}