/* Clear so the footer link column always starts a clean second row. */
@media (min-width: 768px) {
    .uewithdrawal-footer-link {
        clear: left;
    }
}

.uewithdrawal-account-link .material-icons {
    font-size: 2rem;
}

/* Breathing room on full-width / "clean" page layouts where the theme adds no container padding. */
.uewithdrawal-app {
    max-width: 960px;
    margin: 2rem auto 3rem;
    padding: 0 1rem;
}

.uewithdrawal-order-detail {
    margin: 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.uewithdrawal-order-detail__btn--disabled {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
}

.uewithdrawal-form {
    max-width: 720px;
    margin: 0 auto;
}

.uewithdrawal-fieldset {
    border: 1px solid #ddd;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 4px;
}

.uewithdrawal-fieldset legend {
    width: auto;
    padding: 0 0.5rem;
    font-weight: 600;
}

.uewithdrawal-radio {
    display: block;
    margin: 0.5rem 0;
    cursor: pointer;
}

.uewithdrawal-lines {
    margin-top: 1rem;
    padding: 0.75rem;
    background: #f7f7f7;
    border-radius: 4px;
}

.uewithdrawal-lines__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #eaeaea;
    align-items: center;
}

.uewithdrawal-lines__row:last-child {
    border-bottom: none;
}

.uewithdrawal-lines__qty {
    width: 80px;
}

.uewithdrawal-lines__note {
    grid-column: 1 / -1;
    margin-top: 0.25rem;
    width: 100%;
}

.uewithdrawal-actions {
    margin-top: 1.5rem;
}

.uewithdrawal-submit,
.uewithdrawal-confirm-btn {
    min-width: 240px;
}

.uewithdrawal-summary {
    max-width: 720px;
    margin: 0 auto;
}

.uewithdrawal-summary__list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1rem;
    margin: 1rem 0;
}

.uewithdrawal-summary__list dt {
    font-weight: 600;
}

.uewithdrawal-summary__hint {
    background: #fff8e6;
    border: 1px solid #ffe28a;
    padding: 0.75rem;
    border-radius: 4px;
    margin: 1rem 0;
}

.uewithdrawal-prose {
    margin: 1rem 0;
}

@media (max-width: 600px) {
    .uewithdrawal-summary__list {
        grid-template-columns: 1fr;
    }
}

/* ── Step 2 product table ───────────────────────────────────── */

.uewithdrawal-app--select {
    max-width: 930px;
    margin: 0 auto;
}

.uewithdrawal-heading {
    margin: 1rem 0 0.5rem;
}

.uewithdrawal-hint {
    margin-bottom: 1rem;
    color: #555;
}

.uewithdrawal-items-wrap {
    overflow-x: auto;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    margin-bottom: 1.25rem;
}

.uewithdrawal-items {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    /* Fixed layout keeps the table exactly at container width — content wraps instead of
       widening the table, so the wrapper never needs a horizontal scrollbar. */
    table-layout: fixed;
}

/* Column widths: the Produkt column (2) has no width and absorbs the remainder. */
.uewithdrawal-items thead th:nth-child(1),
.uewithdrawal-items tbody td:nth-child(1) { width: 62px; }
.uewithdrawal-items thead th:nth-child(3),
.uewithdrawal-items tbody td:nth-child(3) { width: 98px; }
.uewithdrawal-items thead th:nth-child(4),
.uewithdrawal-items tbody td:nth-child(4) { width: 96px; }
.uewithdrawal-items thead th:nth-child(5),
.uewithdrawal-items tbody td:nth-child(5) { width: 122px; }
.uewithdrawal-items thead th:nth-child(6),
.uewithdrawal-items tbody td:nth-child(6) { width: 100px; }

/* Headers may wrap (the __num rule below forces nowrap, which would jam long labels together). */
.uewithdrawal-items thead th {
    white-space: normal;
    line-height: 1.25;
}

