/* ==========================================================================
   PlugStack — checkout and order-received
   Loaded only on those two pages.

   Deliberately cosmetic. This file sets colour, typeface, weight, size and
   border colour only. It does not touch display, position, float, grid,
   flex, width, margin or padding — the WooCommerce block checkout and the
   classic thank-you template keep their layouts exactly as shipped.
   ========================================================================== */

/* ------------------------------------------------------------- shared */

.woocommerce-checkout,
.woocommerce-order-received {
  --ps-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* WooCommerce Blocks derives focus rings, spinners and several accents from
   the admin theme colour. Re-pointing it at the brand red is the supported
   lever and recolours all of them at once. */
.woocommerce-checkout .wp-block-woocommerce-checkout,
.woocommerce-checkout .wc-block-checkout,
.woocommerce-checkout .wp-block-woocommerce-cart {
  --wp-admin-theme-color: #C02026;
  --wp-admin-theme-color-darker-10: #8B1D21;
  --wp-admin-theme-color-darker-20: #8B1D21;
  --wp-admin-theme-color--rgb: 192, 32, 38;
  --wc-blocks-color-accent: #C02026;
}

/* ==========================================================================
   Checkout (block)
   ========================================================================== */

.woocommerce-checkout .wc-block-checkout,
.woocommerce-checkout .wc-block-components-form,
.woocommerce-checkout .wc-block-components-sidebar {
  font-family: var(--ps-font-body);
  color: var(--ps-ink);
}

/* --- headings --- */

.woocommerce-checkout .wc-block-components-title,
.woocommerce-checkout .wc-block-components-checkout-step__title,
.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text,
.woocommerce-checkout .wc-block-components-express-payment__title {
  font-family: var(--ps-font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ps-ink);
}

.woocommerce-checkout .wc-block-components-checkout-step__title {
  font-size: 18px;
}

.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text {
  font-size: 16px;
}

.woocommerce-checkout .wc-block-components-express-payment__title {
  font-family: var(--ps-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ps-light);
}

.woocommerce-checkout .wc-block-components-checkout-step__description,
.woocommerce-checkout .wc-block-components-express-payment-continue-rule {
  font-family: var(--ps-font-body);
  font-size: 13.5px;
  color: var(--ps-light);
}

/* --- body copy, labels, fields --- */

.woocommerce-checkout .wc-block-components-text-input label,
.woocommerce-checkout .wc-blocks-components-select__label,
.woocommerce-checkout .wc-block-components-checkbox__label,
.woocommerce-checkout .wc-block-components-radio-control__label {
  font-family: var(--ps-font-body);
  color: var(--ps-muted);
}

.woocommerce-checkout .wc-block-components-text-input input,
.woocommerce-checkout .wc-blocks-components-select__select,
.woocommerce-checkout .wc-block-components-textarea {
  font-family: var(--ps-font-body);
  color: var(--ps-ink);
  border-color: var(--ps-slate);
}

.woocommerce-checkout .wc-block-components-text-input.is-active label,
.woocommerce-checkout .wc-block-components-text-input input:focus,
.woocommerce-checkout .wc-blocks-components-select__select:focus {
  color: var(--ps-ink);
  border-color: var(--ps-red);
}

.woocommerce-checkout .wc-block-components-checkbox__input[type="checkbox"] {
  accent-color: var(--ps-red);
}

/* --- address card --- */

.woocommerce-checkout .wc-block-components-address-card {
  border-color: var(--ps-slate);
}

.woocommerce-checkout .wc-block-components-address-card__address-section {
  font-family: var(--ps-font-body);
  color: var(--ps-muted);
}

.woocommerce-checkout .wc-block-components-address-card__address-section--primary {
  color: var(--ps-ink);
  font-weight: 600;
}

.woocommerce-checkout .wc-block-components-address-card__edit {
  font-family: var(--ps-font-body);
  font-weight: 600;
  color: var(--ps-red);
}

.woocommerce-checkout .wc-block-components-address-card__edit:hover,
.woocommerce-checkout .wc-block-components-address-card__edit:focus {
  color: var(--ps-red-dark);
}

/* --- payment options --- */

.woocommerce-checkout .wc-block-components-radio-control__option {
  font-family: var(--ps-font-body);
  color: var(--ps-ink);
}

.woocommerce-checkout .wc-block-components-radio-control-accordion-option,
.woocommerce-checkout .wc-block-components-radio-control__option {
  border-color: var(--ps-slate);
}

.woocommerce-checkout .wc-block-components-radio-control__option-checked,
.woocommerce-checkout .wc-block-components-radio-control__option--checked-option-highlighted {
  border-color: var(--ps-red);
}

.woocommerce-checkout .wc-block-components-radio-control__input:checked {
  accent-color: var(--ps-red);
  border-color: var(--ps-red);
  color: var(--ps-red);
}

/* --- order summary --- */

.woocommerce-checkout .wc-block-components-order-summary-item__description,
.woocommerce-checkout .wc-block-components-product-metadata {
  font-family: var(--ps-font-body);
  color: var(--ps-muted);
}

.woocommerce-checkout .wc-block-components-product-name {
  font-family: var(--ps-font-body);
  font-weight: 600;
  color: var(--ps-ink);
}

.woocommerce-checkout .wc-block-components-order-summary-item__quantity {
  background: var(--ps-ink);
  border-color: var(--ps-white);
  color: var(--ps-white);
  font-family: var(--ps-font-body);
  font-weight: 700;
}

.woocommerce-checkout .wc-block-components-totals-item__label {
  font-family: var(--ps-font-body);
  color: var(--ps-muted);
}

.woocommerce-checkout .wc-block-components-totals-item__value,
.woocommerce-checkout .wc-block-components-formatted-money-amount,
.woocommerce-checkout .wc-block-components-product-price {
  font-family: var(--ps-font-body);
  color: var(--ps-ink);
  font-variant-numeric: tabular-nums;
}

.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--ps-font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ps-ink);
}

