/* ===========================================================================
   ipxcore // NOC orderform stylesheet
   - Imports the marketing-site NOC stylesheet for tokens / primitives
   - Adds cart-specific layout (.noc-cart, .noc-cart__sidebar, .noc-cart__body)
   - Re-skins legacy standard_cart classes (.cart-sidebar, .cart-body,
     .header-lined, .field-container, .sub-heading, .product-info, etc.)
   =========================================================================== */

@import url("https://ipxcore.com/index_files/noc.css");
@import url("https://ipxcore.com/clients/templates/ipxcore_noc/css/custom.css");

/* ── Cart layout grid ──────────────────────────────────────────── */
#order-ipxcore_noc {
    color: var(--noc-text);
    padding: 18px 0 64px;
}
.noc-cart {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    align-items: start;
}
.noc-cart__sidebar { position: relative; }
.noc-cart__body    { min-width: 0; }
@media (max-width: 900px) {
    .noc-cart { grid-template-columns: 1fr; }
}

/* Cart-page two-column layout
   The cart-shell wrapper uses our own .noc-cart-shell class (NOT Bootstrap's
   .row) so there's zero specificity battle with the framework. The legacy
   .cart-sidebar / .cart-body classes inside it are positioned by grid;
   any Bootstrap .row INSIDE the form keeps its stock behavior. */
.noc-cart-shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    align-items: start;
    margin: 0;
}
.noc-cart-shell > .cart-sidebar,
.noc-cart-shell > .cart-body {
    float: none;
    width: auto;
    padding: 0;
    min-width: 0;
}
@media (max-width: 900px) {
    .noc-cart-shell { grid-template-columns: 1fr; }
}

/* hide the mobile category selector on desktop */
.sidebar-collapsed { display: none; }
@media (max-width: 900px) {
    .sidebar-collapsed { display: block; margin-bottom: 14px; }
}

/* ── Cart sidebar panels (our markup) ──────────────────────────── */
.noc-cart-sidebar__panel {
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border);
    margin-bottom: 16px;
}
.noc-cart-sidebar__head {
    background: var(--noc-bg-deep);
    color: var(--noc-text);
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    padding: 11px 16px;
    border-bottom: 1px solid var(--noc-border);
}
.noc-cart-sidebar__head .badge {
    background: var(--noc-amber);
    color: var(--noc-bg);
    border-radius: 0;
    padding: 2px 6px;
    font-size: 9.5px;
    margin-left: 6px;
}
.noc-cart-sidebar__body {
    padding: 14px 16px;
    color: var(--noc-text-dim);
    font-size: 12.5px;
    line-height: 1.6;
}
.noc-cart-sidebar__list { list-style: none; padding: 0; margin: 0; }
.noc-cart-sidebar__list li { border-top: 1px solid var(--noc-border); }
.noc-cart-sidebar__list li:first-child { border-top: 0; }
.noc-cart-sidebar__list a,
.noc-cart-sidebar__static {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    color: var(--noc-text-dim);
    font-family: var(--font-mono);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    border-left: 2px solid transparent;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
    text-decoration: none;
}
.noc-cart-sidebar__list a:hover {
    color: var(--noc-phosphor-bright);
    background: rgba(140,186,83,0.05);
    border-left-color: var(--noc-phosphor);
}
.noc-cart-sidebar__list a.is-current {
    color: var(--noc-phosphor);
    background: rgba(140,186,83,0.07);
    border-left-color: var(--noc-phosphor);
}
.noc-cart-sidebar__list a .port { color: var(--noc-text-faint); width: 18px; flex: 0 0 18px; }
.noc-cart-sidebar__list a .lbl  { flex: 1; }
.noc-cart-sidebar__list a .badge {
    background: var(--noc-amber);
    color: var(--noc-bg);
    border-radius: 0;
    padding: 2px 6px;
    font-size: 9.5px;
}
.noc-cart-sidebar__foot {
    padding: 12px 16px;
    background: var(--noc-bg-deep);
    border-top: 1px solid var(--noc-border);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--noc-text-dim);
}

.noc-cart-sidebar__mobile {
    width: 100%;
    background: var(--noc-bg-deep);
    border: 1px solid var(--noc-border-bright);
    color: var(--noc-text);
    font-family: var(--font-mono);
    font-size: 13px;
    padding: 12px;
    border-radius: 0;
}

/* ── Headings the copied templates use ─────────────────────────── */
#order-ipxcore_noc .header-lined,
#order-ipxcore_noc .header-lined h1,
#order-ipxcore_noc .header-lined h2 {
    border: 0;
    padding: 0;
    margin: 0;
}
#order-ipxcore_noc .header-lined {
    border-bottom: 1px dashed var(--noc-border-bright);
    padding-bottom: 16px;
    margin-bottom: 26px;
    margin-top: 0;
}
#order-ipxcore_noc .header-lined h1,
#order-ipxcore_noc .header-lined h2,
#order-ipxcore_noc .font-size-36 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(28px, 4vw, 48px) !important;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    color: var(--noc-text);
}

