/* =====================================================================
   HOSTNOMO CART — visual layer for the order-form flow
   Inherits templates/orderforms/standard_cart structure/functionality
   via theme.yaml `parent`. This file only restyles; no cart logic here.
   Palette matches templates/hostnomo/css/hostnomo-design-system.css
   (kept as a literal duplicate, not a shared import: this file loads on
   a completely separate template tree with its own <head>, so there's
   no way to @import the client-area file without coupling the two
   themes' asset paths together — if the client-area palette ever
   changes, mirror the :root block below by hand).
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Open+Sans:wght@400;600;700&display=swap');

:root {
    --hn-primary: #3654fb;
    --hn-primary-hover: #2841e0;
    --hn-primary-active: #1f35c4;
    --hn-primary-light: #eef1ff;
    --hn-primary-soft: rgba(54, 84, 251, .08);
    --hn-orange: #fd762b;
    --hn-orange-hover: #e8631a;
    --hn-orange-light: #fff1e8;
    --hn-navy: #191388;
    --hn-navy-deep: #000d4d;
    --hn-bg: #f7f8fb;
    --hn-surface: #ffffff;
    --hn-surface-alt: #f4f5f9;
    --hn-text: #1c2130;
    --hn-text-muted: #6b7280;
    --hn-text-faint: #98a2b3;
    --hn-border: #e4e7ee;
    --hn-border-strong: #d3d8e4;
    --hn-success: #16a34a;
    --hn-success-bg: #eafbf1;
    --hn-warning: #f59e0b;
    --hn-warning-bg: #fef6e6;
    --hn-danger: #e11d3f;
    --hn-danger-bg: #fdeced;
    --hn-info: var(--hn-primary);
    --hn-info-bg: var(--hn-primary-light);
    --hn-radius-sm: 6px;
    --hn-radius-md: 10px;
    --hn-radius-lg: 16px;
    --hn-radius-pill: 999px;
    --hn-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --hn-shadow-md: 0 4px 12px rgba(16, 24, 40, .08);
    --hn-shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);
    --hn-font-heading: 'Poppins', 'Segoe UI', sans-serif;
    --hn-font-body: 'Open Sans', 'Segoe UI', sans-serif;
    --hn-transition: 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
    :root { --hn-transition: 0ms; }
}

html { font-size: 15px; }
body { font-family: var(--hn-font-body); color: var(--hn-text); background: var(--hn-bg); overflow-x: hidden; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--hn-font-heading);
    color: var(--hn-navy-deep);
    font-weight: 600;
    letter-spacing: -0.01em;
}

a { color: var(--hn-primary); text-decoration: none; transition: color var(--hn-transition); }
a:hover, a:focus { color: var(--hn-primary-hover); text-decoration: none; }

::selection { background: var(--hn-primary-light); color: var(--hn-navy-deep); }

/* Visible, accessible focus ring everywhere — the base standard_cart CSS has
   no focus-visible treatment at all beyond the browser default outline, and
   Bootstrap's own default focus box-shadow is baby blue (doesn't match). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.form-control:focus-visible {
    outline: 2px solid var(--hn-primary);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   BUTTONS — full variant set. standard_cart's checkout/products/addons/
   viewcart templates use btn-info and btn-warning (the "Already
   Registered" / "Create Account" toggle, "Add to Cart" states, etc.) on
   top of primary/success/danger; covering all variants here keeps every
   button on-brand instead of falling back to plain Bootstrap blue/yellow.
   --------------------------------------------------------------------- */
.btn {
    font-family: var(--hn-font-heading);
    font-weight: 500;
    border-radius: var(--hn-radius-sm);
    padding: .6rem 1.2rem;
    transition: all var(--hn-transition);
}
.btn-sm { padding: .4rem .85rem; }
.btn-lg { padding: .8rem 1.6rem; border-radius: var(--hn-radius-md); }

