/*
 * CloudyStation cysn_cart (child of standard_cart), loaded by standard_cart/common.tpl.
 * The --vl-* block below is inherited from nexus_cart's custom.css and only matters if cysn_cart is
 * ever re-parented onto nexus_cart (see theme.yaml for why it isn't).
 *
 * Custom CSS for Nexus Cart Orderform
 *
 * This file allows you to customize the theme colors and styles for the Nexus Cart orderform.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --vl-primary: var(--zinc-900); use --vl-primary: #your-color;
 * - You can also override any CSS properties here.
 *
 * Note: Changes here will apply to the orderform's Shadow DOM.
 */

/* Add you custom styles here */
:host, :root {
    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;

    /* Primary colors */
    --vl-primary: var(--primary);
    --vl-primary-lifted: var(--primary-lifted);
    --vl-primary-accented: var(--primary-accented);

    /* Secondary colors */
    --vl-secondary: var(--secondary);
    --vl-secondary-lifted: var(--secondary-lifted);
    --vl-secondary-accented: var(--secondary-accented);

    /* Success colors */
    --vl-success: var(--success);
    --vl-success-lifted: var(--success-lifted);
    --vl-success-accented: var(--success-accented);

    /* Info colors */
    --vl-info: var(--info);
    --vl-info-lifted: var(--info-lifted);
    --vl-info-accented: var(--info-accented);

    /* Notice colors */
    --vl-notice: var(--notice);
    --vl-notice-lifted: var(--notice-lifted);
    --vl-notice-accented: var(--notice-accented);

    /* Warning colors */
    --vl-warning: var(--warning);
    --vl-warning-lifted: var(--warning-lifted);
    --vl-warning-accented: var(--warning-accented);

    /* Error colors */
    --vl-error: var(--error);
    --vl-error-lifted: var(--error-lifted);
    --vl-error-accented: var(--error-accented);

    /* Grayscale colors */
    --vl-grayscale: var(--grayscale);
    --vl-grayscale-lifted: var(--grayscale-lifted);
    --vl-grayscale-accented: var(--grayscale-accented);

    /* Neutral colors */
    --vl-neutral: var(--neutral);
    --vl-neutral-lifted: var(--neutral-lifted);
    --vl-neutral-accented: var(--neutral-accented);

    /* Text neutral colors */
    --vl-text-inverted: var(--text-inverted);
    --vl-text-muted: var(--text-muted);
    --vl-text-lifted: var(--text-lifted);
    --vl-text-accented: var(--text-accented);
    --vl-text: var(--text);

    /* Border neutral colors */
    --vl-border-muted: var(--border-muted);
    --vl-border: var(--border);
    --vl-border-lifted: var(--border-lifted);
    --vl-border-accented: var(--border-accented);

    /* Background neutral colors */
    --vl-bg: var(--bg);
    --vl-bg-muted: var(--bg-muted);
    --vl-bg-lifted: var(--bg-lifted);
    --vl-bg-accented: var(--bg-accented);
    --vl-bg-inverted: var(--bg-inverted);

    /* Additional custom properties */
    /* Font Sizes */
    --vl-text-xs: var(--text-xs);
    --vl-text-sm: var(--text-sm);
    --vl-text-md: var(--text-md);
    --vl-text-lg: var(--text-lg);

    /* Spacing */
    --vl-outline-sm: var(--outline-sm);
    --vl-outline-md: var(--outline-md);
    --vl-outline-lg: var(--outline-lg);

    /* Rounding */
    --vl-rounding-sm: var(--rounding-sm);
    --vl-rounding-md: var(--rounding-md);
    --vl-rounding-lg: var(--rounding-lg);

    /* Other */
    --vl-letter-spacing: var(--letter-spacing);
    --vl-disabled-opacity: var(--disabled-opacity);
}

/* ==========================================================================
   Store (light DOM, standard_cart markup)
   ========================================================================== */
#order-standard_cart { font-family: var(--cs-font, inherit); }

.cs-store-head { margin: 4px 0 26px; }
.cs-store-head h1 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 8px; }
.cs-store-head p { color: var(--cs-muted); font-size: 1.02rem; margin: 0; max-width: 640px; }