/* Per-column alignment: Cena left, Zamówiono + Ilość centred, Wartość right (dash centred). */
.uewithdrawal-items thead th:nth-child(3),
.uewithdrawal-items tbody td:nth-child(3) { text-align: left; }
.uewithdrawal-items thead th:nth-child(4),
.uewithdrawal-items tbody td:nth-child(4) { text-align: center; }
.uewithdrawal-items thead th:nth-child(5),
.uewithdrawal-items tbody td:nth-child(5) { text-align: center; }
.uewithdrawal-items__row--blocked .uewithdrawal-items__value,
.uewithdrawal-items__row--excluded .uewithdrawal-items__value { text-align: center; }

/* Long product names / SKUs wrap rather than force the table wider. */
.uewithdrawal-items__title { word-break: break-word; overflow-wrap: anywhere; }
.uewithdrawal-items__sku { word-break: break-all; }

.uewithdrawal-items thead th {
    background: #f5f7fa;
    color: #5a6473;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    padding: 0.7rem 0.6rem;
    border: none;
    border-bottom: 1px solid #e3e8ef;
    vertical-align: middle;
}

.uewithdrawal-items thead th:first-child,
.uewithdrawal-items tbody td:first-child {
    padding-left: 1rem;
}

.uewithdrawal-items thead th:last-child,
.uewithdrawal-items tbody td:last-child {
    padding-right: 1rem;
}

.uewithdrawal-items tbody td {
    padding: 0.75rem 0.6rem;
    border: none;
    border-bottom: 1px solid #eef1f5;
    vertical-align: middle;
    background: #fff;
}

.uewithdrawal-items tbody tr:last-child td {
    border-bottom: none;
}

.uewithdrawal-items tbody tr:not(.uewithdrawal-items__row--blocked):hover td {
    background: #f9fbfe;
}

.uewithdrawal-items__check {
    width: 56px;
    text-align: center;
}

.uewithdrawal-items__thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #eceff3;
    display: block;
    flex: 0 0 auto;
}

/* PrestaShop-style quantity stepper (−  input  +). */
.uewithdrawal-qtybox {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #ccd2da;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    height: 38px;
    vertical-align: middle;
}

.uewithdrawal-qtybox__btn {
    border: 0;
    background: #f5f7fa;
    color: #2b3445;
    width: 30px;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s;
}

.uewithdrawal-qtybox__btn:hover:not(:disabled) {
    background: #e7edf5;
}

.uewithdrawal-qtybox__btn:disabled {
    color: #c2c9d4;
    cursor: default;
}

.uewithdrawal-qtybox__input {
    width: 46px;
    border: 0;
    border-left: 1px solid #e3e8ef;
    border-right: 1px solid #e3e8ef;
    text-align: center;
    font-weight: 600;
    color: #2b3445;
    background: #fff;
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Hide the native number spinners — the −/+ buttons drive it. */
.uewithdrawal-qtybox__input::-webkit-outer-spin-button,
.uewithdrawal-qtybox__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.uewithdrawal-qtybox__input:focus {
    outline: none;
}

.uewithdrawal-qtybox__input:disabled {
    background: #f5f6f8;
    color: #a7afbd;
}

/* ── Global reasons + note (whole withdrawal) ───────────────── */

.uewithdrawal-reasons {
    margin: 1rem 0 0.75rem;
}

.uewithdrawal-reasons__label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.uewithdrawal-reasons__choice {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 1.5rem 0.5rem 0;
}

.uewithdrawal-note {
    margin-top: 0.5rem;
}

.uewithdrawal-note label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.uewithdrawal-note textarea {
    width: 100%;
}

/* ── Select step: info boxes ────────────────────────────────── */

.uewithdrawal-intro {
    background: #eef4fc;
    border-left: 4px solid #113b6c;
    border-radius: 4px;
    padding: 0.85rem 1.1rem;
    margin: 0 0 1rem;
}

.uewithdrawal-intro__head {
    margin: 0 0 0.35rem;
    color: #555;
}

.uewithdrawal-intro__text {
    margin: 0;
    color: #444;
}

.uewithdrawal-existing {
    background: #fdf1e3;
    border: 1px solid #f5d9b8;
    border-radius: 4px;
    padding: 0.85rem 1.1rem;
    margin: 0 0 1rem;
}

.uewithdrawal-existing__head {
    margin: 0 0 0.5rem;
    font-weight: 600;
}

.uewithdrawal-existing__row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.2rem 0;
}

