/*
 * remitza v4 theme, Part 2 phase 3: customer-site components (Part 2 spec 7.10, 7.13, 7.15, 8.11-8.13).
 * Loaded last and only on the customer site (AdminTheme::FRONTEND_STYLESHEETS), so it wins ties with every shared file.
 * Every selector starts with body.rz-theme.rz-app-frontend. The new-exchange form hides the method fields, the QR row,
 * the rate card, the Billing To cascade, the step panels, the submit button and the completion step with .hidden,
 * .d-none, inline styles and jQuery .hide() (spec 4.8, 7.13 item 5): no rule here sets display on any of them, and no
 * rule here uses display with !important.
 */

/* ---------- New exchange: step box and step panels (spec 7.13 item 1) ---------- */

/* The card body pads 20px (forms.css, spec 7.2), so the step box and its panels add none */
body.rz-theme.rz-app-frontend .dcat-step-box {
    padding: 0 !important; /* beats the inline padding (form-step default 30px 18px) and the phone patch .dcat-step-box { padding: 30px 0 !important } */
}

body.rz-theme.rz-app-frontend .dcat-step-form .box-body.fields-group {
    padding: 0; /* Dcat .box-body { padding: 10px } */
}

/* ---------- New exchange: step pills (spec 7.13 item 2; v4 Stepper.tsx:25-62) ----------
 * ul.dcat-step > li.dcat-step-item(.active | .done | .danger) > a.dcat-step-item-container > .dcat-step-icons + .dcat-step-content.
 * step.css keeps display: flex on the list. On phones and tablets the page script hides the list with jQuery
 * (ReloadController.php:199-206); nothing here changes that.
 */
body.rz-theme.rz-app-frontend .dcat-step {
    gap: 6px;
    margin: 0 0 24px; /* step.css: margin: 0 auto 30px */
}

body.rz-theme.rz-app-frontend .dcat-step .dcat-step-item {
    flex: 1 1 0; /* step.css gives the last item flex: none (0,2,0) */
    margin-right: 0; /* step.css: margin-right: 16px (0,3,0) */
}

body.rz-theme.rz-app-frontend .dcat-step .dcat-step-item-container {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border) !important; /* step.css: .dcat-step-item-container { border: 0 !important } */
    border-radius: 16px;
    background-color: var(--paper-2);
    cursor: default; /* finished steps cannot be clicked (enableAnchorOnDoneStep: false) */
}

body.rz-theme.rz-app-frontend .dcat-step .dcat-step-icons {
    flex: none; /* a flex item shrinks by default; the title column (min-width: 0 below) gives way instead, so the circle stays 24px wide */
    width: 24px;
    height: 24px;
    margin: 0; /* step.css: margin-right: 8px; the pill's gap spaces it */
    border: 0; /* step.css draws a 1px ring; steps.blade.php colours it on the current and finished steps */
    background-color: var(--secondary); /* same specificity as dark.css .dcat-step .dcat-step-icons (0,4,1); this file loads later */
    font-size: 12px;
    line-height: 24px; /* step.css sizes the old 32px circle at 16px / 32px, whose taller line would sit the number low */
}

body.rz-theme.rz-app-frontend .dcat-step .dcat-step-icons > .dcat-step-icon {
    top: 0; /* step.css: top: -1px */
    color: var(--text-2); /* same specificity as dark.css .dcat-step-icons > .dcat-step-icon (0,5,1); this file loads later */
    font-size: 12px;
    font-weight: 600;
    line-height: 24px;
}

/* min-width: 0 lets the text column shrink inside the flex pill, so a long title ends in an ellipsis */
body.rz-theme.rz-app-frontend .dcat-step .dcat-step-content {
    min-width: 0;
}