.woocommerce-checkout .wc-block-components-panel__button {
  font-family: var(--ps-font-body);
  font-weight: 600;
  color: var(--ps-ink);
}

.woocommerce-checkout .wc-block-components-sidebar .wc-block-components-totals-wrapper,
.woocommerce-checkout .wc-block-components-order-summary,
.woocommerce-checkout .wc-block-components-panel {
  border-color: var(--ps-slate);
}

/* --- terms and the primary action --- */

.woocommerce-checkout .wc-block-checkout__terms {
  font-family: var(--ps-font-body);
  color: var(--ps-light);
}

.woocommerce-checkout .wc-block-checkout__terms a,
.woocommerce-checkout .wc-block-components-checkout-step a {
  color: var(--ps-red);
}

.woocommerce-checkout .wc-block-components-checkout-place-order-button {
  background-color: var(--ps-red);
  border-color: var(--ps-red);
  color: var(--ps-white);
  font-family: var(--ps-font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  /* Pill radius is the one brand shape carried over; everything else keeps
     WooCommerce's geometry. */
  border-radius: var(--ps-radius-pill);
}

.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover:not(:disabled),
.woocommerce-checkout .wc-block-components-checkout-place-order-button:focus:not(:disabled) {
  background-color: var(--ps-red-dark);
  border-color: var(--ps-red-dark);
  color: var(--ps-white);
}

/* ==========================================================================
   Order received (classic template)
   ========================================================================== */

.woocommerce-order-received .woocommerce-order {
  font-family: var(--ps-font-body);
  color: var(--ps-ink);
}

.woocommerce-order-received .woocommerce-notice--success,
.woocommerce-order-received .woocommerce-thankyou-order-received {
  font-family: var(--ps-font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ps-ink);
  background: transparent;
  border-top: 0;
  border-left: 3px solid var(--ps-free-ink);
}

.woocommerce-order-received .woocommerce-notice--success::before {
  color: var(--ps-free-ink);
}

.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-order-downloads__title,
.woocommerce-order-received .wlpwc-licenses h2,
.woocommerce-order-received .woocommerce-column__title {
  font-family: var(--ps-font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ps-ink);
}

/* --- order overview strip --- */

.woocommerce-order-received .woocommerce-order-overview li {
  font-family: var(--ps-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ps-light);
  border-color: var(--ps-slate);
}

.woocommerce-order-received .woocommerce-order-overview li strong {
  font-family: var(--ps-font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ps-ink);
  font-variant-numeric: tabular-nums;
}

/* --- tables --- */

.woocommerce-order-received .woocommerce-order table.shop_table {
  border: 0;
  border-radius: 0;
  font-family: var(--ps-font-body);
  color: var(--ps-ink);
}

.woocommerce-order-received .woocommerce-order table.shop_table thead th {
  background: var(--ps-soft);
  border-color: var(--ps-slate);
  font-family: var(--ps-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ps-muted);
}

.woocommerce-order-received .woocommerce-order table.shop_table td,
.woocommerce-order-received .woocommerce-order table.shop_table tbody th,
.woocommerce-order-received .woocommerce-order table.shop_table tfoot th,
.woocommerce-order-received .woocommerce-order table.shop_table tfoot td {
  border-color: var(--ps-slate);
  font-family: var(--ps-font-body);
  font-size: 14px;
  color: var(--ps-ink);
}

.woocommerce-order-received .woocommerce-order table.shop_table tfoot th {
  font-weight: 600;
  color: var(--ps-muted);
}

.woocommerce-order-received .woocommerce-order table.shop_table .woocommerce-Price-amount,
.woocommerce-order-received .woocommerce-order table.shop_table .amount {
  font-variant-numeric: tabular-nums;
  color: var(--ps-ink);
}

.woocommerce-order-received .woocommerce-order table.shop_table a:not(.button) {
  color: var(--ps-ink);
  font-weight: 500;
}

.woocommerce-order-received .woocommerce-order table.shop_table a:not(.button):hover {
  color: var(--ps-red);
}

/* Licence keys read as credentials. */
.woocommerce-order-received .wlpwc-licenses code,
.woocommerce-order-received .woocommerce-order code {
  font-family: var(--ps-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--ps-ink);
  background: var(--ps-soft);
  border: 1px solid var(--ps-slate);
  border-radius: var(--ps-radius-sm);
}

/* --- buttons --- */

.woocommerce-order-received .woocommerce-order a.button,
.woocommerce-order-received .woocommerce-order button.button,
.woocommerce-order-received .woocommerce-order input.button {
  background-color: var(--ps-red);
  border-color: var(--ps-red);
  color: var(--ps-white);
  font-family: var(--ps-font-body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-radius: var(--ps-radius-pill);
}

.woocommerce-order-received .woocommerce-order a.button:hover,
.woocommerce-order-received .woocommerce-order button.button:hover,
.woocommerce-order-received .woocommerce-order input.button:hover {
  background-color: var(--ps-red-dark);
  border-color: var(--ps-red-dark);
  color: var(--ps-white);
}

/* --- the connector's post-purchase redirect dialog --- */

#origin-redirect-overlay {
  font-family: var(--ps-font-body);
  color: var(--ps-ink);
}

#origin-redirect-overlay a {
  color: var(--ps-red);
}

