/* ============================================================
   SturdyHaus / Punchwell — WHMCS portal custom.css
   Upload to: <whmcs-docroot>/templates/twenty-one/css/custom.css

   The twenty-one client theme auto-loads this file when it exists,
   after the stock styles. The WHMCS updater never ships a custom.css,
   so this survives upgrades untouched.

   Palette + radii mirror marketing/brand/design-system.md:
     Punch Green 600  #1F7A5A  (primary action)   hover: Green 700 #16614A
     Anchor Navy 800  #102A43  ·  Navy 900 #0B1B2B
     Ink #13202D · Slate 500 #64727F · Slate 200 #DEE4E9 · Slate 50 #F7F9FB
     Radius: 10px controls · 16px cards

   SECTION A applies ONLY to the order-form (store/checkout) pages —
   every WHMCS order-form template wraps its pages in a div whose id is
   "order-<templatename>" (this install's cart renders premium_comparison
   → #order-premium_comparison; standard_cart and the punchwell fork have
   their own), so the [id^="order-"] prefix hits ALL of them and cannot
   leak into the rest of the client area.
   SECTION B (commented out) extends the same accents portal-wide
   (login, client area, invoices) — the runbook §5 rebrand. Uncomment
   when you want the whole portal branded, not just checkout.

   After uploading, eyeball a cart page and the client area: selector
   names here target stable Bootstrap/standard_cart classes, but a
   WHMCS point release can always add markup this doesn't cover.
   ============================================================ */

/* ---------------- A. Checkout / store pages only ---------------- */

/* Primary actions → Punch Green */
div[id^="order-"] .btn-primary,
div[id^="order-"] .btn-checkout,
div[id^="order-"] .btn-add-to-cart {
  background-color: #1F7A5A;
  border-color: #1F7A5A;
  border-radius: 10px;
  font-weight: 600;
}
div[id^="order-"] .btn-primary:hover,
div[id^="order-"] .btn-primary:focus,
div[id^="order-"] .btn-primary:active,
div[id^="order-"] .btn-checkout:hover,
div[id^="order-"] .btn-add-to-cart:hover {
  background-color: #16614A;
  border-color: #16614A;
}

/* Links */
div[id^="order-"] a:not(.btn) { color: #1F7A5A; }
div[id^="order-"] a:not(.btn):hover { color: #16614A; }

/* Page + section headings → Anchor Navy */
div[id^="order-"] .header-lined h1,
div[id^="order-"] .header-lined h2,
div[id^="order-"] h1,
div[id^="order-"] h2 {
  color: #102A43;
}
div[id^="order-"] .header-lined { border-bottom-color: #DEE4E9; }

/* Product cards / panels — brand radius, quiet borders */
div[id^="order-"] .product,
div[id^="order-"] .card,
div[id^="order-"] .panel,
div[id^="order-"] .view-cart-items {
  border-radius: 16px;
  border-color: #DEE4E9;
}

/* Highlighted / featured product accent */
div[id^="order-"] .product.featured,
div[id^="order-"] .panel-featured {
  border-color: #1F7A5A;
}

/* Form controls — brand focus ring (green, soft) */
div[id^="order-"] .form-control,
div[id^="order-"] .custom-select,
div[id^="order-"] select {
  border-radius: 10px;
}
div[id^="order-"] .form-control:focus,
div[id^="order-"] .custom-select:focus,
div[id^="order-"] select:focus {
  border-color: #27946E;
  box-shadow: 0 0 0 3px rgba(39, 148, 110, 0.25);
}

/* Order summary sidebar */
div[id^="order-"] .summary-container .header,
div[id^="order-"] .order-summary {
  background-color: #102A43;
  color: #FFFFFF;
  border-radius: 16px 16px 0 0;
}

/* ---------------- B. Portal-wide brand accents ----------------
   Uncomment to brand the ENTIRE portal (client area, login,
   invoices) — pairs with the runbook §5 logo + company-name
   rebrand. Leave commented to keep the rest of the portal stock.

.btn-primary {
  background-color: #1F7A5A;
  border-color: #1F7A5A;
  border-radius: 10px;
  font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #16614A;
  border-color: #16614A;
}
a:not(.btn) { color: #1F7A5A; }
a:not(.btn):hover { color: #16614A; }
.navbar, #main-menu, .primary-navbar {
  background-color: #102A43;
}
.card, .panel { border-radius: 16px; border-color: #DEE4E9; }
body { background-color: #F7F9FB; color: #13202D; }
---------------------------------------------------------------- */

/* ---------------- Optional: brand fonts ----------------
   The marketing site self-hosts Space Grotesk (headings) and Inter
   (body) — no CDN, honoring the no-call-home stance. To match the
   portal: upload the .woff2 files to templates/twenty-one/fonts/
   and uncomment. Without this, the system stacks below are close
   enough and add zero requests.

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-var.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-var.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
div[id^="order-"] h1, div[id^="order-"] h2, div[id^="order-"] h3 {
  font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
}
div[id^="order-"] body, div[id^="order-"] {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
-------------------------------------------------------- */