.uewithdrawal-existing__date {
    color: #777;
    font-size: 0.9rem;
}

.uewithdrawal-existing__note {
    margin: 0.5rem 0 0;
    color: #8a6d3b;
    font-size: 0.9rem;
}

.uewithdrawal-deadline {
    background: #fff8e6;
    border: 1px solid #ffe28a;
    border-radius: 4px;
    padding: 0.75rem 1.1rem;
    margin: 0 0 1.25rem;
}

.uewithdrawal-deadline--urgent {
    background: #fdecea;
    border-color: #f5b7b1;
    color: #a8392f;
}

.uewithdrawal-deadline--info {
    background: #eef4fc;
    border-color: #c5d9f0;
    color: #2c5d8f;
}

/* ── Select step: product table tweaks ──────────────────────── */

.uewithdrawal-items__num {
    text-align: right;
    white-space: nowrap;
}

.uewithdrawal-items__product {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.uewithdrawal-items__title {
    font-weight: 500;
}

.uewithdrawal-items__sub {
    color: #888;
    font-size: 0.85rem;
    margin-top: 0.15rem;
}

.uewithdrawal-items__sku {
    color: #6b7280;
    font-size: 0.8rem;
    margin-top: 0.15rem;
}

.uewithdrawal-items__value .js-uew-line-value {
    font-weight: 600;
    color: #354052;
}

/* Per-product reason row, revealed under a ticked product. */
.uewithdrawal-items__reason-row > td {
    border-top: 0;
    padding-top: 0;
    background: #f8fafc;
}

.uewithdrawal-items__reason-cell {
    padding-bottom: 0.9rem !important;
}

.uewithdrawal-reason-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.uewithdrawal-reason-picker__label {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 500;
}

.uewithdrawal-reason-picker__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Compact pills inside the per-product reason row. */
.uewithdrawal-reason-picker .uewithdrawal-reason-btn span {
    padding: 0.4rem 0.9rem;
    font-size: 0.9rem;
}

.uewithdrawal-items__excluded {
    color: #c0392b;
    font-size: 0.85rem;
    font-style: italic;
    margin-top: 0.15rem;
}

.uewithdrawal-items__row--blocked {
    background: #fafafa;
    color: #999;
}

.uewithdrawal-items__row--blocked .uewithdrawal-items__title {
    color: #999;
}

.uewithdrawal-items__row--excluded {
    background: #fdf3f2;
}

/* Quantity cell for blocked rows (already returned / excluded): a plain muted dash. */
.uewithdrawal-items__qty-none {
    color: #c2c9d4;
    font-weight: 600;
}

/* ── Select step: reason toggle buttons ─────────────────────── */

.uewithdrawal-reasons__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.25rem;
}

.uewithdrawal-reason-btn {
    margin: 0;
    cursor: pointer;
}

.uewithdrawal-reason-btn input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.uewithdrawal-reason-btn span {
    display: inline-block;
    padding: 0.6rem 1.1rem;
    border: 1px solid #ccd2da;
    border-radius: 6px;
    background: #fff;
    color: #444;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.uewithdrawal-reason-btn:hover span {
    border-color: #113b6c;
}

.uewithdrawal-reason-btn input:checked + span {
    border-color: #113b6c;
    background: #eef4fc;
    color: #1f4e82;
    font-weight: 600;
}

.uewithdrawal-reason-btn input:focus-visible + span {
    outline: 2px solid #113b6c;
    outline-offset: 2px;
}

/* ── Pre-submit confirmation ────────────────────────────────── */

.uewithdrawal-confirm__card {
    background: #f6f8fb;
    border-left: 4px solid #113b6c;
    border-radius: 4px;
    padding: 1rem 1.25rem;
    margin: 0.5rem 0 1rem;
}