#order-ipxcore_noc .sub-heading {
    margin: 28px 0 14px;
    border-bottom: 1px dashed var(--noc-border-bright);
    padding-bottom: 6px;
}
#order-ipxcore_noc .sub-heading > span,
#order-ipxcore_noc .sub-heading .primary-bg-color {
    background: transparent !important;
    color: var(--noc-phosphor) !important;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    padding: 0 !important;
    font-weight: 700;
}
#order-ipxcore_noc .sub-heading > span::before {
    content: "// ";
    color: var(--noc-text-faint);
}

/* ── Product info card on configureproduct page ────────────────── */
#order-ipxcore_noc .product-info {
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border);
    padding: 22px 24px;
    margin-bottom: 28px;
    color: var(--noc-text-dim);
    font-size: 13px;
    line-height: 1.7;
}
#order-ipxcore_noc .product-info .product-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    color: var(--noc-text);
    margin: 0 0 10px;
    line-height: 1;
}

#order-ipxcore_noc .field-container {
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border);
    padding: 18px 22px;
    margin-bottom: 22px;
}

/* ── Cart line-item rows (viewcart) ────────────────────────────── */
#order-ipxcore_noc .item {
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border);
    margin-bottom: 14px;
    padding: 18px 20px;
    transition: border-color 160ms ease;
}
#order-ipxcore_noc .item:hover { border-color: var(--noc-phosphor); }
#order-ipxcore_noc .item-title,
#order-ipxcore_noc .item-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--noc-text);
    line-height: 1.05;
}
#order-ipxcore_noc .item-cycle,
#order-ipxcore_noc .item-amt,
#order-ipxcore_noc .item-price {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--noc-text);
}
#order-ipxcore_noc .item-amt,
#order-ipxcore_noc .item-price { color: var(--noc-phosphor); font-weight: 600; }
#order-ipxcore_noc .item-domain { color: var(--noc-text-dim); font-family: var(--font-mono); font-size: 12px; }

#order-ipxcore_noc .order-summary,
#order-ipxcore_noc .summary,
#order-ipxcore_noc #orderSummary {
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border);
    padding: 20px 22px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--noc-text-dim);
}
#order-ipxcore_noc .order-summary h2,
#order-ipxcore_noc .order-summary h3 {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--noc-phosphor);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--noc-border);
}
#order-ipxcore_noc .order-summary .total {
    color: var(--noc-phosphor);
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    text-shadow: 0 0 18px var(--noc-phosphor-glow);
}

/* ── Promo code box, totals ────────────────────────────────────── */
#order-ipxcore_noc .totals,
#order-ipxcore_noc .totals-table {
    background: var(--noc-bg-deep);
    border: 1px solid var(--noc-border);
    color: var(--noc-text-dim);
}
#order-ipxcore_noc .totals .total,
#order-ipxcore_noc .totals-table .total td {
    color: var(--noc-phosphor);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
}

/* ── Domain options page  ──────────────────────────────────────── */
#order-ipxcore_noc .domain-options {
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border);
    padding: 22px 22px;
    margin-bottom: 22px;
}
#order-ipxcore_noc .domain-options input[type="radio"] + label,
#order-ipxcore_noc .domain-options input[type="checkbox"] + label {
    color: var(--noc-text);
    font-family: var(--font-mono);
}

/* ── Domain spinner / search results  ──────────────────────────── */
#order-ipxcore_noc .domain-checker-result,
#order-ipxcore_noc .domain-result-row {
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border);
    padding: 14px 18px;
    margin-bottom: 8px;
    font-family: var(--font-mono);
    font-size: 13px;
}
#order-ipxcore_noc .domain-result-row.available { border-color: var(--noc-phosphor); }
#order-ipxcore_noc .domain-result-row.unavailable { border-color: var(--noc-red); opacity: .65; }

/* ── Checkbox & radio look ─────────────────────────────────────── */
#order-ipxcore_noc input[type="checkbox"],
#order-ipxcore_noc input[type="radio"] {
    accent-color: var(--noc-phosphor);
    margin-right: 6px;
}

/* ── Configure-product cycle picker ────────────────────────────── */
#order-ipxcore_noc .select-inline { display: inline-block; width: auto; min-width: 240px; }

/* ── Validation error containers  ──────────────────────────────── */
#order-ipxcore_noc .alert-danger.w-hidden { display: none; }
#order-ipxcore_noc .alert-danger {
    background: rgba(232,71,71,0.06);
    border: 1px solid var(--noc-red);
    color: var(--noc-text);
    border-radius: 0;
}

/* ── Recommendations modal ─────────────────────────────────────── */
#order-ipxcore_noc + .modal .product-recommendation,
.modal .product-recommendation {
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border);
    color: var(--noc-text-dim);
}

/* ── Complete page  ───────────────────────────────────────────── */
#order-ipxcore_noc .order-complete,
#order-ipxcore_noc .complete-message {
    text-align: center;
    padding: 30px 0 20px;
}
#order-ipxcore_noc .order-complete i,
#order-ipxcore_noc .complete-message i {
    font-size: 64px;
    color: var(--noc-phosphor);
    text-shadow: 0 0 22px var(--noc-phosphor-glow);
    margin-bottom: 18px;
}

/* ── Hide original cart-body inline padding wrappers when nested ── */
#order-ipxcore_noc .secondary-cart-body { padding: 0; }

/* ── A few WHMCS-specific list group reskins inside cart ───────── */
#order-ipxcore_noc .list-group { background: transparent; border: 0; }
#order-ipxcore_noc .panel-heading h3 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; }