/*
 * Plugmind Calm's cart: WHMCS's standard_cart in Calm's look. It's a child of standard_cart (theme.yaml), so every page
 * and script is standard_cart's own and WHMCS's updates keep reaching it; this file is all it adds. Colours come from
 * the Plugmind Calm theme's --calm-* variables (with its defaults when the client area uses another theme): the accent
 * for the actions that move an order on, white cards on the soft background, and the dark colour for the order summary.
 *
 * The Plugmind Calm addon adds this file in the page head (hooks.php), because standard_cart's pages include its
 * common.tpl by a fixed path; standard_cart's own CSS comes later, in the page. So every rule here is nested in html,
 * which makes it a little more specific than standard_cart's matching rule.
 */

html {
    #order-standard_cart, .domain-checker-container, .spotlight-tlds, .suggested-domains {
        --cart-accent: var(--calm-accent, #2f6fed);
        --cart-accent-text: var(--calm-accent-text, #ffffff);
        --cart-accent-hover: var(--calm-accent-hover, #2961d0);
        --cart-ink: var(--calm-accent-ink, #2f6fed);
        --cart-soft: color-mix(in srgb, var(--cart-accent) 8%, var(--cart-surface));
        --cart-tint: color-mix(in srgb, var(--cart-accent) 14%, var(--cart-surface));
        --cart-dark: var(--calm-dark, #1b2433);
        --cart-dark-text: var(--calm-dark-text, #ffffff);
        --cart-surface: var(--calm-surface, #ffffff);
        --cart-bg: var(--calm-bg, #f6f7fb);
        --cart-text: var(--calm-text, #161e28);
        --cart-muted: var(--calm-muted, #5d6779);
        --cart-line: var(--calm-border, #e5e8ee);
        --cart-radius: var(--calm-radius, 14px);
        --cart-radius-sm: var(--calm-radius-sm, 10px);
        --cart-shadow: var(--calm-shadow, 0 1px 2px rgb(16 24 40 / .04), 0 1px 3px rgb(16 24 40 / .06));
        --cart-focus: 0 0 0 3px color-mix(in srgb, var(--cart-accent) 35%, transparent);
    }

    /* ---------- Text, headings and form fields ---------- */
    #order-standard_cart { color: var(--cart-text); font-size: 15px; }
    #order-standard_cart .sub-heading, #order-standard_cart .sub-heading-borderless { border-top-color: var(--cart-line); }
    #order-standard_cart .sub-heading span, #order-standard_cart .sub-heading-borderless span {
        background: var(--cart-bg);
        color: var(--cart-text);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: .01em;
    }
    #order-standard_cart .form-control, #order-standard_cart .custom-select { border-color: var(--cart-line); border-radius: var(--cart-radius-sm); }
    #order-standard_cart .form-control:focus, #order-standard_cart .custom-select:focus { border-color: var(--cart-accent); box-shadow: var(--cart-focus); }
    #order-standard_cart .form-control[readonly] { background-color: var(--cart-bg); }
    #order-standard_cart label { color: var(--cart-text); font-weight: 600; }
    /* Links in the page (the sidebar keeps the theme's own colours, and its highlighted item stays readable) */
    #order-standard_cart .cart-body a:not(.btn) { color: var(--cart-ink); }
    #order-standard_cart :is(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--cart-ink); outline-offset: 2px; }
    #order-standard_cart .text-muted, #order-standard_cart small { color: var(--cart-muted); }

    /* ---------- Buttons: the accent moves the order on; everything else is quiet ---------- */
    #order-standard_cart .btn { border-radius: var(--cart-radius-sm); font-weight: 600; }
    #order-standard_cart :is(.btn-primary, .btn-success, .btn-order-now, .btn-checkout),
    .domain-checker-container .btn-primary, .spotlight-tlds .btn:not(.domain-contact-support), .suggested-domains .btn:not(.domain-contact-support) {
        background-color: var(--cart-accent);
        border-color: var(--cart-accent);
        color: var(--cart-accent-text);
    }
    #order-standard_cart :is(.btn-primary, .btn-success, .btn-order-now, .btn-checkout):is(:hover, :focus, :active),
    .domain-checker-container .btn-primary:is(:hover, :focus), .spotlight-tlds .btn:not(.domain-contact-support):hover, .suggested-domains .btn:not(.domain-contact-support):hover {
        background-color: var(--cart-accent-hover);
        border-color: var(--cart-accent-hover);
        color: var(--cart-accent-text);
    }
    #order-standard_cart .btn-default, #order-standard_cart .empty-cart .btn {
        background-color: var(--cart-surface);
        border: 1px solid var(--cart-line);
        color: var(--cart-text);
    }
    #order-standard_cart .btn-default:hover, #order-standard_cart .empty-cart .btn:hover { background-color: var(--cart-soft); border-color: var(--cart-accent); color: var(--cart-ink); }

    /* ---------- Products: white cards, the price and "Order now" at the foot ---------- */
    #order-standard_cart .products .product {
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
        padding: 0;
        overflow: hidden;
        background: var(--cart-surface);
        border: 1px solid var(--cart-line);
        border-radius: var(--cart-radius);
        box-shadow: var(--cart-shadow);
    }
    #order-standard_cart .products .product header {
        margin: 0;
        padding: 18px 20px 6px;
        background: transparent;
        border: 0;
        color: var(--cart-text);
        font-size: 18px;
        font-weight: 700;
    }
    #order-standard_cart .products .product header .qty { color: var(--cart-muted); font-size: 13px; font-weight: 600; }
    #order-standard_cart .products .product .product-desc { padding: 0 20px 12px; color: var(--cart-muted); font-size: 14px; line-height: 1.55; }
    #order-standard_cart .products .product .product-desc .feature-value { color: var(--cart-text); font-weight: 600; }
    #order-standard_cart .products .product footer, #order-standard_cart .products .product .product-pricing {
        color: var(--cart-text);
    }
    #order-standard_cart .products .product .product-pricing .price { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
    #order-standard_cart .products .product .btn-order-now { padding: 8px 16px; font-size: 14px; }

    /* ---------- Configuring a product ---------- */
    #order-standard_cart .product-info { padding: 16px 20px; background: var(--cart-surface); border: 1px solid var(--cart-line); border-radius: var(--cart-radius); }
    #order-standard_cart .product-info .product-title { font-weight: 700; }
    #order-standard_cart .panel-addon { border-color: var(--cart-line); border-radius: var(--cart-radius-sm); overflow: hidden; }
    #order-standard_cart .panel-addon-selected { border-color: var(--cart-accent); }
    #order-standard_cart .panel-addon .panel-price { background-color: var(--cart-soft); color: var(--cart-text); }
    #order-standard_cart .panel-addon .panel-add, #order-standard_cart .panel-addon-selected .panel-add { background-color: var(--cart-accent); color: var(--cart-accent-text); }
    #order-standard_cart .domain-selection-options .option { background: var(--cart-surface); border: 1px solid var(--cart-line); border-radius: var(--cart-radius-sm); }
    #order-standard_cart .domain-selection-options .option-selected { background: var(--cart-soft); border-color: var(--cart-accent); }

    /* ---------- The order summary, in the dark colour like Calm's header ---------- */
    #order-standard_cart .order-summary {
        overflow: hidden;
        background-color: var(--cart-dark);
        border: 0;
        border-radius: var(--cart-radius);
        box-shadow: var(--cart-shadow);
    }
    #order-standard_cart .order-summary h2 { padding: 14px 18px; color: var(--cart-dark-text); font-size: 17px; font-weight: 700; text-align: left; }
    #order-standard_cart .summary-container { background: var(--cart-surface); color: var(--cart-text); border-radius: 0 0 var(--cart-radius) var(--cart-radius); }
    #order-standard_cart .order-summary .loader { color: var(--cart-muted); }
    #order-standard_cart .summary-container .total-due-today .amt { color: var(--cart-text); font-weight: 700; }

    /* ---------- The basket ---------- */
    #order-standard_cart .view-cart-items-header {
        background-color: var(--cart-bg);
        border: 1px solid var(--cart-line);
        border-bottom: 0;
        border-radius: var(--cart-radius) var(--cart-radius) 0 0;
        color: var(--cart-muted);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
    }
    #order-standard_cart .view-cart-items {
        background: var(--cart-surface);
        border: 1px solid var(--cart-line);
        border-radius: 0 0 var(--cart-radius) var(--cart-radius);
    }
    #order-standard_cart .view-cart-items .item { border-color: var(--cart-line); }
    #order-standard_cart .view-cart-items .item-title { color: var(--cart-text); font-weight: 600; }
    #order-standard_cart .view-cart-items .item-domain, #order-standard_cart .view-cart-items .item-group { color: var(--cart-muted); }
    #order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"], #order-standard_cart .view-cart-tabs .tab-content { background-color: var(--cart-surface); }
    #order-standard_cart .view-cart-tabs .tab-content { border: 1px solid var(--cart-line); border-radius: 0 var(--cart-radius-sm) var(--cart-radius-sm) var(--cart-radius-sm); }
    #order-standard_cart .view-cart-gateway-checkout { background-color: var(--cart-soft); border-radius: var(--cart-radius-sm); }

    /* ---------- Checkout ---------- */
    #order-standard_cart .cc-input-container { background-color: var(--cart-surface); border-color: var(--cart-line); border-radius: var(--cart-radius); }
    #order-standard_cart .account-select-container .account, #order-standard_cart .account { border-color: var(--cart-line); }
    #order-standard_cart .account.active, #order-standard_cart .account-select-container .account.active { background-color: var(--cart-soft); }
    #order-standard_cart .alert-success { background-color: var(--cart-soft); border-color: color-mix(in srgb, var(--cart-accent) 30%, var(--cart-surface)); border-radius: var(--cart-radius-sm); color: var(--cart-text); }

    /* The tick boxes and radio buttons (iCheck's blue sprite), drawn in the accent */
    .icheckbox_square-blue, .iradio_square-blue {
        position: relative;
        width: 20px;
        height: 20px;
        background: var(--cart-surface, #fff);
        border: 2px solid color-mix(in srgb, var(--calm-muted, #5d6779) 60%, #fff);
        border-radius: 6px;
        vertical-align: middle;
    }
    .iradio_square-blue { border-radius: 50%; }
    .icheckbox_square-blue.hover, .iradio_square-blue.hover { border-color: var(--calm-accent, #2f6fed); }
    .icheckbox_square-blue.checked, .iradio_square-blue.checked { background: var(--calm-accent, #2f6fed); border-color: var(--calm-accent, #2f6fed); }
    .icheckbox_square-blue.checked::after {
        content: "";
        position: absolute;
        left: 5px;
        top: 1px;
        width: 6px;
        height: 11px;
        border: solid var(--calm-accent-text, #fff);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }
    .iradio_square-blue.checked::after {
        content: "";
        position: absolute;
        inset: 4px;
        background: var(--calm-accent-text, #fff);
        border-radius: 50%;
    }
    .icheckbox_square-blue.disabled, .iradio_square-blue.disabled { opacity: .5; }
    .icheckbox_square-blue.focus, .iradio_square-blue.focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--calm-accent, #2f6fed) 35%, transparent); }

    /* ---------- Domains: the search on the dark colour, with the accent's light ---------- */
    .domain-checker-container {
        background: linear-gradient(135deg, var(--cart-dark), color-mix(in srgb, var(--cart-dark) 70%, var(--cart-accent))) !important;
        border-radius: var(--cart-radius);
    }
    /* WHMCS's yellow globe doesn't suit the dark panel; the search stands on its own */
    .domain-checker-container .domain-checker-bg { background-image: none; }
    #order-standard_cart .domain-promo-box .text-warning { color: var(--cart-ink); }
    .domain-promo-box { border-color: var(--calm-border, #e5e8ee); border-radius: var(--calm-radius, 14px); background: var(--calm-surface, #fff); }
    #order-standard_cart .domain-promo-box .btn-warning { background-color: var(--cart-accent); border-color: var(--cart-accent); color: var(--cart-accent-text); }
    .domain-pricing .tld-pricing-header .col-sm-4 { background-color: var(--cart-bg, #f6f7fb); border-bottom-color: var(--calm-accent, #2f6fed); }
    .domain-pricing .tld-pricing-header div:nth-child(odd) { border-color: color-mix(in srgb, var(--calm-accent, #2f6fed) 60%, #fff); }
    .domain-pricing .two-row-center { border-right-color: var(--calm-border, #e5e8ee); }
    .spotlight-tlds { background-color: var(--cart-bg); border-radius: var(--cart-radius); }
    .spotlight-tld { color: var(--cart-text); background: var(--cart-surface); border-radius: var(--cart-radius-sm); }

    /* ---------- MarketConnect promotions ---------- */
    #order-standard_cart .mc-promo { border-radius: var(--cart-radius); overflow: hidden; }
    #order-standard_cart .mc-promo .body { background-color: var(--cart-surface); }

    /* ---------- Basket and checkout: the order, the full width, without the category list beside it ---------- */
    .calm-page-viewcart #order-standard_cart .cart-sidebar { display: none; }
    .calm-page-viewcart #order-standard_cart .cart-body { float: none; width: 100%; max-width: none; padding-left: 0; }

    /* "Already registered?" and WHMCS's other info buttons: the accent, outlined, rather than Bootstrap's teal */
    #order-standard_cart .btn-info {
        background: var(--cart-surface);
        border: 1px solid var(--cart-ink);
        border-radius: var(--cart-radius-sm);
        color: var(--cart-ink);
        font-weight: 600;
    }
    #order-standard_cart .btn-info:hover, #order-standard_cart .btn-info:focus { background: var(--cart-soft); color: var(--cart-ink); }

    /* The fraud notice under the order button: a quiet note, not a warning */
    #order-standard_cart .checkout-security-msg {
        background: var(--cart-bg);
        border: 1px solid var(--cart-line);
        border-radius: var(--cart-radius-sm);
        color: var(--cart-muted);
        font-size: 13px;
    }

    /* The mailing list switch: the accent for Yes */
    #order-standard_cart .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
    #order-standard_cart .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary { background: var(--cart-accent); color: var(--cart-accent-text); }

    @media (prefers-reduced-motion: reduce) {
        #order-standard_cart *, .domain-checker-container * { transition: none !important; animation: none !important; }
    }
}