/* ==========================================================================
   Fluent Cart — invoice (receipt) page, shared (light + dark)
   Plugin: Fluent Cart Account Portal by ICT Shift (v1.3.6)

   The /account/invoice/ endpoint renders Fluent Cart's receipt (its
   thank-you component) inside the customer dashboard. It ships as an
   email-template card: white surface, #2F3448/#374151 text, inline
   status colors on the header banner and the bank-details block, and a
   #253241 "View Order" button. In light mode those defaults are
   off-brand; in dark mode they are near-invisible — the "Bill To" lines
   inherit the dashboard's white text onto FC's white card, and the navy
   buttons sit on a #20222F surface.

   This stylesheet re-frames the receipt as one centered 620px "invoice
   document" with margins around it in the dashboard: the
   .fct-thank-you-page-content wrapper becomes the card and the inner
   .fct-thank-you-page-body border/surface is dropped so banner and body
   read as one document. Every color is an Astra global palette
   variable, so the sheet follows the active color scheme; the values
   that differ in the dark scheme (button text, VAT chips) live in
   receipt-dark-mode.css, loaded after this file. Enqueued only on
   <dashboard-slug>/invoice, so no other page — including the standalone
   receipt download URL — is touched.
   ========================================================================== */

/* --- 1. Layout: one centered receipt card ----------------------------------
   The wrapper is the card; FC's .fct-thank-you-page-inner padding (10px)
   becomes the margin around it, so the sheet floats in the dashboard
   content with breathing room. */
.fct-thank-you-page .fct-thank-you-page-inner {
    padding: 0;
}

.fct-thank-you-page .fct-thank-you-page-content {
    background-color: var(--ast-global-color-5);
    border: 1px solid var(--ast-global-color-6);
    border-radius: 12px;
    margin: 8px auto 28px;
    overflow: hidden;
}

/* The inner body box is dissolved into the wrapper (no border, no
   surface, no radius) — this removes the stacked-box look. Content
   padding is kept on -body-inner. */
.fct-thank-you-page .fct-thank-you-page-body {
    background-color: transparent;
    border: 0;
    border-radius: 0;
}

.fct-thank-you-page .fct-thank-you-page-body-content-inner {
    background-color: transparent;
}

/* --- 2. Header banner --------------------------------------------------------
   FC paints the banner with inline payment-STATUS colors (amber for
   "Payment Pending!", green for "Payment Completed!", etc.). Those
   colors are self-contained status chips — light backgrounds with dark
   text — and read correctly on the card in BOTH color schemes, so we
   keep them untouched and only normalize the padding. The card's
   overflow:hidden clips the banner to the rounded top corners. */
.fct-thank-you-page .fct-thank-you-page-header {
    border-radius: 0;
    margin-bottom: 0;
    padding: 24px 30px;
}

/* --- 3. Greeting + VAT line ----------------------------------------------------
   Slot 2 = main text, slot 3 = muted; the variables flip with the scheme,
   so one shared rule covers both. */
.fct-thank-you-page .fct-thank-you-page-body .no-print-title {
    color: var(--ast-global-color-2);
}

.fct-thank-you-page .fct-thank-you-page-body .no-print p {
    color: var(--ast-global-color-3);
}

.fct-thank-you-page .fct-thank-you-page-body .no-print a {
    color: var(--ast-global-color-7);
}

/* FC wraps the order link in <strong style="color:#007bff">; the strong
   takes the main text color (beats the inline) while the link keeps the
   palette blue. */
.fct-thank-you-page .fct-thank-you-page-body .no-print strong {
    color: var(--ast-global-color-2) !important;
}

.fct-thank-you-page .fct-thank-you-page-body .fct_invoice_tax_content p {
    color: var(--ast-global-color-3);
}

/* --- 4. Items table ------------------------------------------------------------- */
.fct-thank-you-page .fct-thank-you-page-body .fct-thank-you-page-order-items-header {
    background-color: var(--ast-global-color-4);
}

.fct-thank-you-page .fct-thank-you-page-body .fct-thank-you-page-order-items-header-row {
    color: var(--ast-global-color-3);
}

.fct-thank-you-page .fct-thank-you-page-body .fct-thank-you-page-order-items-list-quantity {
    color: var(--ast-global-color-2);
}