.uewithdrawal-confirm__title {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
}

.uewithdrawal-confirm__details {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.uewithdrawal-confirm__details th {
    width: 35%;
    text-align: left;
    font-weight: 600;
    color: #fff;
    background: #113b6c;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    vertical-align: top;
}

.uewithdrawal-confirm__details td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #e1e7f0;
    vertical-align: top;
}

.uewithdrawal-confirm__details tr:last-child th,
.uewithdrawal-confirm__details tr:last-child td {
    border-bottom: none;
}

.uewithdrawal-confirm__subtitle {
    margin: 0.25rem 0 0.5rem;
    font-size: 1rem;
    color: #333;
}

.uewithdrawal-confirm__products {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #e1e7f0;
    border-radius: 6px;
    overflow: hidden;
}

.uewithdrawal-confirm__products thead th {
    background: #eef2f8;
    color: #5a6473;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: left;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid #e1e7f0;
}

.uewithdrawal-confirm__products td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid #eef1f5;
}

/* Numeric headers sit over their own column, not over the product name. */
.uewithdrawal-app .uewithdrawal-confirm__products thead th.uewithdrawal-confirm__qty,
.uewithdrawal-app .uewithdrawal-confirm__products thead th.uewithdrawal-confirm__value {
    text-align: right;
}

.uewithdrawal-confirm__products tfoot th,
.uewithdrawal-confirm__products tfoot td {
    padding: 0.5rem 0.75rem;
    border-bottom: none;
}

.uewithdrawal-confirm__products tfoot tr:first-child th,
.uewithdrawal-confirm__products tfoot tr:first-child td {
    border-top: 2px solid #e1e7f0;
}

.uewithdrawal-confirm__products tbody tr:last-child td {
    border-bottom: none;
}

.uewithdrawal-confirm__qty {
    text-align: right;
    white-space: nowrap;
    width: 110px;
}

.uewithdrawal-confirm__warn {
    background: #fff8e1;
    border-left: 4px solid #f0ad4e;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

/* Free text kept as the merchant typed it (addresses, notes). */
.uewithdrawal-app .uewithdrawal-confirm__pre,
.uewithdrawal-app .uewithdrawal-confirm__return-note {
    white-space: pre-line;
}

/* Native file input replaced by the "Dodaj pliki" button. */
.uewithdrawal-app .uewithdrawal-attach__input {
    display: none;
}

.uewithdrawal-app .uewithdrawal-confirm__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    justify-content: space-between;
}

.uewithdrawal-app .uewithdrawal-confirm__submit {
    flex: 0 1 auto;
    min-width: 260px;
}

.js-uew-cancel {
    padding: 0.5rem 1.6rem;
    background: #113b6c;
    border: 1px solid #113b6c;
    color: #fff;
    border-radius: 4px;
}

.js-uew-cancel:hover,
.js-uew-cancel:focus {
    background: #0d2e54;
    border-color: #0d2e54;
    color: #fff;
}

