/* RESELLERAPP-ORDER — brands WHMCS's Standard Cart to match the portal.
   Loaded from the theme header, so it wraps every order/cart/checkout page.
   Scoped to #order-standard_cart (note the UNDERSCORE — that is the real
   wrapper id WHMCS emits). */

#order-standard_cart { color: var(--ra-ink); }

/* product cards */
#order-standard_cart .products .product {
    background: var(--ra-card); border: 1px solid var(--ra-line);
    border-radius: 12px; box-shadow: var(--ra-shadow);
}
#order-standard_cart .products .product h3,
#order-standard_cart .product-desc { color: var(--ra-ink); }
#order-standard_cart .products .product .price { color: var(--ra-brand); font-weight: 700; }
#order-standard_cart .products > .row {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px; margin: 0;
}
#order-standard_cart .products > .row > div { width: 100%; max-width: 100%; flex: none; padding: 0; }

/* buttons — stock cart ships green; match the portal instead */
#order-standard_cart .btn-primary,
#order-standard_cart .btn-success,
#order-standard_cart .btn-info,
#order-standard_cart #agreeConsentBtn {
    background: var(--ra-brand) !important; border-color: var(--ra-brand) !important;
    color: #fff !important; border-radius: 9px; font-weight: 600;
}
#order-standard_cart .btn-primary:hover,
#order-standard_cart .btn-success:hover,
#order-standard_cart .btn-info:hover {
    background: var(--ra-brand-dark) !important; border-color: var(--ra-brand-dark) !important;
}
#order-standard_cart .btn-default {
    background: var(--ra-card) !important; border: 1px solid var(--ra-line) !important;
    color: var(--ra-ink) !important; border-radius: 9px;
}

/* summary + panels */
#order-standard_cart .order-summary {
    background: var(--ra-card); border: 1px solid var(--ra-line);
    border-radius: 14px !important; overflow: hidden; box-shadow: var(--ra-shadow);
}
#order-standard_cart .order-summary h2 {
    background: linear-gradient(135deg, var(--ra-brand), var(--ra-brand-dark));
    color: #fff; border-radius: 0; margin: 0; padding: 14px 18px; font-size: 16px;
}
#order-standard_cart .view-cart-items-header {
    background: linear-gradient(135deg, var(--ra-brand), var(--ra-brand-dark)) !important;
    color: #fff !important;
}
#order-standard_cart .header-lined,
#order-standard_cart .cart-body h2 { color: var(--ra-ink); }
#order-standard_cart .panel, #order-standard_cart .card,
#order-standard_cart .item, #order-standard_cart .tab-content,
#order-standard_cart #creditCardInputFields, #order-standard_cart .product-info {
    background: var(--ra-card) !important; border-color: var(--ra-line) !important; color: var(--ra-ink);
}

/* fields */
#order-standard_cart .form-control, #order-standard_cart select,
#order-standard_cart input[type=text], #order-standard_cart input[type=email],
#order-standard_cart input[type=password], #order-standard_cart textarea {
    background: var(--ra-card); border: 1px solid var(--ra-line);
    color: var(--ra-ink); border-radius: 9px;
}

/* the sidebar rail is hard-coded to 25% + 2-up products in the stock CSS */
#order-standard_cart .cart-sidebar { width: 250px !important; float: none !important; }
#order-standard_cart .cart-body { flex: 1 1 auto; }
@media (min-width: 992px) {
    #order-standard_cart > .row:has(.products),
    #order-standard_cart > .row:has(.cart-sidebar) { display: flex; gap: 20px; }
}
/* END RESELLERAPP-ORDER */



/* --- comparison listing (pure_comparison): light touch only ---------------
   The stock design is good; it only needs the cards laid out in a grid and
   the buttons brought onto the portal's blue. The real structure is
   #products > ul > li — grid must go on the UL, not on #products. */
#order-pure_comparison { color: var(--ra-ink); }
#order-pure_comparison #headline { font-size: 21px; font-weight: 700; color: var(--ra-ink); }

#order-pure_comparison #products > ul {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px; list-style: none; padding: 0; margin: 0;
}
#order-pure_comparison #products > ul > li {
    width: 100% !important; float: none !important; margin: 0 !important;
}
#order-pure_comparison .price-table { height: 100%; border-radius: 12px; overflow: hidden; }

/* buttons on brand — the stock gradient is the only real clash */
#order-pure_comparison .order-button a,
#order-pure_comparison .order-button .btn {
    background: var(--ra-brand) !important; background-image: none !important;
    border: 0 !important; color: #fff !important; border-radius: 9px !important;
    text-shadow: none !important; box-shadow: none !important;
}
#order-pure_comparison .order-button a:hover,
#order-pure_comparison .order-button .btn:hover { background: var(--ra-brand-dark) !important; }

/* RESELLERAPP-DARK-ORDER-CONFIGURE
   Edwin 2026-08-18: on the Configure page (cart.php?a=confproduct) the Order
   Summary body was invisible in dark mode — standard_cart's .summary-container
   paints background:#f8f8f8 with NO colour, so the theme's near-white ink
   landed on a near-white card. Same root cause as the login-page fix
   (RESELLERAPP-DARK-STOCK): a stock light background kept while only the text
   colour is themed. The .sub-heading "Additional Information" chip has the
   same shape (white span masking the rule line). Light mode is untouched —
   everything is scoped to the dark attribute, which the pre-paint script
   always stamps (saved pref OR system dark). */