body.rz-theme.rz-app-frontend .dcat-step .dcat-step-title {
    max-width: 100%; /* step.css makes the title inline-block, which never narrows below its text without a cap */
    padding-right: 0; /* step.css: 16px of room for the connecting line */
    overflow: hidden;
    color: var(--text-2); /* same specificity as dark.css .dcat-step .dcat-step-title (0,4,1); this file loads later */
    font-size: 12.5px; /* step.css: 16px */
    font-weight: 500;
    line-height: 20px; /* step.css: 32px */
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.rz-theme.rz-app-frontend .dcat-step .dcat-step-title::after {
    content: none; /* step.css: the 9999px connecting line */
}

body.rz-theme.rz-app-frontend .dcat-step .dcat-step-desc:empty {
    display: none; /* the finished step's empty description */
}

/* Current step. steps.blade.php prints @primary fills and white numbers into the page body (0,2,0) and (0,3,0) */
body.rz-theme.rz-app-frontend .dcat-step .active > .dcat-step-item-container {
    border-color: var(--ring-halo) !important; /* the pill rule above sets its border with !important */
    background-color: var(--brand-soft);
}

body.rz-theme.rz-app-frontend .dcat-step .active .dcat-step-icons {
    background-color: var(--brand);
}

body.rz-theme.rz-app-frontend .dcat-step .active .dcat-step-icons > .dcat-step-icon {
    color: var(--brand-ink); /* white on orange is 1.95:1 */
}

body.rz-theme.rz-app-frontend .dcat-step .active .dcat-step-title {
    color: var(--foreground); /* step.css (0,4,0); in dark mode dark.css's full-path rule (0,7,1) gives the same colour */
}

/* Finished steps: the number becomes a tick */
body.rz-theme.rz-app-frontend .dcat-step .done > .dcat-step-item-container {
    background-color: var(--card);
}

body.rz-theme.rz-app-frontend .dcat-step .done .dcat-step-icons {
    background-color: var(--brand); /* step.css: white; Dcat's own dark rule: transparent (0,4,1) */
}

body.rz-theme.rz-app-frontend .dcat-step .done .dcat-step-icons > .dcat-step-icon {
    font-size: 0; /* hides the number; ::before draws the tick */
}

body.rz-theme.rz-app-frontend .dcat-step .done .dcat-step-icons > .dcat-step-icon::before {
    content: "\e83f"; /* feather check */
    color: var(--brand-ink);
    font: 14px/24px feather;
}

/* The full path is needed: dark.css colours this title with (0,7,1) */
body.rz-theme.rz-app-frontend .dcat-step .done > .dcat-step-item-container > .dcat-step-content > .dcat-step-title {
    color: var(--text-2);
}

/* A step with an error (smartWizard's .danger) */
body.rz-theme.rz-app-frontend .dcat-step .danger > .dcat-step-item-container {
    border-color: var(--err-mark) !important; /* the pill rule above sets its border with !important */
}

body.rz-theme.rz-app-frontend .dcat-step .danger .dcat-step-icons {
    background-color: var(--err-bg); /* step.css: a white circle */
}

body.rz-theme.rz-app-frontend .dcat-step .danger .dcat-step-icons > .dcat-step-icon {
    color: var(--err); /* step.css: a fixed red */
}

/* At 540px and below step.css stacks the steps as blocks, where the flex gap no longer applies */
@media (max-width: 540px) {
    body.rz-theme.rz-app-frontend .dcat-step .dcat-step-item + .dcat-step-item {
        margin-top: 6px;
    }
}

/* ---------- New exchange: button bar (spec 7.13 items 3-4) ----------
 * smartWizard builds div.btn-toolbar.sw-toolbar > .col-sm-2 + .col-sm-10 > .btn-group.sw-btn-group > .sw-btn-prev + .sw-btn-next,
 * then span.sw-btn-group-extra > .step-submit-btn. Every selector starts at .sw-toolbar: the side card's
 * "Read Terms of Service" button also carries .sw-btn-next (spec 7.13 item 4). The button order and the
 * jQuery .hide() / .show() and .d-none switching stay as they are.
 */
body.rz-theme.rz-app-frontend .sw-toolbar {
    margin: 8px 0 0; /* step.css .sw-toolbar-bottom: margin-top 20px, margin-left 5px */
}

/* The bar uses the form's label grid (forms.css, spec 7.1), so the buttons start where the fields start */
@media (min-width: 768px) {
    body.rz-theme.rz-app-frontend .sw-toolbar > .col-sm-2 {
        flex: 0 0 min(var(--rz-form-label-w), 30%);
        max-width: min(var(--rz-form-label-w), 30%);
        padding: 0;
    }

    body.rz-theme.rz-app-frontend .sw-toolbar > .col-sm-10 {
        flex: 1 1 0%;
        max-width: var(--rz-form-field-max);
        padding: 0;
    }
}

/* Below 768px the labels sit above the fields; .col-sm-* still applies from 576px, so collapse the spacer column */
@media (max-width: 767.98px) {
    body.rz-theme.rz-app-frontend .sw-toolbar > .col-sm-2 {
        flex: 0 0 0;
        max-width: 0;
        padding: 0;
        overflow: hidden;
    }

    body.rz-theme.rz-app-frontend .sw-toolbar > .col-sm-10 {
        flex: 1 1 100%;
        max-width: 100%;
        padding: 0;
    }
}

body.rz-theme.rz-app-frontend .sw-toolbar .sw-btn-group > .btn {
    margin-left: 0; /* Bootstrap .btn-group > .btn:not(:first-child): -1px */
    border-radius: 10px; /* Bootstrap joins group corners by :first-child / :last-child (0,4,0), blind to the jQuery-hidden sibling */
}

body.rz-theme.rz-app-frontend .sw-toolbar .sw-btn-group {
    box-shadow: none; /* Dcat's three-layer .btn-group shadow (0,1,0); forms.css clears it only inside .box-header and .box-footer */
}

/* Previous: neutral outline; orange is for Next and Submit only (spec 2 item 14) */
body.rz-theme.rz-app-frontend .sw-toolbar .btn.sw-btn-prev {
    border-color: var(--border);
    background-color: var(--card); /* beats Dcat's .btn.btn-default (0,2,0) and dark.css .btn.btn-default (0,4,1) */
    color: var(--text-2);
}

body.rz-theme.rz-app-frontend .sw-toolbar .btn.sw-btn-prev:hover {
    background-color: var(--hover);
    color: var(--foreground) !important; /* dark.css .btn.btn-default:hover sets color with !important (0,5,1) */
}

body.rz-theme.rz-app-frontend .sw-toolbar .btn.disabled {
    opacity: .5; /* smartWizard's unusable step button; Bootstrap: .65 */
}

body.rz-theme.rz-app-frontend .sw-toolbar .step-submit-btn {
    margin-top: 8px !important; /* the page script writes an inline margin-top (ReloadController.php:796) */
}

/* "You need to pay" stands out among the read-only amounts (spec 7.13 item 6) */
body.rz-theme.rz-app-frontend .form-field input.field_bc_total_amount {
    font-weight: 600; /* forms.css sets the control font to 400 (0,3,1) */
}

/* ---------- Step 2 bank details, written by showBankInfo() into the read-only box (spec 7.10) ---------- */
body.rz-theme.rz-app-frontend .bank-container > p {
    margin: 0 0 2px; /* Bootstrap's paragraph bottom margin */
}

body.rz-theme.rz-app-frontend .bank-container > p > span {
    color: var(--text-2);
}

body.rz-theme.rz-app-frontend .bank-container > p > strong {
    color: var(--foreground);
    font-weight: 600;
}

/* The third line is the account number */
body.rz-theme.rz-app-frontend .bank-container > p:nth-child(3) > strong {
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1;
}

/* ---------- New exchange side cards (spec 8.11) ----------
 * The card frame (14px corners, card shadow) comes from base.css's .card rule. The rate card starts with .hidden and
 * the page script removes it (ReloadController.php:965), so no rule here sets its display.
 */
body.rz-theme.rz-app-frontend .card.rate-container > .card-header {
    padding: 16px 20px 0;
    border-bottom: 0;
    background-color: transparent;
}

body.rz-theme.rz-app-frontend .card.rate-container .card-box-title {
    font-size: 17px; /* the card-title size; Clash Display 600 comes from base.css's heading rule */
    line-height: 1.3;
}

body.rz-theme.rz-app-frontend .card.rate-container > .card-body {
    padding: 12px 20px 20px;
    color: var(--text-2);
    font-size: 13px;
    font-feature-settings: "tnum" 1;
    line-height: 1.7;
}

/* updateRateContainer() writes [div.py-1 minimum invoice] + one div.pb-1 per amount range + the refresh note */
body.rz-theme.rz-app-frontend .card.rate-container > .card-body > div + div {
    border-top: 1px solid var(--border-2);
}

body.rz-theme.rz-app-frontend .card.rate-container > .card-body > .py-1,
body.rz-theme.rz-app-frontend .card.rate-container > .card-body > .pb-1 {
    padding: 10px 0 !important; /* .py-1 and .pb-1 set padding with !important */
}

body.rz-theme.rz-app-frontend .card.rate-container > .card-body > :first-child {
    padding-top: 0 !important; /* the rule above is !important */
}

body.rz-theme.rz-app-frontend .card.rate-container .card-body strong {
    color: var(--foreground);
    font-family: var(--font-mono);
    font-weight: 600;
}

/* The rate chip keeps its elements.css shape, in tabular mono like the home page rate cards */
body.rz-theme.rz-app-frontend .card.rate-container .card-body [class^="custom-tag-"] {
    font-family: var(--font-mono); /* elements.css sets chips to --font-sans (0,2,1) */
    font-weight: 600;
}

body.rz-theme.rz-app-frontend .card.rate-container > .card-body > [style*="color:red"] {
    color: var(--err) !important; /* beats the refresh note's inline colour */
    font-size: 12px;
}

/* Terms summary card: the frontend.reload "block 2 detail" string (resources/lang/{en,cn}/frontend.php) */
body.rz-theme.rz-app-frontend .mb-20 > ol {
    margin: 0 0 16px; /* the list keeps its inline padding-inline, which is !important */
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.625;
}

body.rz-theme.rz-app-frontend .mb-20 > ol > li::marker {
    color: var(--text-2);
    font-family: var(--font-mono);
    font-size: 12px;
}

/* "Read Terms of Service": neutral outline, orange is for the main action only (spec 2 item 14). It also carries
   .sw-btn-next and .btn-primary, so these selectors outrank base.css's primary button in every state (0,4,1)-(0,7,1).
   Height and corners come from the shared button shape (forms.css, Task 9), the width from .w-100. */
body.rz-theme.rz-app-frontend .mb-20 > button.reload-terms.btn.btn-primary,
body.rz-theme.rz-app-frontend .mb-20 > button.reload-terms.btn.btn-primary:focus {
    border-color: var(--border);
    background-color: var(--card);
    color: var(--text-2);
}

body.rz-theme.rz-app-frontend .mb-20 > button.reload-terms.btn.btn-primary:hover,
body.rz-theme.rz-app-frontend .mb-20 > button.reload-terms.btn.btn-primary:active {
    border-color: var(--border); /* base.css's pressed state (0,7,1) would turn the border orange */
    background-color: var(--hover);
    color: var(--foreground);
}

/* ---------- Invoice edit extras (spec 7.15) ---------- */

/* Each item is a framed block. No display here: Remove hides the block with jQuery .hide() */
body.rz-theme.rz-app-frontend .has-many-invoice_item-form {
    margin-bottom: 12px;
    padding: 16px 16px 0;
    border: 1px solid var(--border);
    border-radius: 12px;
}

body.rz-theme.rz-app-frontend .has-many-invoice_item-form > hr {
    display: none; /* the block's frame replaces the divider (form/hasmany.blade.php:27, 45) */
}

/* The sticky totals bar: a neutral card instead of white text on orange (1.95:1). The selector names .card but sets
   no display. Corners and shadow come from base.css's .card rule. */
body.rz-theme.rz-app-frontend .card.bg-primary.text-white {
    padding: 12px 20px !important; /* .p-1 is !important */
    border: 1px solid var(--border);
    background-color: var(--card) !important; /* .bg-primary is !important */
    color: var(--foreground) !important; /* .text-white is !important; this also beats the inline colour */
    z-index: 5; /* above forms.css 7.4's input prefixes (z-index 4) and Bootstrap's focused input (3), which otherwise paint over this sticky bar */
}

body.rz-theme.rz-app-frontend .card.bg-primary.text-white :is(.invoice_total_value, .grand_total_value) {
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1;
    font-weight: 600;
}

/* The running total of the entered items */
body.rz-theme.rz-app-frontend .card.bg-primary.text-white .grand_total_value {
    color: var(--brand-text);
}

/* ---------- Exchange completion page (spec 8.12) ----------
 * resources/views/frontend/reload/completion-page.blade.php, put into .dcat-done-step with jQuery .html() after a
 * successful submit; the page redirects after 5 seconds. Its own unscoped <style> (h1, .loading-bar, .progress) comes
 * with it. smartWizard shows and hides .dcat-done-step inline, so nothing here sets its display.
 */
body.rz-theme.rz-app-frontend .dcat-done-step [style*="gap: 2rem"] {
    gap: 12px !important; /* beats the content column's inline gap */
}

body.rz-theme.rz-app-frontend .dcat-done-step h1 {
    margin: 0; /* the page's own h1 { margin-bottom: 20px } */
    font-size: 24px;
    line-height: 1.3; /* Clash Display 600 and --foreground come from base.css's heading rule */
}

/* v4's success icon block above the title */
body.rz-theme.rz-app-frontend .dcat-done-step h1::before {
    content: "\e83e"; /* feather check-circle */
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    border-radius: var(--radius-card);
    background-color: var(--ok-bg);
    color: var(--ok-mark);
    font-family: feather;
    font-size: 26px;
    font-style: normal;
    font-weight: normal;
    line-height: 48px;
    letter-spacing: 0; /* the heading's -0.025em */
    text-transform: none;
}

body.rz-theme.rz-app-frontend .dcat-done-step p {
    color: var(--text-2); /* beats dark.css p (0,2,2) */
    font-size: 14px !important; /* beats each paragraph's inline font size */
    line-height: 1.6;
}

/* The "submit your invoice items" prompt, only when an invoice is needed */
body.rz-theme.rz-app-frontend .dcat-done-step h1 + p + p {
    color: var(--foreground);
    font-size: 16px !important; /* beats the inline font size */
    font-weight: 600 !important; /* beats the inline bold */
}

body.rz-theme.rz-app-frontend .dcat-done-step .loading-bar {
    height: 4px;
    margin-top: 12px;
    border-radius: 9999px;
    background-color: var(--secondary); /* the page's .loading-bar is a fixed light grey */
}

/* The "not redirected? click here" line */
body.rz-theme.rz-app-frontend .dcat-done-step .loading-bar + p {
    font-size: 12.5px !important; /* beats the inline font size */
}

/* Width and the 1s transition stay with the page script */
body.rz-theme.rz-app-frontend .dcat-done-step #progressBar {
    border-radius: 9999px;
    background-color: var(--ok-mark); /* the page's .progress is a fixed green */
}