@media (max-width: 575px) {
    /* Same specificity as the rule above, or it would not win on phones. */
    .uewithdrawal-app .uewithdrawal-confirm__actions {
        justify-content: stretch;
    }

    .uewithdrawal-app .uewithdrawal-confirm__submit {
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* ── Step 3 thank-you ───────────────────────────────────────── */

.uewithdrawal-thanks {
    max-width: 720px;
    margin: 2rem auto;
    padding: 1.5rem;
    text-align: center;
}

.uewithdrawal-thanks h2 {
    margin-top: 0;
}

.uewithdrawal-thanks__ref {
    margin-top: 1rem;
    font-size: 1.1rem;
}

/* ── Identify (guest helper) ────────────────────────────────── */

.uewithdrawal-guest-notice {
    background: #f7f7f7;
    border-left: 4px solid #888;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

/* ── Tabs (CSS-only, radio-driven) ──────────────────────────── */

.uewithdrawal-tabs__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.uewithdrawal-tabs__nav {
    display: flex;
    gap: 0.25rem;
    border-bottom: 2px solid #e5e5e5;
    margin-bottom: 1.5rem;
}

.uewithdrawal-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.1rem;
    margin-bottom: -2px;
    cursor: pointer;
    font-weight: 600;
    color: #777;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.uewithdrawal-tabs__tab:hover {
    color: #333;
}

.uewithdrawal-tabs__count {
    display: inline-block;
    min-width: 1.4rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: #e5e5e5;
    color: #555;
    font-size: 0.8rem;
    text-align: center;
    line-height: 1.4;
}

/* Active tab + matching panel via :checked ~ sibling selectors */
#uew-tab-new:checked ~ .uewithdrawal-tabs__nav .uewithdrawal-tabs__tab--new,
#uew-tab-list:checked ~ .uewithdrawal-tabs__nav .uewithdrawal-tabs__tab--list {
    color: #1565c0;
    border-bottom-color: #1565c0;
}

#uew-tab-new:checked ~ .uewithdrawal-tabs__nav .uewithdrawal-tabs__tab--new .uewithdrawal-tabs__count,
#uew-tab-list:checked ~ .uewithdrawal-tabs__nav .uewithdrawal-tabs__tab--list .uewithdrawal-tabs__count {
    background: #1565c0;
    color: #fff;
}

.uewithdrawal-tabs__panel {
    display: none;
}

#uew-tab-new:checked ~ .uewithdrawal-tabs__panel--new,
#uew-tab-list:checked ~ .uewithdrawal-tabs__panel--list {
    display: block;
}

#uew-tab-new:focus-visible ~ .uewithdrawal-tabs__nav .uewithdrawal-tabs__tab--new,
#uew-tab-list:focus-visible ~ .uewithdrawal-tabs__nav .uewithdrawal-tabs__tab--list {
    outline: 2px solid #1565c0;
    outline-offset: 2px;
}

/* ── Order-history list: injected withdrawal link ───────────── */

.uewithdrawal-history-link {
    white-space: nowrap;
}

/* Non-clickable link for an order not eligible for withdrawal. */
.uewithdrawal-history-link--disabled {
    color: #000;
    cursor: not-allowed;
    text-decoration: none;
    pointer-events: none;
}

/* Self-contained SVG info icon (no Material Icons font dependency). */
.uewithdrawal-history-link__info {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 0.3rem;
    vertical-align: middle;
    /* Spaces are %20-encoded so the CSS combiner cannot mangle the data URI. */
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='12'%20cy='12'%20r='11'%20fill='%23000'/%3E%3Ccircle%20cx='12'%20cy='7.2'%20r='1.5'%20fill='%23fff'/%3E%3Crect%20x='10.6'%20y='10.3'%20width='2.8'%20height='7.8'%20rx='1.4'%20fill='%23fff'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    text-decoration: none;
    cursor: help;
    position: relative;
    pointer-events: auto;
}

/* Raise the icon while the tooltip shows so the bubble paints over the next row. */
.uewithdrawal-history-link__info[data-uew-tip]:hover,
.uewithdrawal-history-link__info[data-uew-tip]:focus {
    z-index: 1001;
}

/* CSS-only tooltip shown on hover/focus of the icon. */
.uewithdrawal-history-link__info[data-uew-tip]:hover::after,
.uewithdrawal-history-link__info[data-uew-tip]:focus::after {
    content: attr(data-uew-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    width: max-content;
    max-width: 240px;
    white-space: normal;
    background: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    /* Force a normal text font and disable ligatures on the icon element. */
    font-family: Arial, Helvetica, "Segoe UI", Roboto, sans-serif;
    font-feature-settings: normal;
    -webkit-font-feature-settings: normal;
    font-weight: 400;
    font-style: normal;
    text-transform: none;
    letter-spacing: normal;
    direction: ltr;
    font-size: 0.8rem;
    line-height: 1.35;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    pointer-events: none;
}

/* ── Customer's existing withdrawals ────────────────────────── */

.uewithdrawal-request {
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    background: #fff;
}

.uewithdrawal-request__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.uewithdrawal-request__ref {
    font-weight: 600;
}

.uewithdrawal-request__status {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    background: #eee;
    color: #444;
    white-space: nowrap;
}

.uewithdrawal-status--confirmed {
    background: #e3f2fd;
    color: #1565c0;
}

.uewithdrawal-status--accepted {
    background: #e8f5e9;
    color: #2e7d32;
}

.uewithdrawal-status--completed {
    background: #e0f2f1;
    color: #00695c;
}

.uewithdrawal-status--rejected {
    background: #fdecea;
    color: #c62828;
}

.uewithdrawal-status--expired {
    background: #f5f5f5;
    color: #777;
}

.uewithdrawal-status--cancelled {
    background: #eceff1;
    color: #37474f;
}

.uewithdrawal-request__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    margin-top: 0.5rem;
    color: #666;
    font-size: 0.9rem;
}