#origin-redirect-overlay button.button,
#origin-redirect-overlay a.button {
  background-color: var(--ps-red);
  border-color: var(--ps-red);
  color: var(--ps-white);
  font-family: var(--ps-font-body);
  font-weight: 600;
  border-radius: var(--ps-radius-pill);
}

#origin-redirect-overlay button.button:hover,
#origin-redirect-overlay a.button:hover {
  background-color: var(--ps-red-dark);
  border-color: var(--ps-red-dark);
}

/* The "wait here" choice is secondary — one primary action per dialog. */
#origin-redirect-overlay #origin-redirect-wait {
  background-color: transparent;
  border-color: var(--ps-slate);
  color: var(--ps-ink);
}

#origin-redirect-overlay #origin-redirect-wait:hover {
  background-color: transparent;
  border-color: var(--ps-ink);
  color: var(--ps-ink);
}

/* Button labels must outrank the table-link rule above regardless of source
   order, so they are stated at table-level specificity too. */
.woocommerce-order-received .woocommerce-order table.shop_table a.button,
.woocommerce-order-received .woocommerce-order table.shop_table a.button:hover,
.woocommerce-order-received .woocommerce-order table.shop_table a.button:focus {
  color: var(--ps-white);
}

/* The connector's "return to origin" bar below the licence table. */
#origin-redirect-return a,
#origin-redirect-return a:hover {
  color: var(--ps-red);
  font-weight: 500;
}