/* ---------- Inline alerts (spec 8.13): v4 callout ----------
 * Invoice edit: the .alert-warning above the items, and the import result .alert-success / .alert-danger. They are
 * not made flex: their text breaks lines with <br>. Browsers without color-mix keep the transparent border.
 */
body.rz-theme.rz-app-frontend .alert {
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 11px;
    box-shadow: none; /* Dcat's alert colours add a drop shadow */
    color: var(--text-2);
    font-size: 13px;
    font-weight: 400; /* Dcat: 500 */
    line-height: 1.625;
}

body.rz-theme.rz-app-frontend .alert.alert-warning {
    border-color: color-mix(in srgb, var(--warn-mark) 40%, transparent);
    background-color: var(--warn-bg); /* Dcat's light warning fill stayed light in dark mode */
}

body.rz-theme.rz-app-frontend .alert.alert-success {
    border-color: color-mix(in srgb, var(--ok-mark) 40%, transparent);
    background-color: var(--ok-bg);
    color: var(--ok);
}

body.rz-theme.rz-app-frontend .alert.alert-danger {
    border-color: color-mix(in srgb, var(--err-mark) 40%, transparent);
    background-color: var(--err-bg);
    color: var(--err);
}

body.rz-theme.rz-app-frontend .alert.alert-info {
    border-color: color-mix(in srgb, var(--info-mark) 40%, transparent);
    background-color: var(--info-bg);
    color: var(--info);
}

