/* nx-cashier.css - cashier skin (loaded after css/style.css, never edit the engine widgets' markup).
   Pattern taken from cat_bomgo: method tiles, a card tile with a Visa mark, popup stepper Amount / Transfer / Receipt,
   one amount window for every method. Every colour is a theme token, so both themes stay readable (contrast >= 4.5:1).
   The `html[data-theme]` prefix beats the !important rules of css/style.css and widgets/payment-receipts/style.css. */

/* ---------- 1. method gallery ---------- */
html[data-theme] .payment__gallery{grid-template-columns:repeat(auto-fill,minmax(clamp(120px,15vw,168px),1fr));gap:10px;align-items:stretch}
html[data-theme] .payment__item,
html[data-theme] .payment__gallery .open-payment{
  padding:12px;gap:10px;border-radius:14px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--text);
  box-shadow:inset 0 1px 0 var(--hl);text-align:center;cursor:pointer;
}
html[data-theme] .payment__item:hover,
html[data-theme] .payment__gallery .open-payment:hover{border-color:var(--gold-line);background:var(--surface-2);color:var(--text)}
html[data-theme] .payment__item:focus-within,
html[data-theme] .payment__gallery .open-payment:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
html[data-theme] .payitem__note{font-size:13px;font-weight:700;line-height:1.25;color:var(--text)}

/* card tile: accent border, a Visa mark in the text colour (no white plate), readable name */
html[data-theme] .payment__gallery .open-payment{
  border:1.5px solid var(--gold-line);justify-content:flex-start;align-items:stretch;font-size:13px;font-weight:700;line-height:1.25;
  text-transform:none;min-height:0;height:auto;width:auto;margin:0;
}
html[data-theme] .payment__gallery .open-payment:hover{box-shadow:0 0 0 3px color-mix(in oklab,var(--gold) 22%,transparent)}
html[data-theme] .payment__gallery .open-payment::before{
  content:"";display:block;height:56px;border-radius:8px;background:var(--text);
  -webkit-mask:url(../widgets/payment-receipts/icons/visa.svg) center/auto 190% no-repeat;mask:url(../widgets/payment-receipts/icons/visa.svg) center/auto 190% no-repeat;
}
html[data-theme] .payment__gallery .open-payment::after{
  content:"";display:block;height:2px;width:28px;margin:-2px auto 0;border-radius:2px;background:var(--gold-line);order:1;
}

