/* =====================================================================
   Tremhost Cart — orderforms/tremhost_cart/css/custom.css
   Auto-loaded by standard_cart/common.tpl ({assetExists file="custom.css"}).
   Tokens come from the system theme's custom.css (--th-*). Only cart UI here.
   ===================================================================== */

/* ---------- layout ---------------------------------------------------- */
#order-standard_cart .th-cart__head { border: 0; padding: 0; margin: 0 0 20px; }
#order-standard_cart .th-cart__head h1 { font-size: 30px; margin: 0 0 4px; }
#order-standard_cart .th-cart__tagline { color: var(--th-body); font-size: 16px; margin: 0; }
#order-standard_cart .th-cart__body--full { width: 100%; flex: 0 0 100%; max-width: 100%; }
#order-standard_cart .th-cart__footnote { font-size: 13px; color: var(--th-muted); margin: 16px 0 0; }
#order-standard_cart .th-cart__reassure { font-size: 14px; color: var(--th-muted); margin: 8px 0 0; }

/* progress steps */
.th-steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 4px 0 20px; font-size: 13px; counter-reset: s; }
.th-steps li { flex: 1 1 0; padding: 8px 0 0; border-top: 3px solid var(--th-line); color: var(--th-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-steps li.is-done { border-top-color: var(--success); color: var(--th-ink); }
.th-steps li.is-current { border-top-color: var(--th-coral); color: var(--th-ink); font-weight: 600; }
.th-steps__n { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 999px; background: var(--th-soft); color: var(--th-muted); font-size: 11px; font-weight: 700; margin-right: 4px; }
.th-steps li.is-done .th-steps__n { background: #e6f6ec; color: #136b36; }
.th-steps li.is-current .th-steps__n { background: var(--th-coral); color: var(--th-navy); }
@media (max-width: 575.98px) { .th-steps__l { display: none; } .th-steps li.is-current .th-steps__l { display: inline; } }

/* ---------- plan cards -------------------------------------------------- */
body #order-standard_cart .th-plans .row { margin-left: -8px; margin-right: -8px; }
body #order-standard_cart .th-plan-col { padding: 0 8px; margin-bottom: 16px; display: flex; }
body #order-standard_cart .products .product.th-plan {
    width: 100%; margin: 0; padding: 0; border: 1px solid var(--th-line); border-radius: var(--th-radius-m);
    background: var(--bg); display: flex; flex-direction: column; position: relative;
}
body #order-standard_cart .products .product.th-plan.th-featured { border-color: var(--th-coral); box-shadow: var(--th-shadow-panel); }
body #order-standard_cart .products .product.th-plan.th-featured::before {
    content: attr(data-th-flag); position: absolute; top: -12px; left: 16px;
    background: var(--th-coral); color: var(--th-navy); font: 700 11px/22px var(--th-font-body); letter-spacing: .04em; text-transform: uppercase;
    padding: 0 10px; border-radius: 999px;
}
body #order-standard_cart .products .product.th-plan header.th-plan__head { background: transparent; border: 0; padding: 20px 20px 0; margin: 0; }
body #order-standard_cart .products .product.th-plan .th-plan__name { display: block; font-family: var(--th-font-display); font-size: 22px; font-weight: 700; color: var(--th-ink); letter-spacing: -0.02em; }
body #order-standard_cart .products .product.th-plan .th-plan__outcome { color: var(--th-body); font-size: 14px; margin: 6px 0 0; min-height: 2.6em; }
body #order-standard_cart .products .product.th-plan .th-plan__qty { font-size: 12px; color: var(--th-muted); }
body #order-standard_cart .products .product.th-plan .th-plan__price { padding: 14px 20px 0; text-align: left; }
body #order-standard_cart .products .product.th-plan .th-plan__price-note { display: block; font-size: 12px; color: var(--th-muted); }
body #order-standard_cart .products .product.th-plan .th-plan__amount { font-family: var(--th-font-display); font-size: 32px; font-weight: 700; color: var(--th-ink); letter-spacing: -0.03em; line-height: 1.1; }
body #order-standard_cart .products .product.th-plan .th-plan__amount small { font-size: 14px; font-weight: 500; color: var(--th-muted); letter-spacing: 0; }
body #order-standard_cart .products .product.th-plan .th-plan__billed { display: block; font-size: 13px; color: var(--th-muted); margin-top: 2px; }
body #order-standard_cart .products .product.th-plan .th-plan__setup { display: block; color: var(--th-muted); }
body #order-standard_cart .products .product.th-plan .btn-order-now.th-plan__cta { margin: 14px 20px 0; width: calc(100% - 40px); padding: 11px 16px; font-size: 15px; border-radius: var(--th-radius-s); }
body #order-standard_cart .products .product.th-plan .th-plan__desc { padding: 16px 20px 20px; font-size: 14px; color: var(--th-body); }
body #order-standard_cart .products .product.th-plan .th-plan__bestfor { margin: 0 0 10px; color: var(--th-ink); }
body #order-standard_cart .products .product.th-plan .th-plan__features { list-style: none; padding: 0; margin: 0; }
body #order-standard_cart .products .product.th-plan .th-plan__features li { padding: 4px 0 4px 22px; position: relative; border: 0; }
body #order-standard_cart .products .product.th-plan .th-plan__features li::before { content: ""; position: absolute; left: 0; top: 9px; width: 14px; height: 14px; border-radius: 999px; background: #e6f6ec; }
body #order-standard_cart .products .product.th-plan .th-plan__features li::after { content: ""; position: absolute; left: 4px; top: 13px; width: 6px; height: 3px; border-left: 2px solid #136b36; border-bottom: 2px solid #136b36; transform: rotate(-45deg); }
body #order-standard_cart .products .product.th-plan .th-plan__more { margin-top: 8px; }
body #order-standard_cart .products .product.th-plan .th-plan__more summary { cursor: pointer; color: var(--th-navy); font-weight: 600; font-size: 13px; }
body #order-standard_cart .products .product.th-plan .th-plan__more[open] summary { margin-bottom: 6px; }

/* ---------- configure step --------------------------------------------- */
#order-standard_cart .th-recap { border: 1px solid var(--th-line); border-radius: var(--th-radius-m); padding: 14px 16px; margin-bottom: 16px; }
#order-standard_cart .th-recap__name { font-family: var(--th-font-display); font-size: 20px; font-weight: 700; color: var(--th-ink); margin: 0 0 6px; }
#order-standard_cart .th-recap__outcome { font-family: var(--th-font-body); font-size: 14px; font-weight: 400; color: var(--th-body); }
#order-standard_cart .th-recap__features { columns: 2; column-gap: 24px; list-style: none; padding: 0; margin: 0; font-size: 13px; color: var(--th-body); }
#order-standard_cart .th-recap__features li { padding: 2px 0; break-inside: avoid; }
@media (max-width: 575.98px) { #order-standard_cart .th-recap__features { columns: 1; } }
#order-standard_cart #inputBillingcycle { font-size: 15px; }
#order-standard_cart .cycles .cycle { border-radius: var(--th-radius-s); }

/* MarketConnect promos: demoted, never pre-selected */
#order-standard_cart .th-mc-promos { border: 1px dashed var(--th-line); border-radius: var(--th-radius-m); padding: 10px 14px; margin: 12px 0; }
#order-standard_cart .th-mc-promos > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--th-muted); }
#order-standard_cart .th-mc-promos[open] > summary { margin-bottom: 10px; color: var(--th-ink); }
#order-standard_cart .th-mc-promos .addon-promo-container { box-shadow: none; border: 1px solid var(--th-line); border-radius: var(--th-radius-s); }
#order-standard_cart .th-mc-promos .mc-promo { margin-bottom: 8px; }
.th-checkout-extras { margin: 8px auto 24px; }

/* ---------- order summary & CTA ---------------------------------------- */
#order-standard_cart .order-summary { border: 1px solid var(--th-line); border-radius: var(--th-radius-m); background: var(--bg); }
#order-standard_cart .order-summary h2 { font-size: 18px; font-family: var(--th-font-display); color: var(--th-ink); }
#order-standard_cart .summary-totals .amt, #order-standard_cart .summary-totals .total-due-today .amt { color: var(--th-ink); font-family: var(--th-font-display); }
#order-standard_cart #btnCompleteProductConfig, #order-standard_cart #checkout, #order-standard_cart .btn-checkout, #order-standard_cart #btnCompleteOrder {
    background: var(--th-coral); border-color: var(--th-coral); color: var(--th-navy); font-weight: 700; font-size: 16px; padding: 12px 20px; border-radius: var(--th-radius-s);
}
#order-standard_cart #btnCompleteProductConfig:hover, #order-standard_cart #checkout:hover, #order-standard_cart .btn-checkout:hover, #order-standard_cart #btnCompleteOrder:hover { background: var(--th-coral-hover); border-color: var(--th-coral-hover); color: var(--th-navy); }
@media (min-width: 992px) { #order-standard_cart #scrollingPanelContainer.affix, #order-standard_cart .secondary-cart-sidebar.affix { top: calc(var(--th-header-h) + 12px); } }

/* review: items & promo */
#order-standard_cart .view-cart-items-header { background: var(--th-soft); border-radius: var(--th-radius-s); color: var(--th-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
#order-standard_cart .view-cart-items .item { border-bottom: 1px solid var(--th-line); }
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link { font-size: 13px; color: var(--th-muted); }
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active { color: var(--th-ink); }

/* checkout: sections, gateways */
#order-standard_cart .sub-heading span { background: var(--bg); color: var(--th-ink); font-family: var(--th-font-display); font-weight: 600; }
#order-standard_cart .sub-heading::before { border-top-color: var(--th-line); }
#order-standard_cart #paymentGatewaysContainer .radio, #order-standard_cart .payment-methods .radio, #order-standard_cart #paymentGatewaysContainer .form-check {
    border: 1px solid var(--th-line); border-radius: var(--th-radius-s); padding: 10px 12px 10px 36px; margin: 0 0 8px; display: block;
}
#order-standard_cart #paymentGatewaysContainer .radio:has(input:checked), #order-standard_cart #paymentGatewaysContainer .form-check:has(input:checked) { border-color: var(--th-navy); background: var(--th-soft); }
#order-standard_cart .already-registered .btn-info { background: var(--th-navy); border-color: var(--th-navy); }

/* ---------- category sidebar ------------------------------------------ */
#order-standard_cart .cart-sidebar .panel-sidebar .list-group-item { font-size: 14px; padding: 8px 14px; color: var(--th-ink); }
#order-standard_cart .cart-sidebar .panel-sidebar .list-group-item.active { background: var(--th-soft); color: var(--th-navy); border-left: 3px solid var(--th-coral); font-weight: 600; }
#order-standard_cart .sidebar-collapsed .panel { border: 1px solid var(--th-line); border-radius: var(--th-radius-s); }
@media (max-width: 767.98px) {
    /* mobile: the plan cards come first; category selector sits below them (AUDIT B-08) */
    #order-standard_cart.th-cart--products .cart-body { display: flex; flex-direction: column; }
    #order-standard_cart.th-cart--products .sidebar-collapsed { order: 10; margin-top: 16px; }
    #order-standard_cart.th-cart--products .th-cart__reassure { order: 9; }
    #order-standard_cart .th-cart__head h1 { font-size: 24px; }
}

/* ---------- configure / domain steps: no category sidebar (focus) ------- */
body.th-in-cart #order-standard_cart:has(#frmConfigureProduct) .cart-sidebar,
body.th-in-cart #order-standard_cart:has(#frmConfigureProduct) .sidebar-collapsed,
body.th-in-cart #order-standard_cart:has(#frmProductDomain) .cart-sidebar,
body.th-in-cart #order-standard_cart:has(#frmProductDomain) .sidebar-collapsed { display: none; }
body.th-in-cart #order-standard_cart:has(#frmConfigureProduct) .cart-body,
body.th-in-cart #order-standard_cart:has(#frmProductDomain) .cart-body { width: 100%; flex: 0 0 100%; max-width: 100%; }
#order-standard_cart .th-cart__context { font-size: 14px; color: var(--th-muted); margin: 0 0 8px; }

/* ---------- assurance block under the order summary (4 Nov 2026) ------ */
#order-standard_cart .th-assurance { margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--th-line); }
#order-standard_cart .th-assurance__item { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--th-body); }
#order-standard_cart .th-assurance__item:last-child { margin-bottom: 0; }
#order-standard_cart .th-assurance__item i { flex: 0 0 auto; margin-top: 2px; color: var(--th-coral); }
#order-standard_cart .th-assurance__item a { color: var(--th-ink); text-decoration: underline; }

/* 4 Nov 2026 — B-5: plan card on the domain step, option hints, payment logos under the order summary */
#order-standard_cart .th-plancard { margin: 0 0 22px; padding: 18px 20px; border: 1px solid var(--th-line); border-radius: 14px; background: #fff; }
#order-standard_cart .th-plancard__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 8px; }
#order-standard_cart .th-plancard__name { margin: 0; font-size: 20px; font-weight: 700; color: var(--th-navy, #13223a); }
#order-standard_cart .th-plancard__group { font-size: 13px; color: var(--th-muted, #5b6478); text-transform: uppercase; letter-spacing: .04em; }
#order-standard_cart .th-plancard__cycles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
#order-standard_cart .th-plancard__cycles li { font-size: 15px; color: var(--th-body); }
#order-standard_cart .th-plancard__price { font-weight: 700; font-size: 18px; color: var(--th-navy, #13223a); }
#order-standard_cart .th-plancard__setup { font-size: 13px; color: var(--th-muted, #5b6478); }
#order-standard_cart .th-plancard__note { margin: 10px 0 0; font-size: 13px; color: var(--th-muted, #5b6478); }
#order-standard_cart .th-cart__lead { margin: -6px 0 16px; font-size: 15px; color: var(--th-muted, #5b6478); }
#order-standard_cart .domain-selection-options .option label { font-weight: 600; }
#order-standard_cart .th-opt__hint { display: block; margin-left: 24px; font-size: 13px; font-weight: 400; color: var(--th-muted, #5b6478); }
#order-standard_cart .th-assurance--config { margin: 18px 10px 0; }
#order-standard_cart .th-paylogos { list-style: none; margin: 0 0 12px 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
#order-standard_cart .th-paylogos li { display: inline-flex; align-items: center; padding: 3px 6px; border: 1px solid var(--th-line); border-radius: 6px; background: #fff; }
#order-standard_cart .th-paylogos img { display: block; width: 36px; height: 18px; object-fit: contain; }