.fct-thank-you-page .fct-thank-you-page-body .fct-thank-you-page-order-items-list-variant-title,
.fct-thank-you-page .fct-thank-you-page-body .fct-thank-you-page-order-items-list-payment-info {
    color: var(--ast-global-color-3);
}

.fct-thank-you-page .fct-thank-you-page-body .fct-thank-you-page-order-items-list-price-inner {
    color: var(--ast-global-color-2);
}

/* --- 5. Totals + tax breakdown -----------------------------------------------
   Meta-line labels are muted and values main. The tax-breakdown box gets
   the slot-4 surface and the inline #94a3b8 grid text becomes the muted
   variable (it carries an inline color, hence !important). */
.fct-thank-you-page .fct-thank-you-page-body .fct-thank-you-page-order-items-total {
    border-top-color: var(--ast-global-color-6);
}

.fct-thank-you-page .fct-thank-you-page-body .fct-thank-you-page-order-items-total-total {
    border-top-color: var(--ast-global-color-6);
}

.fct-thank-you-page .fct-thank-you-page-body .fct-meta-line-label {
    color: var(--ast-global-color-3);
}

.fct-thank-you-page .fct-thank-you-page-body .fct-meta-line-value {
    color: var(--ast-global-color-2);
}

/* The Total row carries the dominant figures (FC sizes them 16px/bold). */
.fct-thank-you-page .fct-thank-you-page-body .fct-thank-you-page-order-items-total-total .fct-thank-you-page-order-items-total-label,
.fct-thank-you-page .fct-thank-you-page-body .fct-thank-you-page-order-items-total-total .fct-thank-you-page-order-items-total-value {
    color: var(--ast-global-color-2);
}

.fct-thank-you-page .fct-thank-you-page-body .fct-thank-you-tax-summary {
    background-color: var(--ast-global-color-4);
    border: 1px solid var(--ast-global-color-6);
    color: var(--ast-global-color-2);
}

.fct-thank-you-page .fct-thank-you-page-body .fct-thank-you-tax-summary-title {
    color: var(--ast-global-color-3);
}

.fct-thank-you-page .fct-thank-you-page-body .fct-thank-you-tax-summary-row--total {
    border-top-color: var(--ast-global-color-6);
}

.fct-thank-you-page .fct-thank-you-page-body .fct-thank-you-tax-summary [style*="94a3b8"] {
    color: var(--ast-global-color-3) !important;
}

/* --- 6. Addresses (Bill To / Ship To) ----------------------------------------
   FC colors only the h5 (hard-coded slate); the address lines below have
   no color rule and inherit whatever the dashboard sets — white on the
   white card in the dark scheme (the "Bill To not visible" bug). Every
   line is pinned to the palette explicitly. */
.fct-thank-you-page .fct-thank-you-page-body .fct-thank-you-page-order-items-addresses-bill-to,
.fct-thank-you-page .fct-thank-you-page-body .fct-thank-you-page-order-items-addresses-ship-to {
    color: var(--ast-global-color-3);
}

.fct-thank-you-page .fct-thank-you-page-body .fct-thank-you-page-order-items-addresses-bill-to h5,
.fct-thank-you-page .fct-thank-you-page-body .fct-thank-you-page-order-items-addresses-ship-to h5 {
    color: var(--ast-global-color-2);
    border-bottom-color: var(--ast-global-color-6);
}

/* --- 7. Bank-details block -----------------------------------------------------
   Rendered with inline styles (Arial, #2F3448 text, #e7eaee divider);
   pinned to the palette and the site font. */
.fct-thank-you-page .fct-thank-you-page-body .fct-thank-you-page-body-content-inner > div[style*="max-width: 620px"] {
    font-family: inherit !important;
}

.fct-thank-you-page .fct-thank-you-page-body .fct-thank-you-page-body-content-inner > div[style*="max-width: 620px"] > div {
    font-family: inherit;
    color: var(--ast-global-color-3) !important;
    border-top: 1px solid var(--ast-global-color-6) !important;
}

.fct-thank-you-page .fct-thank-you-page-body .fct-thank-you-page-body-content-inner > div[style*="max-width: 620px"] strong {
    color: var(--ast-global-color-2);
}