body.rz-theme.rz-app-frontend .alert .icon {
    margin-right: 8px;
}

body.rz-theme.rz-app-frontend .alert.alert-warning .icon {
    color: var(--warn-mark); /* the warning keeps --text-2 body text, so the icon carries the status */
}

/* ---------- reCAPTCHA pop-up (spec 8.10). "z-index: 10000" survives jQuery's fadeIn rewriting the style attribute ---------- */
body.rz-theme.rz-app-frontend > div[class$="-container"][style*="z-index: 10000"] {
    background-color: var(--scrim-strong) !important; /* beats the inline background: #888888a1 */
}

body.rz-theme.rz-app-frontend > div[class$="-container"][style*="z-index: 10000"] > div > div {
    padding: 16px 10px 10px !important; /* beats the inline padding: 10px; the box stays at least 324px wide for the 304px widget */
    border: 1px solid var(--border);
    border-radius: var(--radius-card) !important; /* beats the inline border-radius: 3px */
    background-color: var(--card) !important; /* beats the inline background-color: white */
    box-shadow: var(--shadow-2xl);
    color: var(--foreground);
}

/* Also covers previewMedia's bare .close-button rule (a 40px translucent white circle) */
body.rz-theme.rz-app-frontend .close-button[class*="-close-btn"] {
    display: flex; /* centres the 14px icon in the 28px box */
    align-items: center;
    justify-content: center;
    top: 8px !important; /* beats the inline top: 0 */
    right: 8px !important; /* beats the inline right: 0 */
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--background);
}

body.rz-theme.rz-app-frontend .close-button[class*="-close-btn"] > i {
    color: var(--text-2) !important; /* beats the inline color: black */
    font-size: 14px;
}

body.rz-theme.rz-app-frontend .close-button[class*="-close-btn"]:hover {
    background-color: var(--hover);
}

body.rz-theme.rz-app-frontend .close-button[class*="-close-btn"]:hover > i {
    color: var(--foreground) !important; /* beats the inline color: black */
}