.uewithdrawal-request__lines {
    margin: 0.75rem 0 0;
    padding-left: 0;
    list-style: none;
}

.uewithdrawal-request__lines li {
    margin-bottom: 0.35rem;
}

/* One product row: thumbnail · linked name · quantity. */
.uewithdrawal-request__line {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.uewithdrawal-request__line-thumb {
    flex: 0 0 auto;
    display: inline-flex;
    width: 44px;
    height: 44px;
}

.uewithdrawal-request__line-thumb img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: #fff;
}

.uewithdrawal-request__line-name {
    flex: 1 1 auto;
}

.uewithdrawal-request__line-name a {
    color: inherit;
    text-decoration: none;
}

.uewithdrawal-request__line-name a:hover,
.uewithdrawal-request__line-name a:focus {
    text-decoration: underline;
}

.uewithdrawal-request__line-qty {
    flex: 0 0 auto;
    white-space: nowrap;
    color: #555;
}

.uewithdrawal-request__history {
    margin-top: 0.75rem;
    font-size: 0.9rem;
}

.uewithdrawal-request__history summary {
    cursor: pointer;
    color: #1565c0;
}

.uewithdrawal-request__history ul {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
    color: #666;
}

@media (max-width: 600px) {
    .uewithdrawal-items__img,
    .uewithdrawal-items__available {
        display: none;
    }
}

/* Custom order picker (identify step) — replaces the native select so the list always
   opens downward and ineligible orders can be greyed out with a reason. */
.uewithdrawal-orderpick__control {
    position: relative;
}

.uewithdrawal-orderpick__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    cursor: pointer;
    background: #fff;
}

.uewithdrawal-orderpick__arrow {
    margin-left: 0.5rem;
    color: #777;
}

.uewithdrawal-orderpick__list {
    position: absolute;
    z-index: 50;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.uewithdrawal-orderpick__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    cursor: pointer;
}

.uewithdrawal-orderpick__option:hover,
.uewithdrawal-orderpick__option:focus {
    background: #f0f4ff;
    outline: none;
}

.uewithdrawal-orderpick__option--ineligible {
    color: #9aa0a6;
    cursor: not-allowed;
}

.uewithdrawal-orderpick__option--ineligible:hover,
.uewithdrawal-orderpick__option--ineligible:focus {
    background: #f7f7f8;
}

.uewithdrawal-orderpick__badge {
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 600;
    color: #b02a37;
    background: #fdecea;
    border-radius: 10px;
    padding: 1px 8px;
    white-space: nowrap;
}

/* Eligible orders get a green "Odstąp od umowy" badge for readability. */
.uewithdrawal-orderpick__badge--ok {
    color: #1e7e44;
    background: #e6f6ec;
}

.uewithdrawal-orderpick__reason {
    margin: 0.5rem 0 0;
    color: #b02a37;
    font-size: 0.9rem;
}

/* ── Product values (item prices, confirm summary, my requests) ─ */

.uewithdrawal-items__price {
    white-space: nowrap;
}

.uewithdrawal-confirm__value {
    text-align: right;
    white-space: nowrap;
    width: 130px;
}

.uewithdrawal-confirm__sum-row th,
.uewithdrawal-confirm__sum-row td,
.uewithdrawal-confirm__discount-row th,
.uewithdrawal-confirm__discount-row td {
    font-weight: 500;
    color: #5a6473;
}