#origin-redirect-return a:hover {
  color: var(--ps-red-dark);
}
/* ==========================================================================
   Order received — layout pass

   Structure is untouched: same sections, same order, same markup. What
   changes is containment (a measured column instead of a 1200px sprawl),
   grouping (each section becomes a card on a soft wash) and rhythm.
   The checkout page above remains strictly colour and type.
   ========================================================================== */

body.woocommerce-order-received {
  background: var(--ps-soft);
}

/* A receipt reads better as a measured column than as a full-width sheet.
   The page title is constrained to the same measure so the two align. */
.woocommerce-order-received .entry-content > .woocommerce,
.woocommerce-order-received .entry-title,
.woocommerce-order-received .ast-single-entry-banner .entry-title {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

.woocommerce-order-received .woocommerce-order {
  padding-bottom: 56px;
}

/* --- confirmation --- */

.woocommerce-order-received .woocommerce-notice--success {
  position: relative;
  border: 0;
  border-radius: var(--ps-radius-lg);
  background: var(--ps-white);
  padding: 26px 28px 26px 68px;
  margin: 0 0 16px;
  line-height: 1.35;
}

.woocommerce-order-received .woocommerce-notice--success::before {
  content: "✓";
  position: absolute;
  top: 24px;
  left: 24px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ps-free-bg);
  color: var(--ps-free-ink);
  font-family: var(--ps-font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 28px;
  text-align: center;
  display: block;
}

/* --- order meta strip --- */

.woocommerce-order-received ul.woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px 28px;
  list-style: none;
  background: var(--ps-white);
  border: 1px solid var(--ps-slate);
  border-radius: var(--ps-radius-lg);
  padding: 22px 26px;
  margin: 0 0 20px;
}

/* WooCommerce clears this list with table pseudo-elements. Under grid they
   would become real grid items and claim cells — the same trap that moved
   the account addresses into the wrong columns. */
.woocommerce-order-received ul.woocommerce-order-overview::before,
.woocommerce-order-received ul.woocommerce-order-overview::after {
  display: none;
}

.woocommerce-order-received ul.woocommerce-order-overview li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
}

/* --- section cards --- */

.woocommerce-order-received .woocommerce-order-downloads,
.woocommerce-order-received .woocommerce-order-details {
  background: var(--ps-white);
  border: 1px solid var(--ps-slate);
  border-radius: var(--ps-radius-lg);
  padding: 24px 26px;
  margin: 0 0 20px;
}

.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-order-downloads__title {
  font-size: 17px;
  margin: 0 0 16px;
  padding: 0;
  background: transparent;
  border: 0;
}

/* The connector appends its licence table inside the order-details section,
   so it is separated with a rule rather than given a card of its own —
   nesting a card inside a card would read as a mistake. */
.woocommerce-order-received .woocommerce-order-details .wlpwc-licenses {
  margin: 28px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--ps-slate);
}

.woocommerce-order-received .wlpwc-licenses h2 {
  font-size: 17px;
  margin: 0 0 16px;
}

/* --- tables: horizontal rules only --- */

.woocommerce-order-received .woocommerce-order table.shop_table thead th {
  padding: 0 14px 10px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ps-slate);
}

.woocommerce-order-received .woocommerce-order table.shop_table thead th:first-child,
.woocommerce-order-received .woocommerce-order table.shop_table td:first-child,
.woocommerce-order-received .woocommerce-order table.shop_table tbody th:first-child,
.woocommerce-order-received .woocommerce-order table.shop_table tfoot th:first-child {
  padding-left: 0;
}

