/*
  DEVELOPER STYLING GUIDELINES & SOPS:
  - Never use inline HTML style attributes (style="..."). All styling must be written in the designated CSS files.
  - Always use custom CSS classes prefixed with the module namespace `whmp_pgf-` (use this single prefix consistently everywhere) to prevent styling conflicts.
  - Never use native/built-in theme classes directly. Style custom classes exclusively.
  - Refer to lagom_css_variables.txt for Lagom defined CSS variables. For Lagom styling, use Lagom's CSS variables accordingly.

  ---------------------------------------------------------------------------
  HOW THIS FILE SUPPORTS THE FIVE CLIENT AREA TEMPLATES
  ---------------------------------------------------------------------------
  Every colour, radius and font size below is read from a `--pgf-*` variable.
  In §1 each one is a chain: Nexum's own `--nx-*` token first, then the
  Bootstrap literal that twenty-one, six and nexus already render. A template
  that does not define the token falls through to the literal, so those three
  look exactly as before, while Nexum drives the module from its own palette —
  and follows its native dark mode (`.nx-dark`), because Nexum re-declares those
  same token names there.

  Nexum is deliberately NOT keyed on a body class: WHMCS adds none for it, and
  the token chain needs none. Do not add one.

  §2 re-maps the same `--pgf-*` variables onto Lagom's own variables. Because
  Lagom redefines its variables for dark mode and for the futuristic style, the
  module follows those automatically and nothing here has to be duplicated per
  mode. Add a Lagom variable REMAP in §2; never hardcode a Lagom colour.

  The order-summary rules in §2 are keyed on `.lagom #orderSummary` only. They
  used to carry the full body class chain
  (`body.lagom.lagom-layout-left-wide.lagom-default.page-order…`), which meant
  they applied to exactly one Lagom layout and skin combination and the panel
  fell back to unstyled text on every other one.
*/

/* ══════════════════════════════════════════════════════════════════
   §1  VARIABLES — Nexum's own tokens, falling back to the Bootstrap
       palette that twenty-one, six and nexus render
══════════════════════════════════════════════════════════════════ */

