:root {
    color-scheme: light;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #021d3b;
    background: #f5f7fa;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-width: 0;
    background: #f5f7fa;
}

button, select, input { font: inherit; }

[hidden] { display: none !important; }

/* Shared by every view of the widget. The tokens live on the shell, not on
   :root, so they never leak into a page that loads this stylesheet. */
.payment-shell {
    --wr-text: #021d3b;
    --wr-muted: #53657a;
    --wr-border: #dce5f0;
    --wr-control: #c9d5e3;
    --wr-divider: #e6ecf3;
    --wr-primary: #255fea;
    --wr-primary-hover: #194fd0;
    --wr-focus: #0b57d0;
    --wr-error: #a8231b;
    width: min(100%, 32rem);
    min-width: 0;
    margin: 0 auto;
    padding: 16px;
    color: var(--wr-text);
}

.payment-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    min-width: 0;
    margin: 4px 0 20px;
}

/* The merchant above the card: its own logo, at its own proportions (never
   forced square), with the name and «Pago por banco» beside it. */
.merchant {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
}

.merchant__logo {
    display: block;
    flex: 0 0 auto;
    width: auto;
    max-width: min(45%, 168px);
    height: 52px;
    object-fit: contain;
}

.merchant__text { min-width: 0; }

.merchant__name {
    margin: 0;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.merchant__caption {
    margin: 2px 0 0;
    color: var(--wr-muted);
    font-size: 15px;
    line-height: 1.35;
}

/* Only a simulation carries a badge; a real payment shows none. */
.mode-badge {
    border-radius: 999px;
    background: #fff4cf;
    color: #694d00;
    padding: .35rem .6rem;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .04em;
}

.view {
    min-width: 0;
    border: 1px solid var(--wr-border);
    border-radius: 16px;
    background: #fff;
    padding: 28px;
    box-shadow: 0 1px 2px rgba(2, 29, 59, .04), 0 8px 24px rgba(2, 29, 59, .05);
}

/* Views take focus only so assistive technology lands on the new content;
   they are not controls, so they draw no focus ring. */
.view[tabindex="-1"]:focus { outline: none; }

h1 {
    margin: 0 0 .65rem;
    font-size: clamp(1.35rem, 6vw, 1.8rem);
    line-height: 1.2;
}

p { line-height: 1.55; }

/* Review screen. Every rule is scoped to it so the shared views keep their
   own look. One column: summary, beneficiary account, bank and action. */
.review__title {
    margin: 0;
    font-size: 28px;
    line-height: 34px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.review__amount {
    margin: 18px 0 0;
    font-size: clamp(48px, 15vw, 64px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}

/* Longer figures step down before they could ever overflow. */
.review__amount[data-length="medium"] { font-size: clamp(36px, 11vw, 56px); }
.review__amount[data-length="long"] { font-size: clamp(30px, 10vw, 48px); }

.review__beneficiary {
    margin: 12px 0 0;
    font-size: clamp(22px, 6.5vw, 26px);
    line-height: 1.25;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.review__reference {
    margin: 4px 0 0;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Informative, never alarming: only a simulation or a real-money demo shows it. */
.review__notice {
    margin: 16px 0 0;
    border-radius: 10px;
    background: #eef3fd;
    padding: 10px 12px;
    font-size: 15px;
    line-height: 1.45;
}

.review__section {
    min-width: 0;
    margin-top: 24px;
    border-top: 1px solid var(--wr-divider);
    padding-top: 24px;
}

/* «Concepto» and «Cuenta del beneficiario»: label over value, tighter than
   the bank block they lead into. */
.review__section--detail { margin-top: 20px; padding-top: 18px; }

.review__label {
    margin: 0;
    color: var(--wr-muted);
    font-size: 15px;
    line-height: 1.4;
}

.review__iban {
    margin: 4px 0 0;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.review__question {
    display: block;
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
}

/* Programmatic focus target only (after a bank is picked). */
.review__question:focus { outline: none; }

/* Bank block. State A: «Elige tu banco» + country control, search, «Bancos
   más usados» cards and the compact list. State B: the chosen bank with
   «Cambiar». The country list floats under this head, inside the card. */
.picker-head {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    margin: 0 0 14px;
}

/* One line with the country control at its right, from 320px up. */
.picker-head .review__question { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 18px; line-height: 1.3; }

/* [flag] ES ▾, as in the main widget's country selector. */
.country-pill { display: flex; flex: 0 0 auto; }

.country-pill__button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    min-height: 44px;
    border: 1px solid var(--wr-control);
    border-radius: 10px;
    background: #fff;
    padding: 0 8px 0 10px;
    color: var(--wr-text);
    font-weight: 600;
}

.country-pill__button:hover { border-color: #9fb2c8; }
.country-pill__button:focus-visible { outline: 3px solid var(--wr-focus); outline-offset: 2px; }
.country-pill__button[aria-expanded="true"] { border-color: var(--wr-primary); }

.country-pill__flag, .country-option__flag {
    display: block;
    flex: 0 0 22px;
    width: 22px;
    height: 16px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(2, 29, 59, .08);
}

.country-pill__code { font-size: 16px; line-height: 1; letter-spacing: .02em; }
.country-pill__chevron { width: 18px; height: 18px; color: var(--wr-text); transition: transform .15s ease; }
.country-pill__button[aria-expanded="true"] .country-pill__chevron { transform: rotate(180deg); }

/* Anchored to the control's right edge and never wider than the card, so it
   fits at 320px; the list scrolls inside a capped height. */
.country-popup {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    width: min(100%, 20rem);
    border: 1px solid var(--wr-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(2, 29, 59, .08), 0 16px 32px rgba(2, 29, 59, .14);
    overflow: hidden;
}

.country-popup__search {
    flex: 0 0 auto;
    width: auto;
    min-height: 44px;
    margin: 8px;
    border: 1px solid var(--wr-control);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--wr-text);
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
}

.country-popup__search::placeholder { color: var(--wr-muted); opacity: 1; }
.country-popup__search::-webkit-search-cancel-button,
.country-popup__search::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.country-popup__list {
    max-height: min(264px, 50vh);
    margin: 0;
    border-top: 1px solid var(--wr-divider);
    padding: 4px 0;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.country-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 6px 14px;
    cursor: pointer;
}

.country-option:hover { background: #f5f8fc; }
.country-option:focus { outline: none; background: #eef3fd; box-shadow: inset 3px 0 0 var(--wr-focus); }
.country-option[aria-selected="true"] .country-option__name { font-weight: 600; color: var(--wr-text); }
.country-option__code { flex: 0 0 1.75rem; font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.country-option__name { min-width: 0; color: #3d5470; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.country-popup__empty { margin: 0; padding: 12px 14px 14px; color: var(--wr-muted); font-size: 15px; line-height: 1.4; }

.picker:not([hidden]), .bank-selected:not([hidden]) { animation: picker-in .16s ease-out; }

@keyframes picker-in {
    from { opacity: 0; transform: translateY(4px); }
}

.bank-search { position: relative; min-width: 0; }

.bank-search__icon {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 20px;
    height: 20px;
    color: var(--wr-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.bank-search__input {
    width: 100%;
    min-height: 52px;
    border: 1px solid var(--wr-control);
    border-radius: 10px;
    background: #fff;
    padding: 12px 48px 12px 44px;
    color: var(--wr-text);
    font-size: 17px;
    -webkit-appearance: none;
    appearance: none;
}

.bank-search__input::placeholder { color: var(--wr-muted); opacity: 1; }
.bank-search__input::-webkit-search-cancel-button,
.bank-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.bank-search__input:focus-visible { outline: 3px solid var(--wr-focus); outline-offset: 2px; }

.bank-search__clear {
    position: absolute;
    top: 50%;
    right: 4px;
    display: grid;
    place-items: center;
    width: 44px;
    min-height: 44px;
    height: 44px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    padding: 0;
    color: var(--wr-muted);
    transform: translateY(-50%);
}

.bank-search__clear svg { width: 18px; height: 18px; }
.bank-search__clear:hover { color: var(--wr-text); background: #f1f5f9; }

.featured { margin-top: 18px; }

.picker__subtitle {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
}

/* Two columns on the narrowest phones, four in one row from 360px up; the
   cards stretch to the tallest so a two-line name never makes them uneven. */
.featured__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.featured__grid > li { display: flex; min-width: 0; }

.bank-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    min-height: 88px;
    border: 1px solid var(--wr-divider);
    border-radius: 14px;
    background: #fff;
    padding: 10px 2px 8px;
    color: var(--wr-text);
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(2, 29, 59, .05), 0 4px 12px rgba(2, 29, 59, .06);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.bank-card:hover { border-color: #b8c7d9; box-shadow: 0 1px 2px rgba(2, 29, 59, .06), 0 6px 16px rgba(2, 29, 59, .1); }
.bank-card:focus-visible { outline: 3px solid var(--wr-focus); outline-offset: 2px; }
.bank-card[aria-current="true"] { border-color: var(--wr-primary); box-shadow: 0 0 0 1px var(--wr-primary); }

.bank-card__name {
    max-width: 100%;
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: break-word;
}

/* Logos are rectangular logotypes: each slot keeps their proportions and
   the neutral bank glyph takes the slot when no image can be shown. */
.bank-logo { position: relative; display: grid; flex: 0 0 auto; place-items: center; overflow: hidden; }
/* Filled from the slot, never from the image's own size: a square or huge
   provider image is contained in the slot instead of spilling over the name. */
.bank-logo__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
/* Wealthreader's own CDN logos are 512×316 artboards whose wordmark leaves
   ~7.5% empty on each side: the image is widened by most of that margin so
   the wordmark itself nearly spans the slot, undistorted. Provider logos,
   whose framing is unknown, keep the plain contained slot above. */
.bank-logo--artboard { overflow: visible; }
.bank-logo--artboard .bank-logo__img {
    inset: 50% auto auto -6%;
    width: 112%;
    height: auto;
    aspect-ratio: 512 / 316;
    transform: translateY(-50%);
}
.bank-logo__fallback { width: 24px; height: 24px; color: var(--wr-muted); }
.bank-logo--card { width: min(72px, 100%); height: 40px; }
.bank-logo--row { width: 40px; height: 28px; }
.bank-logo--selected { width: 48px; height: 32px; }

.bank-list { margin: 12px 0 0; padding: 0; list-style: none; }
.bank-list > li + li { border-top: 1px solid var(--wr-divider); }

.bank-item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 20px;
    align-items: center;
    column-gap: 14px;
    width: 100%;
    min-height: 56px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    padding: 8px 4px;
    color: var(--wr-text);
    font-weight: 400;
    text-align: left;
}

.bank-item:hover { background: #f5f8fc; }
.bank-item:focus-visible { outline: 3px solid var(--wr-focus); outline-offset: -3px; }
.bank-item[aria-current="true"] { background: #eef3fd; }
.bank-item[aria-current="true"] .bank-item__name { font-weight: 600; }
.bank-item__name { min-width: 0; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.bank-item__chevron { width: 20px; height: 20px; color: #7a8a9c; }

.picker__more {
    margin-top: 8px;
    border: 1px solid var(--wr-control);
    border-radius: 10px;
    background: #fff;
    min-height: 48px;
    color: var(--wr-primary);
    font-size: 16px;
    font-weight: 600;
}

.picker__more:hover { border-color: #9fb2c8; background: #f8fafc; }

.picker__empty { margin-top: 16px; }
.picker__empty-text, .picker__unavailable { margin: 0; color: var(--wr-muted); font-size: 16px; line-height: 1.5; }

.picker__link {
    width: auto;
    min-height: 44px;
    margin-top: 2px;
    border: 0;
    background: transparent;
    padding: 8px 0;
    color: var(--wr-primary);
    font-size: 16px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bank-selected {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 14px;
    min-width: 0;
    min-height: 64px;
    border: 1px solid var(--wr-control);
    border-radius: 12px;
    background: #fff;
    padding: 8px 8px 8px 14px;
}

/* A fixed bank is stated, not offered: read-only tint, no «Cambiar». */
.bank-selected[data-fixed] { border-color: var(--wr-border); background: #f8fafc; padding-right: 14px; }
.bank-selected:focus { outline: none; }
.bank-selected:focus-visible { outline: 3px solid var(--wr-focus); outline-offset: 2px; }

.bank-selected__name {
    min-width: 0;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.bank-selected__change {
    width: auto;
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    padding: 8px 10px;
    color: var(--wr-primary);
    font-size: 16px;
    font-weight: 600;
}

.bank-selected__change:hover { background: #eef3fd; }
.bank-selected__change:disabled { color: var(--wr-muted); cursor: not-allowed; background: transparent; }

.debtor { margin-top: 18px; }

.debtor__label {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
}

.debtor__input {
    width: 100%;
    min-height: 52px;
    border: 1px solid var(--wr-control);
    border-radius: 10px;
    background: #fff;
    padding: 12px 14px;
    color: var(--wr-text);
    font-size: 17px;
}

.debtor__input:focus-visible { outline: 3px solid var(--wr-focus); outline-offset: 2px; }

.review__hint {
    margin: 14px 0 0;
    color: var(--wr-muted);
    font-size: 16px;
    line-height: 1.5;
}

.review__fine {
    margin: 8px 0 0;
    color: var(--wr-muted);
    font-size: 14px;
    line-height: 1.5;
}

.review__error {
    margin: 16px 0 0;
    border-radius: 10px;
    background: #fdf0ef;
    padding: 10px 12px;
    color: var(--wr-error);
    font-size: 15px;
    line-height: 1.45;
    font-weight: 600;
}

.review__field-error {
    margin: 8px 0 0;
    color: var(--wr-error);
    font-size: 14px;
    font-weight: 600;
}

/* The only filled button on the screen. */
.review__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    margin-top: 20px;
    border: 0;
    border-radius: 10px;
    background: var(--wr-primary);
    padding: 14px 16px;
    color: #fff;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
    cursor: pointer;
}

.review__cta:hover:not(:disabled) { background: var(--wr-primary-hover); }
.review__cta:focus-visible { outline: 3px solid var(--wr-focus); outline-offset: 3px; }
.review__cta:disabled { background: #e3e9f1; color: #53657a; cursor: not-allowed; opacity: 1; }
.review__cta[data-loading] { background: var(--wr-primary); color: #fff; cursor: progress; }
.review__cta-label { min-width: 0; overflow-wrap: anywhere; text-align: center; }
.review__cta-arrow { flex: 0 0 auto; width: 22px; height: 22px; }

.review__spinner {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

.review__after {
    margin: 14px 0 0;
    color: var(--wr-muted);
    font-size: 15px;
    line-height: 1.5;
}

/* Status, loading and error views. */
button {
    width: 100%;
    min-height: 44px;
    border-radius: 9px;
    padding: .72rem 1rem;
    cursor: pointer;
    font-weight: 750;
}

select, input {
    width: 100%;
    min-height: 44px;
    border: 1px solid #9babb9;
    border-radius: 9px;
    background: #fff;
    padding: .65rem .75rem;
    color: #021d3b;
}

button:focus-visible, select:focus-visible, input:focus-visible {
    outline: 3px solid #0b57d0;
    outline-offset: 2px;
}

.secondary { border: 1px solid #9babb9; background: #fff; color: #021d3b; }

#loading-view, #status-view, #error-view { text-align: center; }

.spinner {
    width: 2.3rem;
    height: 2.3rem;
    margin: 0 auto 1rem;
    border: 3px solid #dce7f1;
    border-top-color: #255fea;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

.status-icon {
    width: 2.7rem;
    height: 2.7rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: #dbeafe;
    box-shadow: inset 0 0 0 10px #255fea;
}

/* Quoted verbatim from the institution, so it is visibly attributed and never
   reads as WealthReader's own copy. */
.bank-message {
    margin: 0 0 1rem;
    padding: .6rem .8rem;
    border-left: 4px solid #94a3b8;
    background: #f1f5f9;
    text-align: left;
    overflow-wrap: anywhere;
}

.error { border-color: #f1c3c3; }
.error h1 { color: #9f2525; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 400px) {
    .view { padding: 18px 16px 20px; }
    .review__title { font-size: 25px; line-height: 31px; }
    .review__reference { font-size: 17px; }
    .bank-card__name { font-size: 12px; }
}

/* Phones: the first row of «Bancos más usados» has to fit above Safari's
   bottom bar, so the space between blocks tightens. Type sizes (amount,
   beneficiary, values) stay as they are. */
@media (max-width: 480px) {
    .payment-shell { padding: 16px 12px; }
    .payment-header { margin: 0 0 12px; }
    .merchant__logo { height: 44px; }
    .review__amount { margin-top: 10px; }
    .review__beneficiary { margin-top: 6px; }
    .review__notice { margin-top: 12px; }
    .review__section { margin-top: 16px; padding-top: 16px; }
    .review__section--detail { margin-top: 14px; padding-top: 12px; }
    .review__reference, .review__iban { margin-top: 2px; }
    .picker-head { margin-bottom: 10px; }
    .bank-search__input { min-height: 48px; padding-top: 10px; padding-bottom: 10px; }
    .featured { margin-top: 12px; }
    .picker__subtitle { margin-bottom: 8px; }
    .bank-list { margin-top: 8px; }
}

@media (min-width: 360px) {
    .featured__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 600px) {
    .merchant { gap: 14px; }
    .merchant__logo { height: 56px; }
    .merchant__name { font-size: 21px; }
}

/* Under the card on every view, also when a merchant embeds the widget:
   who provides the technology, and where to get help. No regulatory claims. */
.payment-footer {
    margin-top: 24px;
    color: #3d5470;
    text-align: center;
}

.payment-footer__credit {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 8px;
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
}

.wr-isotype { display: block; flex: 0 0 auto; width: 36px; height: auto; aspect-ratio: 377 / 90; }

.payment-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0 8px;
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.4;
}

.payment-footer a {
    border-radius: 4px;
    padding: 6px 2px;
    color: var(--wr-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.payment-footer a:hover { color: var(--wr-primary-hover); }
.payment-footer a:focus-visible { outline: 3px solid #0b57d0; outline-offset: 2px; }
.payment-footer__dot { color: var(--wr-muted); }

/* Hosted payment-link page (pay/index.php): only the widget frame. The
   Wealthreader footer is part of the widget itself. */
.pay-page {
    width: min(100%, 32rem);
    min-width: 0;
    margin: 0 auto;
    padding: clamp(0px, 4vw, 32px) 0 16px;
}

.pay-page__widget { min-width: 0; }

/* On a phone the widget's own padding is margin enough. */
@media (max-width: 480px) {
    .pay-page { padding-top: 0; }
}
.pay-page__invalid { margin: 16px; color: #021d3b; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}