/* --- 8. Footer buttons ----------------------------------------------------------
   "View Order" is the solid site-blue primary (same hue as "Place order"
   and "Add to cart"); "Download Receipt" is the blue outline variant, so
   both are clearly visible on every dashboard surface. Text on the
   filled blue is white per scheme (slot 5 here; slot 2 in
   receipt-dark-mode.css).

   Two quirks: (1) in the dashboard the footer is rendered OUTSIDE the
   .fct-thank-you-page wrapper (it sits in .fluent-cart-custom-page-
   content), so these selectors deliberately omit that ancestor;
   (2) Fluent Cart's own stylesheet paints the same properties and prints
   later at the default enqueue priority, so the declarations carry
   !important (the enqueue itself also runs at priority 99 as a second
   safety). */
.fct-thank-you-page-footer .fct-thank-you-page-view-order-button {
    background-color: var(--ast-global-color-7) !important;
    border: 1px solid var(--ast-global-color-7) !important;
    border-radius: 8px;
    text-decoration: none !important;
}

.fct-thank-you-page-footer .fct-thank-you-page-view-order-button:hover,
.fct-thank-you-page-footer .fct-thank-you-page-view-order-button:focus,
.fct-thank-you-page-footer .fct-thank-you-page-view-order-button:focus-visible {
    background-color: var(--ast-global-color-0) !important;
    border-color: var(--ast-global-color-0) !important;
}

html:not(.astra-color-scheme-dark) .fct-thank-you-page-footer .fct-thank-you-page-view-order-button {
    color: var(--ast-global-color-5) !important; /* white in the light scheme */
}

.fct-thank-you-page-footer .fct-thank-you-page-download-receipt-button {
    background-color: transparent;
    border: 1px solid var(--ast-global-color-7) !important;
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 16px;
    color: var(--ast-global-color-7) !important;
    text-decoration: none !important;
}

.fct-thank-you-page-footer .fct-thank-you-page-download-receipt-button:hover,
.fct-thank-you-page-footer .fct-thank-you-page-download-receipt-button:focus,
.fct-thank-you-page-footer .fct-thank-you-page-download-receipt-button:focus-visible {
    background-color: var(--ast-global-color-7) !important;
    border-color: var(--ast-global-color-7) !important;
}
/* ==========================================================================
   9. Invoices tab without a receipt hash — order/invoice list (v1.3.8)
   Opening the invoice page without trx_hash / order_hash leaves the
   receipt component with no document to render, so the plugin prints this
   list instead of its "no receipt found" dead end: the customer's recent
   orders, each linking to the order details page and directly to this
   page with order_hash (the invoice document). All colors go through the
   --fcpa-* portal roles (Astra palette, dark-safe) — same policy as the
   receipt card above.
   ========================================================================== */

/* Full content column by design (v1.3.9): the list spans the account
   content area like the Vue tables do. */
.fcpa-active .fcpa-invoice-fallback .fcpa-invoice-fallback-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--fcpa-text, var(--ast-global-color-2));
    margin: 0 0 6px;
}

.fcpa-active .fcpa-invoice-fallback .fcpa-invoice-fallback-intro {
    max-width: 640px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--fcpa-muted, var(--ast-global-color-3));
    margin: 0 0 18px;
}

.fcpa-active .fcpa-invoice-fallback .fcpa-invoice-fallback-card {
    border: 1px solid var(--fcpa-border, var(--ast-global-color-6));
    border-radius: 10px;
    overflow: auto;
    background-color: var(--fcpa-bg, var(--ast-global-color-5));
}

.fcpa-active .fcpa-invoice-fallback .fcpa-invoice-fallback-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

/* Astra's global table styles (main.min.css) put a
   `border: 1px solid var(--ast-border-color)` on every table, th and
   td, then trim cell borders to `0 1px 1px 0` — stray vertical lines
   in a different color (the Astra border color, a site blue) next to
   the card's portal-gray outline. Neutralise those borders here and
   draw the table with this sheet's single border color: card outline,
   header underline and row separators all in --fcpa-border, uniform
   in light and dark. */
.fcpa-active .fcpa-invoice-fallback .fcpa-invoice-fallback-table,
.fcpa-active .fcpa-invoice-fallback .fcpa-invoice-fallback-table th,
.fcpa-active .fcpa-invoice-fallback .fcpa-invoice-fallback-table td {
    border: 0;
}

.fcpa-active .fcpa-invoice-fallback .fcpa-invoice-fallback-table th,
.fcpa-active .fcpa-invoice-fallback .fcpa-invoice-fallback-table td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--fcpa-border, var(--ast-global-color-6));
}