.cs-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
}
/* Exactly four plans: 2x2 rather than three plus a lone fourth. A single plan shouldn't span the page. */
.cs-plans:has(> .cs-plan:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 575.98px) { .cs-plans:has(> .cs-plan:nth-child(4):last-child) { grid-template-columns: 1fr; } }
.cs-plans:has(> .cs-plan:only-child) { grid-template-columns: minmax(0, 420px); }
#order-standard_cart .cs-plans .product.cs-plan,
body #order-standard_cart .products .product.cs-plan {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 24px;
    background: var(--cs-surface, #fff);
    border: 1px solid var(--cs-border);
    border-radius: 18px;
    box-shadow: var(--cs-shadow);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#order-standard_cart .cs-plans .product.cs-plan:hover {
    border-color: var(--primary-200);
    box-shadow: var(--cs-shadow-lg);
    transform: translateY(-2px);
}
.cs-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cs-plan-top h3 { font-size: 1.15rem; margin: 0; }
.cs-plan-stock { font-size: .75rem; color: var(--cs-muted); background: var(--neutral-100); padding: 3px 8px; border-radius: 999px; }
#order-standard_cart .cs-plan-price {
    display: flex;
    flex-direction: column;
    margin: 18px 0 20px;
    padding: 0;
    text-align: left;
    font-size: .88rem;
    color: var(--cs-muted);
}
.cs-plan-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
#order-standard_cart .cs-plan-price .price {
    font-family: var(--cs-font-display);
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--cs-ink);
}
.cs-plan-setup { margin-top: 4px; }
#order-standard_cart .cs-plan .btn-order-now {
    padding: 10px 16px;
    font-size: .92rem;
    border-radius: 11px;
    margin: 0 0 20px;
}
#order-standard_cart .cs-plan-desc { padding: 0; margin: 0; font-size: .9rem; color: var(--cs-text-2); }
.cs-plan-features { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--cs-border); display: grid; gap: 9px; }
.cs-plan-features + .cs-plan-features { border-top: 0; padding-top: 9px; }
.cs-plan-features li { position: relative; padding-left: 26px; line-height: 1.45; }
.cs-plan-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--cs-brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23d0105a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M4.5 8.3l2.2 2.2 4.8-4.9'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* Cart sidebar (categories, actions, currency) */
body #order-standard_cart .cart-sidebar .card {
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow);
    overflow: hidden;
}
body #order-standard_cart .cart-sidebar .card-header { background: transparent; padding: 14px 18px; }
body #order-standard_cart .cart-sidebar .card-title {
    font-family: var(--cs-font);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cs-muted);
}
body #order-standard_cart .cart-sidebar .list-group-item { border: 0; padding: 9px 18px; color: var(--cs-text-2); font-size: .92rem; }
body #order-standard_cart .cart-sidebar .list-group-item:hover { background: var(--neutral-50); color: var(--cs-ink); }
body #order-standard_cart .cart-sidebar .list-group-item.active {
    background: var(--cs-brand-soft);
    color: var(--cs-brand-deep);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--cs-brand);
}

/* Configure product / domain steps */
body #order-standard_cart .header-lined h1 { font-family: var(--cs-font-display); font-weight: 800; letter-spacing: -0.03em; }
body #order-standard_cart .sub-heading { border-top-color: var(--cs-border); }
body #order-standard_cart .sub-heading span,
body #order-standard_cart .sub-heading-borderless span {
    background: var(--cs-bg);
    color: var(--cs-muted);
    font-family: var(--cs-font);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .78rem;
}
body #order-standard_cart .product-info {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow);
    padding: 18px 20px;
}
body #order-standard_cart .product-info .product-title { font-family: var(--cs-font-display); font-weight: 700; color: var(--cs-ink); }
body #order-standard_cart .field-container,
body #order-standard_cart .domain-selection-options .option {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
}
body #order-standard_cart .domain-selection-options .option-selected {
    border-color: var(--primary-300);
    background: var(--cs-brand-soft);
}
body #order-standard_cart .order-summary,
body #order-standard_cart .summary-container {
    border-radius: var(--cs-radius);
    overflow: hidden;
    border: 1px solid var(--cs-border);
    box-shadow: var(--cs-shadow);
}
body #order-standard_cart .order-summary { background: var(--cs-ink); }
body #order-standard_cart .order-summary h2 { font-family: var(--cs-font-display); font-weight: 700; color: #fff; }
body #order-standard_cart .summary-container { background: var(--cs-surface); border-color: transparent; }
body #order-standard_cart .total-due-today .amt { font-family: var(--cs-font-display); font-weight: 800; color: var(--cs-ink); }
body #order-standard_cart .btn-checkout,
body #order-standard_cart .text-right .btn-checkout,
body #order-standard_cart #btnCompleteProductConfig,
body #order-standard_cart #btnCompleteOrder {
    background: var(--cs-brand-strong);
    border-color: var(--cs-brand-strong);
    color: #fff;
    border-radius: 12px;
    font-weight: 600;
}
body #order-standard_cart .btn-checkout:hover,
body #order-standard_cart .text-right .btn-checkout:hover,
body #order-standard_cart .text-right .btn-checkout:focus,
body #order-standard_cart #btnCompleteProductConfig:hover,
body #order-standard_cart #btnCompleteOrder:hover { background: var(--cs-brand-deep); border-color: var(--cs-brand-deep); }
body #order-standard_cart .btn-success { background: var(--cs-brand-strong); border-color: var(--cs-brand-strong); }
body #order-standard_cart .btn-success:hover { background: var(--cs-brand-deep); border-color: var(--cs-brand-deep); }

