/* ==========================================================================
   Hostgon brand theme for the "Standard Cart" order form.
   Auto-loaded via common.tpl's {assetExists file="custom.css"} check — same
   mechanism as the main client-area theme, just scoped to this template.

   IMPORTANT: this template's own css/style.css scopes almost everything to
   `#order-standard_cart ...` (an ID selector), which beats plain class
   selectors regardless of load order. Every rule below matches or exceeds
   that specificity on purpose — this is the exact mistake that broke the
   first pass of the client-area theme, not repeating it here.
   ========================================================================== */

:root {
  --primary: #2858a3;
  --accent: #769ed3;
  --radius: 0.75rem; /* matches --radius in src/index.css */
}

/* Category / page heading ------------------------------------------------- */

#order-standard_cart .header-lined h1 {
  font-family: 'Mulish', sans-serif;
  font-weight: 800;
  color: var(--primary);
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 0.75rem;
}

/* Product cards ------------------------------------------------------------ */

#order-standard_cart .products .product {
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
#order-standard_cart .products .product:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
  border-color: rgba(40, 88, 163, 0.35);
}

#order-standard_cart .products .product header {
  background: #eef2fb;
  border-radius: var(--radius) var(--radius) 0 0;
}
#order-standard_cart .products .product header span {
  color: var(--primary);
  font-family: 'Mulish', sans-serif;
  font-weight: 800;
}

/* Feature list — same "bold blue stat + gray label" pattern used on the
   main site's pricing cards (src/components/Pricing.tsx) */
#order-standard_cart .products .product div.product-desc ul {
  list-style: none;
  padding-left: 0;
  margin-top: 0.5rem;
}
#order-standard_cart .products .product div.product-desc ul li {
  padding: 0.3rem 0 0.3rem 1.25rem;
  position: relative;
  color: #57606f;
}
#order-standard_cart .products .product div.product-desc ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}
#order-standard_cart .products .product span.feature-value {
  color: var(--primary);
  font-weight: 700;
}

/* Pricing + order button --------------------------------------------------- */

#order-standard_cart .products .product div.product-pricing span.price {
  color: #0f1729;
  font-weight: 800;
  font-family: 'Mulish', sans-serif;
}

#order-standard_cart .products .product footer .btn-order-now {
  border-radius: 0.375rem; /* matches the main theme's .btn rule */
  font-weight: 700;
  box-shadow: 0 10px 25px -5px rgba(118, 158, 211, 0.35);
}
#order-standard_cart .products .product footer .btn-order-now:hover {
  box-shadow: 0 15px 30px -5px rgba(118, 158, 211, 0.45);
}

/* Sidebar ------------------------------------------------------------------ */

#order-standard_cart .cart-sidebar .card-sidebar {
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}
#order-standard_cart .cart-sidebar .panel-heading .panel-title {
  font-family: 'Mulish', sans-serif;
  font-weight: 800;
  color: #0f1729;
}

/* Defensive: guarantee the active category reads as brand blue even if a
   screenshot makes the (deliberately muted) primary blue look closer to
   gray — costs nothing if it was already correct. */
#order-standard_cart .cart-sidebar .list-group-item.active {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}