html[data-ra-theme="dark"] #order-standard_cart .summary-container {
    background-color: var(--ra-card);
    color: var(--ra-ink);
}
html[data-ra-theme="dark"] #order-standard_cart .order-summary {
    background-color: var(--ra-card);
    border-bottom-color: var(--ra-line);
}
html[data-ra-theme="dark"] #order-standard_cart .order-summary .summary-totals,
html[data-ra-theme="dark"] #order-standard_cart .order-summary .subtotal {
    border-color: var(--ra-line);
}
html[data-ra-theme="dark"] #order-standard_cart .sub-heading {
    border-top-color: var(--ra-line);
}
html[data-ra-theme="dark"] #order-standard_cart .sub-heading span,
html[data-ra-theme="dark"] #order-standard_cart .sub-heading-borderless span {
    background: var(--ra-bg);
    color: var(--ra-ink);
}
/* Field labels on the same page sit dim on the dark ground */
html[data-ra-theme="dark"] #order-standard_cart label,
html[data-ra-theme="dark"] #order-standard_cart .field-description {
    color: var(--ra-ink);
}
html[data-ra-theme="dark"] #order-standard_cart .field-description small,
html[data-ra-theme="dark"] #order-standard_cart small {
    color: var(--ra-muted);
}
/* END RESELLERAPP-DARK-ORDER-CONFIGURE */

/* RESELLERAPP-DARK-CART
   Benjamin 2026-08-18: on cart.php?a=view in dark mode the Categories sidebar
   and the "Apply Promo Code" tab stayed white. Cause: standard_cart's
   all.min.css scopes its rules under #order-standard_cart (an ID), which
   out-specifies the theme's global html[dark] .card rules — so every dark
   override for the cart flow must carry the same ID. This block ports the
   FULL cart-flow dark checklist the yeetapp main site needed (YEETAPP-ORDER-
   DARK), not just today's two reports, so the rest of the flow (cart items,
   checkout boxes, consent modal) doesn't come back one screenshot at a time. */

/* Sidebar: Categories / panels */
html[data-ra-theme="dark"] #order-standard_cart .card,
html[data-ra-theme="dark"] #order-standard_cart .panel {
    background-color: var(--ra-card); border-color: var(--ra-line); color: var(--ra-ink);
}
html[data-ra-theme="dark"] #order-standard_cart .card-header,
html[data-ra-theme="dark"] #order-standard_cart .panel-heading {
    background-color: rgba(255, 255, 255, .04);
    border-color: var(--ra-line); color: var(--ra-ink);
}
html[data-ra-theme="dark"] #order-standard_cart .panel-title { color: var(--ra-ink); }
html[data-ra-theme="dark"] #order-standard_cart .list-group-item {
    background-color: transparent; border-color: var(--ra-line);
}
html[data-ra-theme="dark"] #order-standard_cart .list-group-item:hover {
    background-color: var(--ra-soft);
}

/* "Apply Promo Code" tab pill (both BS3 li.active>a and BS4 .nav-link.active) */
html[data-ra-theme="dark"] #order-standard_cart .nav-tabs {
    border-bottom-color: var(--ra-line);
}
html[data-ra-theme="dark"] #order-standard_cart .nav-tabs > li.active > a,
html[data-ra-theme="dark"] #order-standard_cart .nav-tabs > li.active > a:focus,
html[data-ra-theme="dark"] #order-standard_cart .nav-tabs > li.active > a:hover,
html[data-ra-theme="dark"] #order-standard_cart .nav-tabs .nav-link.active {
    background-color: var(--ra-card); color: var(--ra-ink);
    border-color: var(--ra-line) var(--ra-line) transparent;
}
html[data-ra-theme="dark"] #order-standard_cart .nav-tabs > li > a,
html[data-ra-theme="dark"] #order-standard_cart .nav-tabs .nav-link {
    color: var(--ra-muted);
}
html[data-ra-theme="dark"] #order-standard_cart .tab-content {
    background-color: transparent; color: var(--ra-ink);
}

/* Cart item rows + the rest of the flow (checkout boxes, line masks) */
html[data-ra-theme="dark"] #order-standard_cart .item {
    background-color: var(--ra-card); border-color: var(--ra-line); color: var(--ra-ink);
}
html[data-ra-theme="dark"] #order-standard_cart .product-info {
    background-color: var(--ra-card); border-color: var(--ra-line); color: var(--ra-ink);
}
html[data-ra-theme="dark"] #order-standard_cart .product-info font,
html[data-ra-theme="dark"] #order-standard_cart .plan-name { color: var(--ra-ink); }
html[data-ra-theme="dark"] #order-standard_cart .primary-bg-color {
    background-color: var(--ra-card) !important;
}
html[data-ra-theme="dark"] #order-standard_cart #creditCardInputFields {
    background-color: var(--ra-card); border-color: var(--ra-line);
}
html[data-ra-theme="dark"] #order-standard_cart .empty-cart,
html[data-ra-theme="dark"] #order-standard_cart .empty-cart a { color: var(--ra-muted); }
/* END RESELLERAPP-DARK-CART */