/* Undo standard_cart's two-column product layout inside our cards */
body #order-standard_cart .products .product.cs-plan div.product-desc,
body #order-standard_cart .products .product.cs-plan .product-pricing {
    float: none;
    width: auto;
    text-align: left;
}
body #order-standard_cart .products .product.cs-plan div.product-desc { padding: 0; }
body #order-standard_cart .products .product.cs-plan ul.cs-plan-features { margin: 0; padding: 18px 0 0; }
body #order-standard_cart .products .product.cs-plan ul.cs-plan-features + ul.cs-plan-features { padding-top: 9px; }
body #order-standard_cart .products .product.cs-plan ul.cs-plan-features li { padding: 0 0 0 26px; }

/* Checkout details */
body #order-standard_cart .btn-info,
body #order-standard_cart .btn-already-registered {
    background: var(--cs-surface);
    color: var(--cs-brand-deep);
    border: 1px solid var(--primary-200);
    border-radius: var(--cs-radius-sm);
    font-weight: 600;
}
body #order-standard_cart .btn-info:hover,
body #order-standard_cart .btn-already-registered:hover { background: var(--cs-brand-soft); color: var(--cs-brand-deep); }

/* Mobile store */
.cs-cat-mobile { display: flex; gap: 10px; margin: 0 0 20px; }
.cs-cat-mobile select { flex: 1 1 auto; }
.cs-cat-mobile form { flex: 0 0 110px; }
/* nexus theme.css sets .cart-body { padding: 0 !important }, which on phones puts content flush
   against the screen edge (the row's -15px margin is no longer compensated). */
@media (max-width: 991.98px) {
    body #order-standard_cart .cart-body { padding: 0 15px !important; width: 100%; }
}

/* Configure step: the boxed field groups need inner padding, and the qty input sits inline with its label */
body #order-standard_cart .field-container,
body #order-standard_cart .product-configurable-options {
    padding: 18px 20px 4px;
    margin-bottom: 18px;
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
}
body #order-standard_cart .field-container label,
body #order-standard_cart .product-configurable-options .form-group > label { font-weight: 600; color: var(--cs-text); }
body #order-standard_cart .field-container .select-inline { max-width: 320px; }
body #order-standard_cart div:has(> .form-control-qty) { display: flex; align-items: center; gap: 12px; }
body #order-standard_cart .form-control-qty { width: 90px; flex: 0 0 90px; text-align: center; }
body #order-standard_cart .form-control-static-inline { margin: 0; padding: 0; color: var(--cs-text-2); }
body #order-standard_cart .field-help-text { display: block; margin-top: 6px; color: var(--cs-muted); font-size: .85rem; }
/* Option choices are bare <label>s after the heading <label for=...> */
body #order-standard_cart .product-configurable-options .form-group > label:not([for]) { font-weight: 400; color: var(--cs-text-2); }
body #order-standard_cart .products .product.cs-plan ul.cs-plan-features li.cs-plan-subhead {
    padding: 6px 0 0;
    font-weight: 700;
    color: var(--cs-ink);
}
.cs-plan-features li.cs-plan-subhead::before { display: none; }

/* Mobile cart steps (configure, cart, checkout). standard_cart's collapsed sidebar renders a "Choose Another
   Category" select for every sidebar panel (Categories, Actions, Choose Currency), stacked above the form.
   Mid-order that's noise (the store page has its own picker), so keep only the currency switcher. And the
   floated "Already Registered?" button squeezed checkout's intro text into a narrow column. */
@media (max-width: 991.98px) {
    body #order-standard_cart .sidebar-collapsed > .panel { display: none; }
    body #order-standard_cart .sidebar-collapsed > .form-inline { float: none !important; display: block; margin: 0 0 16px; }
    body #order-standard_cart .sidebar-collapsed > .form-inline select { width: 100%; }
    body #order-standard_cart .already-registered > .float-right { float: none !important; margin: 0 0 12px; }
    body #order-standard_cart .already-registered > .float-right .btn { width: 100%; }
}