.uewithdrawal-confirm__total-row th,
.uewithdrawal-confirm__total-row td {
    font-weight: 700;
    background: #f7faff;
}

.uewithdrawal-app .uewithdrawal-confirm__products tfoot th,
.uewithdrawal-app .uewithdrawal-confirm__products tfoot td.uewithdrawal-confirm__value {
    text-align: right;
}

.uewithdrawal-request__line-value {
    flex: 0 0 auto;
    margin-left: auto;
    font-weight: 600;
    color: #354052;
    white-space: nowrap;
}

.uewithdrawal-request__line-reason {
    flex: 0 0 100%;
    margin-top: 0.15rem;
    color: #6b7280;
    font-size: 0.85rem;
}

.uewithdrawal-request__line-reason::before {
    content: "↳ ";
}

.uewithdrawal-confirm__reason {
    color: #354052;
}

.uewithdrawal-request__total {
    margin: 0.4rem 0 0;
    text-align: right;
    color: #354052;
}

/* ── Refund method note (fast payments) ────────────────────────── */

.uewithdrawal-refund-method {
    white-space: pre-line;
    margin: 1rem 0;
}

/* ── Step 3 "what next" return instructions ────────────────────── */

.uewithdrawal-next {
    max-width: 720px;
    margin: 1.5rem auto;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid #e1e7f0;
    border-radius: 8px;
}

.uewithdrawal-next__title {
    margin-top: 0;
}

.uewithdrawal-next__steps {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.uewithdrawal-next__steps li {
    margin-bottom: 0.5rem;
}

.uewithdrawal-next__address {
    white-space: pre-line;
    margin-top: 0.35rem;
    padding: 0.6rem 0.85rem;
    background: #f6f8fb;
    border: 1px solid #e3e8ef;
    border-radius: 6px;
    font-weight: 600;
}

.uewithdrawal-app .uewithdrawal-next__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    justify-content: space-between;
}

/* Blocked state (select step / ineligible pick): greyed, non-actionable submit. */
.uewithdrawal-submit:disabled,
.btn.uewithdrawal-submit.disabled,
.js-uew-cta:disabled,
.js-uew-cta.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.uewithdrawal-blocked__order {
    margin-bottom: 0.75rem;
}

.uewithdrawal-blocked__reason {
    margin-bottom: 1rem;
}

/* ── Phones: product rows become cards, confirmation tables stack ── */

/* The fixed column widths above add up to more than a phone is wide, which left
   the product column no room at all. Below 600px every product row is a small
   grid instead; the cells carry their column name in data-label. */