/* ---------- 2. amount window of a gateway method (engine .payment__tooltip) ---------- */
html[data-theme] .payment__tooltip_inner{max-width:420px;margin:max(16px,8vh) auto 0}
html[data-theme] .pay-tooltip{padding:22px 20px 20px;border-radius:16px}
html[data-theme] .pay-tooltip__summ{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
html[data-theme] .pay-tooltip__summ::after{content:"";flex:0 0 100%;order:1;height:0}
html[data-theme] .pay-tooltip__summ>label{order:2;flex:1 1 0;min-width:72px;justify-content:center;min-height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--input);color:var(--text);font-size:14px;letter-spacing:0;text-transform:none}
html[data-theme] .pay-tooltip__summ>label:hover{border-color:var(--gold-line)}
html[data-theme] .pay-tooltip__summ>label.active{border:1.5px solid var(--gold-line);color:var(--gold-text);background:linear-gradient(180deg,#f2c14b2e,#f2c14b10)}
html[data-theme] .pay-tooltip__summ>label:focus-within{outline:2px solid var(--focus-ring);outline-offset:2px}
html[data-theme] .pay-tooltip__summ>.pay-tooltip__input,
html[data-theme] .pay-tooltip__summ>.answer,
html[data-theme] .pay-tooltip__summ>.pay-tooltip__button{order:3}
html[data-theme] .input_summ_val{min-height:60px;padding:0 16px;border-radius:12px;border:1px solid var(--line-2);background:var(--input);color:var(--text);font-size:22px;font-weight:800;letter-spacing:0}
html[data-theme] .input_summ_val:hover{border-color:var(--gold-line)}
html[data-theme] .input_summ_val:focus{outline:none;border-color:var(--gold-line);box-shadow:0 0 0 3px color-mix(in oklab,var(--gold) 28%,transparent)}
html[data-theme] .pay-tooltip__summ .answer{width:100%;font-size:13px!important;font-weight:600!important;text-transform:none;letter-spacing:0;color:var(--muted);text-align:left}
html[data-theme] .pay-tooltip__button{min-height:52px;border-radius:12px;font-size:15px;color:var(--accent-ink)}
html[data-theme] .pay-tooltip__button:disabled,html[data-theme] .pw-go:disabled,html[data-theme] .pw-confirm:disabled{opacity:.6;cursor:progress;filter:saturate(.7)}
html[data-theme] .pay-tooltip__button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
html[data-theme] .payment__tooltip_close{color:var(--text);opacity:.8}
html[data-theme] .payment__tooltip_close:hover{opacity:1;color:var(--gold-text)}
/* gateway error: a banner with its own mark (the engine icon font is absent) */
html[data-theme] .pay-tooltip__note{position:relative;margin:0 28px 12px 0;padding:10px 12px 10px 40px;border-radius:10px;border:1px solid color-mix(in oklab,var(--error) 45%,transparent);background:color-mix(in oklab,var(--error) 12%,transparent);color:var(--text);font-size:13px;font-weight:600;line-height:1.4}
html[data-theme] .pay-tooltip__note i{display:none}
html[data-theme] .pay-tooltip__note::before{content:"!";position:absolute;left:10px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--error);color:var(--surface);font-size:13px;font-weight:900}
html[data-theme] .pay-tooltip__note .error__info{color:var(--text)}

/* ---------- 3. card-transfer popup (engine #pw-overlay), stepper + three screens ---------- */
html[data-theme] .pw-overlay{background:var(--scrim)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html[data-theme] .pw-overlay .pw-popup{max-width:440px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
html[data-theme] .pw-overlay .pw-popup-inner{padding:22px 20px 20px;background:transparent!important;color:var(--text)!important;display:flex;flex-direction:column;gap:14px}
html[data-theme] .pw-overlay .pw-header,
html[data-theme] h2.pw-header{margin:0!important;font-size:20px!important;line-height:1.25!important;font-weight:800!important;text-align:left!important;color:var(--text)!important;padding:0!important}
html[data-theme] .pw-step.active{display:flex!important;flex-direction:column;gap:14px}
html[data-theme] .pw-step .pw-card{margin:0!important}

.nx-dep-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.nx-dep-step{display:flex;flex-direction:column;gap:7px;min-width:0;color:var(--muted);font-size:12px;font-weight:700;line-height:1.2}
.nx-dep-step i{display:block;height:4px;border-radius:999px;background:var(--line-2);font-size:0}
.nx-dep-step i span{display:none}
.nx-dep-step b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nx-dep-step.is-active,.nx-dep-step.is-done{color:var(--text)}
.nx-dep-step.is-active i,.nx-dep-step.is-done i{background:var(--gold-grad)}
.nx-dep-step.is-done i{opacity:.55}

/* step 1: amount + presets, no lock card, no comment field (kept in the DOM: the widget reads #pw-comment) */
html[data-theme] .pw-step-1 .pw-card{display:none!important}
html[data-theme] .pw-step-1 .pw-field:has(#pw-comment){display:none!important}
.nx-dep-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.nx-dep-chip{min-height:40px;padding:0 8px;border-radius:10px;border:1px solid var(--line-2);background:var(--input);color:var(--text);font:700 13px/1 inherit;font-family:inherit;font-variant-numeric:tabular-nums;cursor:pointer}
.nx-dep-chip:hover{border-color:var(--gold-line)}
.nx-dep-chip.is-active{border:1.5px solid var(--gold-line);color:var(--gold-text);background:linear-gradient(180deg,#f2c14b2e,#f2c14b10)}
.nx-dep-chip:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* fields */
html[data-theme] .pw-field{margin:0!important}
html[data-theme] .pw-field label{display:block;margin:0 0 8px!important;font-size:12px!important;font-weight:700!important;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)!important}
html[data-theme] .pw-field input,
html[data-theme] .pw-field textarea{width:100%;min-height:56px;padding:0 16px!important;border-radius:12px!important;border:1px solid var(--line-2)!important;background:var(--input)!important;color:var(--text)!important;font-size:20px!important;font-weight:800!important;font-variant-numeric:tabular-nums}
html[data-theme] .pw-field input::placeholder,
html[data-theme] .pw-field textarea::placeholder{color:var(--muted)!important;opacity:1;font-weight:500}
html[data-theme] .pw-field input:hover:not([readonly]),
html[data-theme] .pw-field textarea:hover{border-color:var(--gold-line)!important}
html[data-theme] .pw-field input:focus,
html[data-theme] .pw-field textarea:focus{outline:none;border-color:var(--gold-line)!important;box-shadow:0 0 0 3px color-mix(in oklab,var(--gold) 28%,transparent)}
html[data-theme] .pw-field input[readonly]{background:var(--surface-2)!important;border-style:dashed!important;cursor:default}
html[data-theme] .pw-field input[type=file]{min-height:0}
html[data-theme] .pw-error-msg{margin:0;font-size:13px!important;font-weight:600!important;line-height:1.4;color:var(--error)!important;text-align:left}
html[data-theme] .pw-error-msg:empty{display:none}
html[data-theme] .pw-info{margin:0;font-size:13.5px;line-height:1.5;color:var(--text)!important}
html[data-theme] .pw-info-icon{color:var(--gold-text)!important}

/* the card with the requisites: the Visa mark must stay readable on the dark card in both themes */
html[data-theme] .pw-card-logo{filter:brightness(0) invert(1);opacity:.92;max-width:64px}
html[data-theme] .pw-open .pw-card-number{font-size:clamp(17px,5.4vw,24px)!important;color:#f2c14b!important}

html[data-theme] .pw-card.pw-open{height:auto;min-height:150px;gap:12px;padding:46px 16px 18px;text-align:center}
html[data-theme] .pw-open .pw-card-number{overflow-wrap:anywhere;min-width:0}
.nx-dep-copy{min-height:44px;padding:0 20px;border-radius:10px;border:1px solid #ffffff73;background:#ffffff14;color:#fff;font:700 13px/1 inherit;font-family:inherit;cursor:pointer}
.nx-dep-copy:hover{background:#ffffff26;border-color:#ffffffb3}
.nx-dep-copy:focus-visible{outline:2px solid #ffd768;outline-offset:2px}

/* upload */
html[data-theme] .pw-upload-btn-wrapper{display:block;width:100%}
html[data-theme] .pw-upload-btn{display:flex!important;justify-content:center;align-items:center;gap:8px;width:100%;min-height:56px;border-radius:12px!important;border:1.5px dashed var(--gold-line)!important;background:var(--surface-2)!important;color:var(--text)!important;font-weight:700;cursor:pointer}
html[data-theme] .pw-field .pw-upload-btn{margin:0!important;color:var(--text)!important;font-size:14px!important;letter-spacing:0;text-transform:none}
html[data-theme] .pw-upload-btn:hover{background:var(--hover)!important}
html[data-theme] .pw-upload-msg,html[data-theme] #pw-upload-msg{margin:6px 0 0;font-size:13px;font-weight:600;color:var(--success)!important;overflow-wrap:anywhere}
html[data-theme] .pw-upload-msg:empty{display:none}

/* buttons: primary dominant, secondary outlined, same height */
html[data-theme] .pw-buttons{display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:10px!important;margin:0!important}
html[data-theme] .pw-buttons>*{flex:1 1 130px;min-height:50px!important;border-radius:12px!important;font-size:14px;margin:0}
html[data-theme] .pw-buttons>.pw-go,
html[data-theme] .pw-buttons>.pw-confirm,
html[data-theme] .pw-buttons>.nx-go-receipt{flex:2 1 180px!important;background:var(--gold-grad)!important;color:var(--accent-ink)!important;border:0!important;font-weight:800!important}
html[data-theme] .pw-buttons>.pw-btn{background:var(--btn2)!important;color:var(--text)!important;border:1px solid var(--btn2-line)!important;font-weight:700;text-transform:none}
html[data-theme] .pw-buttons>.pw-btn:hover{border-color:var(--gold-line)!important}
html[data-theme] .pw-popup button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
html[data-theme] .pw-confirm .spinner{display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:nxdep-spin .7s linear infinite}
@keyframes nxdep-spin{to{transform:rotate(360deg)}}

/* screens of step 2: [data-nx-stage] is set by js/app.js (cashier-flow). Without JS the engine screen stays whole. */
[data-nx-stage="2"] .pw-upload-field,
[data-nx-stage="2"] .pw-confirm{display:none!important}
[data-nx-stage="3"] .pw-step-2 .pw-card,
[data-nx-stage="3"] .pw-step-2 .pw-info,
[data-nx-stage="3"] .pw-step-2 .pw-back{display:none!important}
.nx-go-receipt{display:none}.nx-back-pay{display:none}
[data-nx-stage="2"] .nx-go-receipt{display:block}
[data-nx-stage="3"] .nx-back-pay{display:block}
.nx-go-receipt,.nx-back-pay{font-family:inherit;cursor:pointer}

/* ---------- 4. system notification (engine .pw-notification-popup; moved to <body> by the widget) ---------- */
html[data-theme] .pw-notification-popup{max-width:440px;width:calc(100% - 32px);padding:0;
  box-shadow:var(--shadow),0 0 0 100vmax var(--scrim)!important}
html[data-theme] .pw-notification-popup .pw-popup-inner{display:flex;flex-direction:column;padding:30px 24px 26px;align-items:center;text-align:center;gap:12px;background:transparent!important}
html[data-theme] .pw-notification-popup .pw-popup-inner::before{content:"";display:block;width:52px;height:52px;border-radius:50%;
  background:color-mix(in oklab,var(--gold) 16%,transparent);
  box-shadow:inset 0 0 0 1.5px var(--gold-line);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c99a3c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v4l2.5 2'/%3E%3C/svg%3E");
  background-size:30px;background-repeat:no-repeat;background-position:center}
html[data-theme] .pw-notification-popup .pw-header{font-size:21px!important;text-align:center!important}
html[data-theme] .pw-notification-popup .pw-notification-text{margin:0;font-size:15px;line-height:1.55;color:var(--text)!important;text-align:center}
html[data-theme] .pw-notification-close{width:44px!important;height:44px!important;top:8px!important;right:8px!important;border-radius:10px}
html[data-theme] .pw-notification-close::before,
html[data-theme] .pw-notification-close::after{background:var(--text)!important;opacity:.9}
html[data-theme] .pw-notification-close:hover{background:var(--hover)}
html[data-theme] .pw-notification-close:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}

/* ---------- 5. narrow screens ---------- */
@media (max-width:420px){
  html[data-theme] .pw-overlay{padding:12px}
  html[data-theme] .pw-overlay .pw-popup-inner{padding:18px 16px 16px}
  .nx-dep-presets{grid-template-columns:repeat(2,1fr)}
  html[data-theme] .payment__tooltip_inner{margin-top:max(12px,6vh)}
  html[data-theme] .pay-tooltip{padding:20px 16px 16px}
}
@media (max-width:359px){
  html[data-theme] .payment__gallery{grid-template-columns:repeat(2,1fr);gap:8px}
  html[data-theme] .payment__item,html[data-theme] .payment__gallery .open-payment{padding:10px}
}
@media (prefers-reduced-motion:reduce){html[data-theme] .pw-confirm .spinner{animation-duration:2s}}