.fcpa-active .fcpa-invoice-fallback .fcpa-invoice-fallback-table thead th {
    background-color: var(--fcpa-surface, var(--ast-global-color-4));
    color: var(--fcpa-text, var(--ast-global-color-2));
    font-weight: 600;
    white-space: nowrap;
}

.fcpa-active .fcpa-invoice-fallback .fcpa-invoice-fallback-table tbody tr:last-child td {
    border-bottom: 0;
}

.fcpa-active .fcpa-invoice-fallback .fcpa-invoice-fallback-table td {
    color: var(--fcpa-muted, var(--ast-global-color-3));
}

.fcpa-active .fcpa-invoice-fallback .fcpa-invoice-fallback-order a {
    font-weight: 600;
    color: var(--fcpa-text, var(--ast-global-color-2));
    text-decoration: none;
}

.fcpa-active .fcpa-invoice-fallback .fcpa-invoice-fallback-order a:hover,
.fcpa-active .fcpa-invoice-fallback .fcpa-invoice-fallback-order a:focus-visible {
    color: var(--fcpa-accent, var(--ast-global-color-1));
    text-decoration: underline;
}

.fcpa-active .fcpa-invoice-fallback .fcpa-invoice-fallback-date,
.fcpa-active .fcpa-invoice-fallback .fcpa-invoice-fallback-status {
    white-space: nowrap;
}

.fcpa-active .fcpa-invoice-fallback .fcpa-invoice-fallback-total {
    font-weight: 600;
    color: var(--fcpa-text, var(--ast-global-color-2));
    white-space: nowrap;
}

.fcpa-active .fcpa-invoice-fallback .fcpa-invoice-fallback-view {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--fcpa-accent, var(--ast-global-color-1));
    border-radius: 8px;
    background-color: transparent;
    color: var(--fcpa-accent, var(--ast-global-color-1));
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}

.fcpa-active .fcpa-invoice-fallback .fcpa-invoice-fallback-view:hover,
.fcpa-active .fcpa-invoice-fallback .fcpa-invoice-fallback-view:focus,
.fcpa-active .fcpa-invoice-fallback .fcpa-invoice-fallback-view:focus-visible {
    background-color: var(--fcpa-accent, var(--ast-global-color-1));
    color: var(--fcpa-accent-text, var(--ast-global-color-5));
}

.fcpa-active .fcpa-invoice-fallback .fcpa-invoice-fallback-empty {
    color: var(--fcpa-muted, var(--ast-global-color-3));
}

.fcpa-active .fcpa-invoice-fallback .fcpa-invoice-fallback-cta {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 18px;
    border: 1px solid var(--fcpa-accent, var(--ast-global-color-1));
    border-radius: 8px;
    background-color: var(--fcpa-accent, var(--ast-global-color-1));
    color: var(--fcpa-accent-text, var(--ast-global-color-5));
    font-weight: 500;
    text-decoration: none;
}

.fcpa-active .fcpa-invoice-fallback .fcpa-invoice-fallback-more {
    margin-top: 14px;
    font-size: 14px;
}

.fcpa-active .fcpa-invoice-fallback .fcpa-invoice-fallback-more a {
    color: var(--fcpa-accent, var(--ast-global-color-1));
}

.fcpa-active .fcpa-invoice-fallback .fcpa-invoice-fallback-more a:hover,
.fcpa-active .fcpa-invoice-fallback .fcpa-invoice-fallback-more a:focus-visible {
    text-decoration: underline;
}

/* --- 10. Tax summary rows + body links (v1.3.12) ---------------------
   The tax summary rows ship light ink #1E293B (thank_you.css) —
   invisible on the dark-scheme surface; pin them to the text role.
   Body links (e.g. "pay from here") get the accent role and lose the
   underline that Astra's per-page dynamic CSS forces on .entry-content
   links. */
.fct-thank-you-page .fct-thank-you-page-body .fct-thank-you-tax-summary-row {
    color: var(--ast-global-color-2) !important;
}

.fct-thank-you-page .fct-thank-you-page-body a {
    color: var(--ast-global-color-7) !important;
    text-decoration: none !important;
}
.fct-thank-you-page .fct-thank-you-page-body a:hover {
    color: var(--ast-global-color-0) !important;
}