:root {
  /* Nexum ships status pills rather than alerts, which is the closest thing it
     has to the tinted panel the fee notice sits in. It has no pill border
     token, so that one stays a literal. */
  --pgf-success-bg: var(--nx-pill-active-bg, #d4edda);
  --pgf-success-border: #c3e6cb;
  --pgf-success-text: var(--nx-pill-active-text, #155724);
  --pgf-danger-text: var(--nx-danger, #dc3545);

  --pgf-table-border-color: var(--nx-border, #dee2e6);
  --pgf-table-header-bg: var(--nx-bg, transparent);
  --pgf-table-header-color: var(--nx-text, inherit);
  --pgf-table-cell-color: var(--nx-text, inherit);
  --pgf-table-stripe-bg: var(--nx-primary-light, transparent);

  --pgf-summary-bg: transparent;
  --pgf-summary-color: inherit;
  --pgf-summary-muted-color: inherit;

  --pgf-radius: var(--nx-radius-card, 0);
  --pgf-font-size: var(--nx-font-size, 14px);
  --pgf-font-size-sm: var(--nx-font-size-sm, 13px);
  /* our cell padding is two values, which no single Nexum token expresses */
  --pgf-cell-padding: 8px;
}

/* ══════════════════════════════════════════════════════════════════
   §2  BRIDGE VARIABLES — Lagom  (.lagom on <body>)
       Covers Lagom and Lagom 2, every layout and skin, and both
       light and dark mode, because Lagom re-declares these same
       variables itself for each of those states.
══════════════════════════════════════════════════════════════════ */

.lagom {
  --pgf-success-bg: var(--alert-success-bg);
  --pgf-success-border: var(--alert-success-border);
  --pgf-success-text: var(--alert-success-text);
  --pgf-danger-text: var(--text-danger-color);

  --pgf-table-border-color: var(--table-border-color);
  --pgf-table-header-bg: var(--table-th-bg);
  --pgf-table-header-color: var(--table-th-font-color);
  --pgf-table-cell-color: var(--table-td-font-color);
  --pgf-table-stripe-bg: var(--table-bg-accent);

  --pgf-radius: var(--border-radius-base);
  --pgf-font-size: var(--font-size-base);
  --pgf-font-size-sm: var(--font-size-sm);
  --pgf-cell-padding: var(--table-td-padding);
}

/* The Lagom order summary is a solid primary-coloured panel, so the fee rows
   inside it take that panel's own foreground colours rather than the alert
   palette used everywhere else. */
.lagom #orderSummary {
  --pgf-summary-bg: var(--primary-block-bg);
  --pgf-summary-color: var(--primary-block-text-color);
  --pgf-summary-muted-color: var(--primary-block-text-faded-color);
}

.lagom #orderSummary .whmp_pgf_tax_applying {
  background-color: var(--pgf-summary-bg, transparent);
  border-color: transparent;
  color: var(--pgf-summary-color, inherit);
  padding: 0 20px 10px;
}

.lagom #orderSummary .whmp_pgf_tax_applying .whmp_pgf-gateway-text {
  color: var(--pgf-summary-muted-color, inherit);
}

.lagom #orderSummary .whmp_pgf_tax_applying .whmp_pgf-summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ══════════════════════════════════════════════════════════════════
   §3  CHECKOUT — theme layout corrections
       These target theme markup on purpose: the gateway list has to
       stack so the injected fee line has somewhere to sit.
══════════════════════════════════════════════════════════════════ */

.price-amount {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.panel-check .check {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: auto !important;
}

li#recurringMonthly {
  list-style: none;
}

#totalDueToday ul li {
  list-style: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   §4  MODULE COMPONENTS
══════════════════════════════════════════════════════════════════ */

.whmp_pgf_tax_applying {
  background-color: var(--pgf-success-bg, #d4edda);
  border-color: var(--pgf-success-border, #c3e6cb);
  border-radius: var(--pgf-radius, 0);
  color: var(--pgf-success-text, #155724);
  font-size: var(--pgf-font-size, 14px);
  text-align: center;
  padding: 5px;
}

.whmp_pgf-checkout-loader {
  text-align: center;
  padding: 10px;
  font-size: var(--pgf-font-size, 14px);
}

.whmp_pgf-table-container-checkout {
  overflow-x: auto;
}

/* The table also carries the theme's own table classes so it inherits the
   Bootstrap look on twenty-one, six and nexus. The rules here stand on their
   own so it stays readable on a theme that has no such classes. */
.whmp_pgf-checkout-table {
  width: 100%;
  font-size: var(--pgf-font-size, 14px);
  border-collapse: collapse;
}

.whmp_pgf-checkout-table th,
.whmp_pgf-checkout-table td {
  padding: var(--pgf-cell-padding, 8px);
  border-bottom: 1px solid var(--pgf-table-border-color, #dee2e6);
  text-align: left;
  vertical-align: middle;
}

.whmp_pgf-checkout-table th {
  background-color: var(--pgf-table-header-bg, transparent);
  color: var(--pgf-table-header-color, inherit);
  font-weight: 600;
}

.whmp_pgf-checkout-table td {
  color: var(--pgf-table-cell-color, inherit);
}

.whmp_pgf-checkout-table tbody tr:nth-of-type(odd) td {
  background-color: var(--pgf-table-stripe-bg, transparent);
}

.whmp_pgf-checkout-table td:last-child,
.whmp_pgf-checkout-table th:last-child {
  text-align: right;
  white-space: nowrap;
}

.whmp_pgf-credit-limit-notice {
  color: var(--pgf-danger-text, #dc3545);
  font-size: 12px;
  margin-top: 5px;
  display: none;
}

.whmp_pgf-credit-limit-notice.whmp_pgf-visible {
  display: block;
}

/*
==========================================================================
   Responsive Design Breakpoints Guidelines & Overrides:
==========================================================================
   SOP Rule: The client area must be designed and styled to show correctly
   on all viewport sizes (Mobile, Tablet, Laptop, and Big Desktop).
*/

/* 1. Mobile Screens (Smartphones, max-width: 576px) */
@media (max-width: 576px) {
  .whmp_pgf_tax_applying {
    padding: 8px;
    font-size: var(--pgf-font-size-sm, 13px);
  }

  .lagom #orderSummary .whmp_pgf_tax_applying {
    padding: 0 12px 8px;
  }

  .whmp_pgf-checkout-table th,
  .whmp_pgf-checkout-table td {
    padding: 6px 8px;
    font-size: 12px;
  }
}

/* 2. Tablet Screens (min-width: 577px and max-width: 768px) */
@media (min-width: 577px) and (max-width: 768px) {
  .whmp_pgf-checkout-table th,
  .whmp_pgf-checkout-table td {
    font-size: var(--pgf-font-size-sm, 13px);
  }
}

/* 3. Laptop Screens (min-width: 769px and max-width: 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .whmp_pgf_tax_applying {
    padding: 6px;
  }
}

/* 4. Big Desktop Screens (min-width: 1025px) */
@media (min-width: 1025px) {
  .whmp_pgf-table-container-checkout {
    margin-top: 10px;
  }
}