@media (max-width: 600px) {
    /* Block, not table: the table width algorithm would still size the rows
       from the nowrap amounts and push them past the screen edge. */
    .uewithdrawal-items,
    .uewithdrawal-items tbody {
        display: block;
        width: 100%;
    }

    .uewithdrawal-items thead {
        display: none;
    }

    .uewithdrawal-items tbody tr.uewithdrawal-items__row {
        display: grid;
        grid-template-columns: 1.75rem minmax(0, 1fr) auto;
        grid-template-areas:
            "check name  name"
            ".     price ordered"
            ".     qty   value";
        gap: 0.5rem 0.75rem;
        align-items: center;
        padding: 0.85rem 1rem;
        border-bottom: 1px solid #eef1f5;
    }

    .uewithdrawal-items tbody tr.uewithdrawal-items__row > td {
        display: block;
        width: auto;
        padding: 0;
        border: 0;
        text-align: left;
        background: transparent;
    }

    .uewithdrawal-items tbody tr.uewithdrawal-items__row > td:nth-child(1) { grid-area: check; align-self: start; }
    .uewithdrawal-items tbody tr.uewithdrawal-items__row > td:nth-child(2) { grid-area: name; }
    .uewithdrawal-items tbody tr.uewithdrawal-items__row > td:nth-child(3) { grid-area: price; }
    .uewithdrawal-items tbody tr.uewithdrawal-items__row > td:nth-child(4) { grid-area: ordered; text-align: right; }
    .uewithdrawal-items tbody tr.uewithdrawal-items__row > td:nth-child(5) { grid-area: qty; }
    .uewithdrawal-items tbody tr.uewithdrawal-items__row > td:nth-child(6) { grid-area: value; text-align: right; }

    .uewithdrawal-items tbody tr.uewithdrawal-items__row > td:nth-child(3) {
        white-space: normal;
    }

    .uewithdrawal-items tbody td[data-label]::before,
    .uewithdrawal-confirm__products tbody td[data-label]::before {
        content: attr(data-label) ": ";
        color: #6b7280;
        font-size: 0.85rem;
        font-weight: 400;
    }

    /* Next to the stepper the amount gets its label on the line above. */
    .uewithdrawal-items tbody tr.uewithdrawal-items__row > td:nth-child(6)::before {
        display: block;
    }

    /* :not([hidden]) — the row stays hidden until its product is ticked. */
    .uewithdrawal-items tbody tr.uewithdrawal-items__reason-row:not([hidden]) {
        display: block;
        border-bottom: 1px solid #eef1f5;
        background: #f8fafc;
    }

    .uewithdrawal-items tbody tr.uewithdrawal-items__reason-row > td:first-child {
        display: none;
    }

    .uewithdrawal-items tbody tr.uewithdrawal-items__reason-row > td {
        display: block;
        padding: 0.75rem 1rem 0.9rem;
    }

    .uewithdrawal-items tbody tr:last-child {
        border-bottom: 0;
    }

    .uewithdrawal-confirm__details th,
    .uewithdrawal-confirm__details td {
        display: block;
        width: auto;
    }

    .uewithdrawal-confirm__details th {
        border-bottom: 0;
    }

    .uewithdrawal-confirm__details td {
        overflow-wrap: anywhere;
    }

    /* Four columns do not fit a phone: one card per product, totals as label/amount lines. */
    .uewithdrawal-confirm__products,
    .uewithdrawal-confirm__products tbody,
    .uewithdrawal-confirm__products tfoot,
    .uewithdrawal-confirm__products tr {
        display: block;
        width: 100%;
    }

    .uewithdrawal-confirm__products thead {
        display: none;
    }

    .uewithdrawal-confirm__products tbody tr {
        padding: 0.6rem 0.75rem;
        border-bottom: 1px solid #eef1f5;
    }

    .uewithdrawal-app .uewithdrawal-confirm__products tbody td {
        display: block;
        padding: 0.1rem 0;
        border: 0;
        text-align: left;
        width: auto;
        white-space: normal;
        background: transparent;
    }

    .uewithdrawal-confirm__products tbody td.uewithdrawal-confirm__name {
        font-weight: 500;
        margin-bottom: 0.2rem;
    }

    .uewithdrawal-confirm__products tfoot tr:not([hidden]) {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.5rem 0.75rem;
    }

    .uewithdrawal-app .uewithdrawal-confirm__products tfoot th,
    .uewithdrawal-app .uewithdrawal-confirm__products tfoot td {
        width: auto;
        padding: 0;
        border: 0;
        text-align: left;
        background: transparent;
    }

    /* The label takes the line, the amount keeps to the right in one piece. */
    .uewithdrawal-app .uewithdrawal-confirm__products tfoot th {
        flex: 1 1 auto;
    }

    .uewithdrawal-app .uewithdrawal-confirm__products tfoot td {
        flex: 0 0 auto;
        white-space: nowrap;
        text-align: right;
    }

    /* The empty cell under the "Powód" column. */
    .uewithdrawal-confirm__products tfoot td:empty {
        display: none;
    }

    /* One separator over the totals instead of a broken line per cell. */
    .uewithdrawal-confirm__products tfoot {
        border-top: 2px solid #e1e7f0;
    }

    .uewithdrawal-confirm__products tfoot tr:first-child th,
    .uewithdrawal-confirm__products tfoot tr:first-child td {
        border-top: 0;
    }
}