.btn-primary, .btn-success {
    background: var(--hn-primary); border-color: var(--hn-primary); color: #fff !important; box-shadow: var(--hn-shadow-sm);
}
.btn-primary:hover, .btn-primary:focus, .btn-success:hover, .btn-success:focus {
    background: var(--hn-primary-hover); border-color: var(--hn-primary-hover); color: #fff !important;
}
.btn-primary:active, .btn-primary.active, .btn-success:active {
    background: var(--hn-primary-active) !important; border-color: var(--hn-primary-active) !important; color: #fff !important;
}
.btn-primary:disabled, .btn-primary.disabled { background: var(--hn-primary); opacity: .5; }

.btn-outline-primary { color: var(--hn-primary); border-color: var(--hn-primary); background: transparent; }
.btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--hn-primary); color: #fff; }
.btn-outline-primary:active { background: var(--hn-primary-active); border-color: var(--hn-primary-active); color: #fff; }

.btn-default, .btn-secondary { background: var(--hn-surface); border: 1px solid var(--hn-border-strong); color: var(--hn-text); }
.btn-default:hover, .btn-secondary:hover { background: var(--hn-surface-alt); color: var(--hn-text); }
.btn-default:active, .btn-secondary:active { background: var(--hn-border); }

.btn-danger { background: var(--hn-danger); border-color: var(--hn-danger); color: #fff; }
.btn-danger:hover, .btn-danger:focus { background: #c3172f; border-color: #c3172f; color: #fff; }
.btn-danger:active { background: #a11228; border-color: #a11228; }

/* Info / Warning — the checkout "Already Registered" / "Create Account"
   toggle buttons specifically. Repurposed as a brand-neutral outline pair
   instead of stock Bootstrap blue/yellow, since they're really just a
   two-way switch, not a status signal. */
.btn-info { background: var(--hn-primary-light); border-color: var(--hn-primary-light); color: var(--hn-primary); }
.btn-info:hover, .btn-info:focus { background: var(--hn-primary); border-color: var(--hn-primary); color: #fff; }
.btn-info:active { background: var(--hn-primary-active); border-color: var(--hn-primary-active); color: #fff; }

.btn-warning { background: var(--hn-orange-light); border-color: var(--hn-orange-light); color: var(--hn-orange); }
.btn-warning:hover, .btn-warning:focus { background: var(--hn-orange); border-color: var(--hn-orange); color: #fff; }
.btn-warning:active { background: var(--hn-orange-hover); border-color: var(--hn-orange-hover); color: #fff; }

.btn-light { background: var(--hn-surface-alt); border-color: var(--hn-surface-alt); color: var(--hn-text); }
.btn-light:hover { background: var(--hn-border); }

.btn-link { color: var(--hn-primary); font-weight: 500; text-decoration: none; }
.btn-link:hover, .btn-link:focus { color: var(--hn-primary-hover); text-decoration: none; }

/* Forms */
.form-control {
    border: 1px solid var(--hn-border-strong);
    border-radius: var(--hn-radius-sm);
    padding: .6rem .85rem;
    font-size: .92rem;
    height: auto;
    color: var(--hn-text);
    background: var(--hn-surface);
    transition: border-color var(--hn-transition), box-shadow var(--hn-transition);
}
.form-control:focus { border-color: var(--hn-primary); box-shadow: 0 0 0 3px var(--hn-primary-soft); outline: 0; }
.form-control::placeholder { color: var(--hn-text-faint); }
.form-control:disabled, .form-control[readonly] { background: var(--hn-surface-alt); color: var(--hn-text-muted); }
.form-control.is-invalid, .field.is-invalid { border-color: var(--hn-danger); }
label { font-weight: 600; font-size: .85rem; color: var(--hn-text); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--hn-primary); }

/* Cards / product & pricing tables */
.card, .panel, .package, .pricing-table, .product-card {
    border: 1px solid var(--hn-border);
    border-radius: var(--hn-radius-md);
    box-shadow: var(--hn-shadow-sm);
    background: var(--hn-surface);
}
.card-header, .panel-heading { background: var(--hn-surface); border-bottom: 1px solid var(--hn-border); }
.card-title, .panel-title { font-family: var(--hn-font-heading); font-weight: 600; color: var(--hn-navy-deep); }

/* Order summary / cart totals */
.ordersummary, #order-summary, .cart-summary, .order-total,
[class*="order-summary"], [class*="ordersummary"] {
    border-radius: var(--hn-radius-md);
}
.total, .order-total-value, strong.total-due-today { color: var(--hn-navy-deep); }

/* Badges / featured product ribbons */
.badge { font-family: var(--hn-font-heading); font-weight: 600; border-radius: var(--hn-radius-pill); }
.featured, .most-popular, .popular-badge { background: var(--hn-orange); color: #fff; }
.label-info { background: var(--hn-primary); }
.label-default { background: var(--hn-text-muted); }

/* Tables (cart line items) */
.table thead th {
    font-family: var(--hn-font-heading);
    font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--hn-text-muted); background: var(--hn-surface-alt); border-top: none;
}
.table td, .table th { border-top: 1px solid var(--hn-border); padding: .8rem; }

/* Alerts */
.alert { border-radius: var(--hn-radius-md); border: 1px solid transparent; }
.alert-success { background: var(--hn-success-bg); color: #0d6b34; }
.alert-danger { background: var(--hn-danger-bg); color: #a3142f; }
.alert-warning { background: var(--hn-warning-bg); color: #86590a; }
.alert-info { background: var(--hn-primary-light); color: var(--hn-navy-deep); }

/* Steps / progress indicator common to checkout flows */
.step, .checkout-step, .order-steps li { font-family: var(--hn-font-heading); }
.step.active, .checkout-step.active, .order-steps li.active { color: var(--hn-primary); }

/* Configure product / addons / checkout structural classes (standard_cart) */
.header-lined {
    border-bottom: 1px solid var(--hn-border);
    padding-bottom: .75rem;
    margin-bottom: 1.25rem;
}
.font-size-36 { font-size: 1.7rem !important; }

.cart-sidebar .card, .cart-sidebar .panel { margin-bottom: 1rem; }
.cart-body { background: transparent; }

.product-info { margin-bottom: 1.25rem; }
.product-title, .product-name {
    font-family: var(--hn-font-heading);
    font-weight: 700;
    color: var(--hn-navy-deep);
    display: block;
}
.product-group { color: var(--hn-text-muted); font-size: .82rem; }

.field-container { margin-bottom: 1.25rem; }

/* Order summary card */
.summary-totals {
    border-top: 1px dashed var(--hn-border-strong);
    margin-top: .75rem;
    padding-top: .75rem;
}
.total-due-today {
    background: var(--hn-primary-light);
    border-radius: var(--hn-radius-md);
    padding: 1rem 1.1rem;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--hn-font-heading);
    font-weight: 600;
    color: var(--hn-navy-deep);
}
.total-due-today .amt { font-size: 1.35rem; font-weight: 700; color: var(--hn-primary); }

/* Config option radio/checkbox "cards" used by some product types */
.pricing-toggle label, .configurable-option label { font-weight: 500; }
.qty-field { border-radius: var(--hn-radius-sm); }

/* ---------------------------------------------------------------------
   CHECKOUT SECTION HEADERS — `.sub-heading > span` is standard_cart's
   mechanism for every section title on checkout ("Personal Information",
   "Billing Address", "Account Security", etc) via
   `#order-standard_cart .sub-heading span` in the inherited all.css, an id
   selector (specificity 1,2,0) that needs matching to override — stock
   WHMCS renders it as teal text punched through a divider line. Redone as
   a clean bottom-bordered heading, matching `.header-lined` elsewhere.
   --------------------------------------------------------------------- */
#order-standard_cart .sub-heading,
#order-standard_cart .sub-heading-borderless {
    height: auto;
    border-top: none;
    border-bottom: 1px solid var(--hn-border);
    text-align: left;
    margin-top: 2rem;
    margin-bottom: 1.25rem;
    padding-bottom: .6rem;
}
#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading-borderless span {
    display: block;
    position: static;
    padding: 0;
    top: 0;
    font-family: var(--hn-font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--hn-navy-deep);
    background: transparent;
}

/* Account-select radio cards (checkout "use this account / create new")
   — was flat gray (#f6f6f6) with no selected-state distinction beyond a
   plain white fill; matched to the sidebar's active-row treatment used
   throughout the client-area theme (tinted bg + colored left border) so
   the two themes read as the same product. */
#order-standard_cart .account-select-container { border-right: none; }
#order-standard_cart .account-select-container div.account {
    background: var(--hn-surface-alt);
    border: 1px solid var(--hn-border);
    border-right: 0;
    border-radius: var(--hn-radius-sm);
    padding: .85rem 1rem;
    transition: background var(--hn-transition), border-color var(--hn-transition);
}
#order-standard_cart .account-select-container div.account:hover {
    border-color: var(--hn-border-strong);
}
#order-standard_cart .account-select-container div.account.active {
    background: var(--hn-primary-light);
    border-color: var(--hn-primary);
    box-shadow: inset 3px 0 0 var(--hn-primary);
}
#order-standard_cart .account-select-container .address strong { color: var(--hn-navy-deep); }
#order-standard_cart .account-select-container .small { color: var(--hn-text-muted); }

/* Order Summary panel — `#order-standard_cart .order-summary` (id+class,
   1,1,0) hardcodes flat gray `#666` for the whole box, with
   `.order-summary h2` setting the title text white to match. Given the
   brand's dark navy instead, consistent with the topbar and other dark
   surfaces used elsewhere in the theme. */
#order-standard_cart .order-summary {
    background-color: var(--hn-navy-deep);
    border-bottom: none;
    border-radius: var(--hn-radius-md);
    box-shadow: var(--hn-shadow-md);
}
#order-standard_cart .order-summary h2 {
    font-family: var(--hn-font-heading);
    font-weight: 600;
}
#order-standard_cart .summary-container { border-radius: 0 0 var(--hn-radius-md) var(--hn-radius-md); }

/* "Empty Cart" — `#order-standard_cart .empty-cart .btn` hardcodes a
   legacy dark teal-blue (`#005588`) unrelated to any brand color. It's a
   small, clearing/destructive action, not a primary CTA, so a light
   danger-tinted treatment (same language as the danger badges/status
   pills elsewhere) reads correctly without being alarming. */
#order-standard_cart .empty-cart .btn {
    background-color: var(--hn-danger-bg);
    color: var(--hn-danger);
    border: none;
    font-weight: 600;
}
#order-standard_cart .empty-cart .btn:hover,
#order-standard_cart .empty-cart .btn:focus {
    background-color: var(--hn-danger);
    color: #fff;
}

/* "View Cart" in the sidebar Actions list — plain Bootstrap
   `.list-group-item.active` default (`#336699`, a different legacy blue
   than the brand's `--hn-primary`), not something `.sidebar`-scoped rules
   in the client-area theme reach (this sidebar uses its own markup, no
   `.sidebar` class, even though this stylesheet loads alongside that
   theme's on every cart/checkout page). */
#order-standard_cart .list-group-item.active {
    background-color: var(--hn-primary);
    border-color: var(--hn-primary);
    color: #fff;
}
#order-standard_cart .list-group-item-action:hover {
    background-color: var(--hn-primary-light);
    color: var(--hn-primary);
}

img, table { max-width: 100%; }

@media (max-width: 575.98px) {
    html { font-size: 14px; }
    .card-body, .panel-body { padding: 1rem; }
}