.woocommerce-order-received .woocommerce-order table.shop_table thead th:last-child,
.woocommerce-order-received .woocommerce-order table.shop_table td:last-child,
.woocommerce-order-received .woocommerce-order table.shop_table tfoot td:last-child {
  padding-right: 0;
}

.woocommerce-order-received .woocommerce-order table.shop_table td,
.woocommerce-order-received .woocommerce-order table.shop_table tbody th,
.woocommerce-order-received .woocommerce-order table.shop_table tfoot th,
.woocommerce-order-received .woocommerce-order table.shop_table tfoot td {
  padding: 14px;
  border: 0;
  border-bottom: 1px solid var(--ps-slate);
  background: transparent;
}

.woocommerce-order-received .woocommerce-order table.shop_table tbody tr:last-child td,
.woocommerce-order-received .woocommerce-order table.shop_table tbody tr:last-child th {
  border-bottom: 0;
}

.woocommerce-order-received .woocommerce-order table.shop_table tfoot tr:last-child th,
.woocommerce-order-received .woocommerce-order table.shop_table tfoot tr:last-child td {
  border-bottom: 0;
}

/* --- return bar --- */

#origin-redirect-return {
  background: var(--ps-white);
  border: 1px solid var(--ps-slate);
  border-radius: var(--ps-radius-lg);
  padding: 16px 22px;
  margin: 0;
  font-size: 14px;
  color: var(--ps-muted);
}

@media (max-width: 600px) {
  .woocommerce-order-received .woocommerce-order-downloads,
  .woocommerce-order-received .woocommerce-order-details,
  .woocommerce-order-received ul.woocommerce-order-overview {
    padding: 20px 18px;
  }

  .woocommerce-order-received .woocommerce-notice--success {
    padding: 22px 20px 22px 60px;
  }
}
/* Something generic in the Astra/Woo cascade paints these section headings
   as a bordered, filled bar — it is not reachable by name, so the reset is
   stated at 4 classes + element to win outright. */
.woocommerce-order-received .woocommerce-order .woocommerce-order-details > h2.woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-order .woocommerce-order-downloads > h2.woocommerce-order-downloads__title,
.woocommerce-order-received .woocommerce-order .wlpwc-licenses > h2 {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 16px;
  font-family: var(--ps-font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ps-ink);
}

/* The section padding already closes the card; WooCommerce's 32px table
   margin was adding a second, empty gutter underneath. */
.woocommerce-order-received .woocommerce-order .woocommerce-order-downloads > table.shop_table,
.woocommerce-order-received .woocommerce-order .woocommerce-order-details > table.shop_table,
.woocommerce-order-received .woocommerce-order .wlpwc-licenses > table.shop_table,
.woocommerce-order-received .woocommerce-order .wlpwc-licenses .wlpwc-licenses-wrap > table.shop_table {
  margin-bottom: 0;
}
/* The total, wherever it falls in the footer. The value carries the class;
   :has() lifts the matching label. Without :has() support the value alone
   is emphasised, which still reads correctly. */
.woocommerce-order-received .woocommerce-order .plugstack-order-total,
.woocommerce-order-received .woocommerce-order table.shop_table tfoot tr:has(.plugstack-order-total) th {
  font-family: var(--ps-font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ps-ink);
}

.woocommerce-order-received .woocommerce-order table.shop_table tfoot tr:has(.plugstack-order-total) th,
.woocommerce-order-received .woocommerce-order table.shop_table tfoot tr:has(.plugstack-order-total) td {
  padding-top: 18px;
  padding-bottom: 18px;
}
/* The connector's licence table carries neither .shop_table_responsive nor
   data-title attributes, so it cannot stack the way WooCommerce's tables do
   — and a licence key must not wrap. It scrolls inside its own card instead,
   which keeps the page itself free of horizontal scroll. */
.woocommerce-order-received .wlpwc-licenses,
.woocommerce-order-received .wlpwc-licenses-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.woocommerce-order-received .wlpwc-licenses table.shop_table {
  min-width: 460px;
}

/* Belt and braces: nothing in the receipt may push the page sideways. */
.woocommerce-order-received .woocommerce-order {
  max-width: 100%;
}