/* EU Withdrawal Button — Frontend Styles

   The form is printed inside a theme the plugin does not know, and looks like part of it: the
   theme's text, fields and buttons. This file holds only what the form needs whatever the theme:
   the layout of the lines and of the two buttons, one focus ring, one border a field can be seen
   by, the four status colours, what hides for the eye and not for a screen reader.
   Mobile first: the base is the narrow layout, one min-width query widens the button rows.

   Rules (tests/StylesheetTest.php computes them from this file):
   - A text colour is set only together with the background it stands on, and the pair has
     4.5 : 1: that is the four status pills and nothing else. Every other text takes the theme's
     colour, which is legible on the theme's background. No opacity on a text.
   - No size in px for a text, no background, colour, radius or face on a field or a button.
   - A floor (:where(), specificity 0) says what a theme that styles nothing still shows: a theme's
     own rule always wins it, so nothing here needs !important. The one !important is
     .ewb-visually-hidden, written as WordPress's own .screen-reader-text is. */

/* ---------- The wrapper ---------- */
.ewb-form-wrap {
    max-width: 640px;
}
/* A container the script and a fragment put the focus on, not a control: no ring round the form. */
.ewb-form-wrap:focus { outline: none; }

/* ---------- The floor: the theme's rule wins wherever it has one ---------- */
:where(.ewb-form) :where(input, textarea, select, button) { font: inherit; }
:where(.ewb-form) :where(input[type="text"], input[type="email"], input[type="date"], input[type="number"], textarea, select) { padding: .5em .6em; }
:where(.ewb-btn-find, .ewb-btn-review, .ewb-btn-submit, .ewb-btn-edit, .ewb-btn-return) { padding: .6em 1.2em; cursor: pointer; }
:where(a.ewb-btn-return) { display: inline-block; text-decoration: none; }

/* ---------- The legal banner and the notices ---------- */
/* The theme's text colour, an outline, and a 4 px bar whose accent is not text. */
.ewb-legal-info,
.ewb-notice {
    margin: 0 0 1.25em;
    padding: .75em 1em;
    border: 1px solid currentColor;
    border-left-width: 4px;
}
.ewb-legal-info p { margin: 0; }
.ewb-notice--success { border-left-color: var(--wc-green, #007518); }
.ewb-notice--error { border-left-color: var(--wc-red, #b32d2e); }
.ewb-notice--late { border-left-color: #996800; }
.ewb-form-messages:focus { outline: none; }
.ewb-form-messages:empty { display: none; }

/* ---------- Fields ---------- */
.ewb-form .ewb-field { margin-bottom: 1em; }
.ewb-form label,
.ewb-form .ewb-label {
    display: block;
    margin-bottom: .35em;
}
/* The one thing of ours on a field: a border that is 3 : 1 on a light and on a dark page. */
.ewb-form input[type="text"],
.ewb-form input[type="email"],
.ewb-form input[type="date"],
.ewb-form textarea,
.ewb-form select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #767676;
}
.ewb-form input[type="number"].ewb-line-qty {
    width: 6em;
    box-sizing: border-box;
    border: 1px solid #767676;
}
/* The focus ring: one for every field, outside its border. */
.ewb-form input[type="text"]:focus,
.ewb-form input[type="email"]:focus,
.ewb-form input[type="date"]:focus,
.ewb-form input[type="number"].ewb-line-qty:focus,
.ewb-form textarea:focus,
.ewb-form select:focus {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}
/* No colour: these stand on the theme's background. */
.ewb-required { margin-left: 3px; }
.ewb-optional { font-weight: 400; font-size: .875em; margin-left: .3em; }
.ewb-field-note { font-size: .875em; margin: .35em 0 0; }
/* The count under the account's field is empty until the script fills it: out of the page whatever a theme says of a paragraph. */
.ewb-iban-count[hidden] { display: none; }
/* A link the size of a finger (WCAG 2.2, 2.5.8). */
.ewb-another-order a { display: inline-block; padding: .3em .4em; }
/* For who does not see the page: in the page, out of sight. */
.ewb-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

/* ---------- The order's lines: a checkbox and a quantity each ---------- */
.ewb-checkboxes {
    display: flex;
    flex-direction: column;
    gap: .5em;
    margin-top: .25em;
}
.ewb-form .ewb-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: .6em;
    margin: 0;
    padding: .25em 0;
}
.ewb-checkbox-label input[type="checkbox"] {
    width: 1.125em;
    height: 1.125em;
    flex: none;
    margin: .15em 0 0;
}
.ewb-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5em 1em;
}
.ewb-line-quantity {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-size: .875em;
}
.ewb-used-up-items,
.ewb-excluded-items {
    margin: .25em 0 0 1.25em;
    font-size: .875em;
}

/* ---------- Buttons: the theme's own ---------- */
/* Only "Change" is told apart, as WooCommerce's own form tells its secondary button. */
.ewb-btn-edit.button {
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
}
.ewb-submit-wrap {
    display: flex;
    flex-direction: column;
    gap: .75em;
    margin-top: 1.5em;
}
.ewb-submit-wrap > .button {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}
/* The button that opens the form keeps its natural width, and never makes a page scroll sideways. */
.ewb-btn-return {
    max-width: 100%;
    box-sizing: border-box;
}
.ewb-btn-submit[aria-disabled="true"],
.ewb-btn-edit[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
@media (min-width: 601px) {
    .ewb-submit-wrap {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
    .ewb-submit-wrap > .button { width: auto; }
}

/* ---------- Step 2: the statement as it will be recorded ---------- */
.ewb-review-items { margin: 0 0 1em 1.25em; }
.ewb-review-rows { margin: 0 0 1em; }
.ewb-review-row { margin: 0 0 .5em; }
.ewb-review-row dt { font-weight: 600; }
.ewb-review-row dd { margin: 0; }

/* ---------- The order's page ---------- */
.ewb-order-detail-cta {
    margin: 1.5em 0;
    padding: 1em;
    border: 1px solid rgba(128, 128, 128, .45);
}
.ewb-order-detail-cta p { margin: 0 0 .75em; }
.ewb-withdrawal-note { font-size: .875em; margin: .75em 0 0; }
.ewb-order-withdrawals { margin: 1.5em 0; }
.ewb-withdrawal-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ewb-withdrawal {
    margin: 0 0 .75em;
    padding: .75em 0 0;
    border-top: 1px solid rgba(128, 128, 128, .45);
}
.ewb-withdrawal p,
.ewb-withdrawal ul { margin: 0 0 .4em; }
.ewb-withdrawal__made { font-weight: 600; }

/* The status of a withdrawal: a pill whose colours are a pair, whatever the theme. */
.ewb-status-btn {
    display: inline-block;
    padding: .35em .9em;
    border: 1px solid;
    border-radius: 1.25em;
    font-size: .875em;
    font-weight: 600;
    line-height: 1.4;
}
.ewb-status-pending {
    background: #fff3cd;
    color: #7d5800;
    border-color: #f0c030;
}
.ewb-status-approved {
    background: #d1e7dd;
    color: #0a4a28;
    border-color: #75c49a;
}
.ewb-status-rejected {
    background: #f8d7da;
    color: #7a1921;
    border-color: #f19097;
}
.ewb-status-completed {
    background: #cff4fc;
    color: #084462;
    border-color: #7ed6ef;
}

/* My Account's list: WooCommerce keeps its buttons on one line (specificity 0,3,1), and a theme
   pads them: our label, which is longer than "View", then made the table wider than a 320 px
   screen in Twenty Twenty-Five. Out-ranked here, for our two actions only. */
.woocommerce table.my_account_orders .button.ewb_return,
.woocommerce table.my_account_orders .button.ewb_withdrawals { white-space: normal; }