/* RamperPay checkout — dark crypto vibe
   Display: Syne · Body: Inter · Numeric: JetBrains Mono
   Accents: mint #00ffa3, violet #7c5cff on near-black canvas
   ----------------------------------------------------------- */

:root {
    --rp-bg-0: #07080c;
    --rp-bg-1: #0c0e15;
    --rp-bg-2: #11141d;
    --rp-card: rgba(20, 23, 33, 0.65);
    --rp-card-border: rgba(255, 255, 255, 0.06);
    --rp-card-border-strong: rgba(255, 255, 255, 0.12);
    --rp-text: #e7e9f0;
    --rp-text-mute: #8b91a3;
    --rp-text-dim: #5a607a;
    --rp-mint: #00ffa3;
    --rp-mint-glow: rgba(0, 255, 163, 0.35);
    --rp-violet: #7c5cff;
    --rp-violet-glow: rgba(124, 92, 255, 0.38);
    --rp-danger: #ff5a73;
    --rp-radius: 22px;
    --rp-radius-sm: 12px;
    --rp-pad: clamp(20px, 4vw, 36px);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--rp-bg-0);
    color: var(--rp-text);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    overflow-x: hidden;
}

.ramperpay-body {
    position: relative;
    min-height: 100vh;
}

/* ---------- Background atmosphere ---------- */
.ramperpay-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.ramperpay-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.55;
    will-change: transform;
}
.ramperpay-orb-1 {
    width: 60vw;
    height: 60vw;
    max-width: 700px;
    max-height: 700px;
    background: radial-gradient(circle, var(--rp-violet) 0%, transparent 70%);
    top: -20vh;
    left: -10vw;
    animation: pc-float-1 18s ease-in-out infinite;
}
.ramperpay-orb-2 {
    width: 50vw;
    height: 50vw;
    max-width: 600px;
    max-height: 600px;
    background: radial-gradient(circle, var(--rp-mint) 0%, transparent 70%);
    bottom: -15vh;
    right: -10vw;
    opacity: 0.35;
    animation: pc-float-2 22s ease-in-out infinite;
}
@keyframes pc-float-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(40px, 30px) scale(1.08); }
}
@keyframes pc-float-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-50px, -25px) scale(1.1); }
}

.ramperpay-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.ramperpay-noise {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

/* ---------- Layout shell ---------- */
.ramperpay-shell {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px var(--rp-pad) 60px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.ramperpay-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 48px;
    gap: 16px;
}

.ramperpay-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Syne", sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.01em;
}

.ramperpay-logo-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rp-mint);
    box-shadow: 0 0 14px var(--rp-mint-glow), 0 0 4px var(--rp-mint);
    animation: pc-pulse 2s ease-in-out infinite;
}
@keyframes pc-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(0.85); }
}

.ramperpay-secure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--rp-card-border);
    border-radius: 999px;
    background: rgba(255,255,255,0.02);
    color: var(--rp-text-mute);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ---------- Cards ---------- */
.ramperpay-card-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    flex: 1;
}

@media (max-width: 860px) {
    .ramperpay-card-wrap { grid-template-columns: 1fr; }
}

.ramperpay-card {
    background: var(--rp-card);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid var(--rp-card-border);
    border-radius: var(--rp-radius);
    padding: var(--rp-pad);
    position: relative;
    overflow: hidden;
    animation: pc-rise 0.7s cubic-bezier(.2,.9,.2,1) backwards;
}
.ramperpay-card-product { animation-delay: 0.05s; }
.ramperpay-card-form    { animation-delay: 0.15s; }

@keyframes pc-rise {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Top-edge glow on cards */
.ramperpay-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rp-card-border-strong), transparent);
}

.ramperpay-eyebrow {
    display: inline-block;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--rp-mint);
    margin-bottom: 18px;
    padding: 4px 10px;
    border: 1px solid rgba(0, 255, 163, 0.2);
    border-radius: 999px;
    background: rgba(0, 255, 163, 0.04);
}

/* ---------- Product side ---------- */
.ramperpay-product-image {
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: var(--rp-radius-sm);
    overflow: hidden;
    margin-bottom: 22px;
    background: var(--rp-bg-2);
    border: 1px solid var(--rp-card-border);
}
.ramperpay-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ramperpay-product-name {
    font-family: "Syne", sans-serif;
    font-weight: 700;
    font-size: clamp(26px, 3.5vw, 36px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
    color: #fff;
}

.ramperpay-product-desc {
    color: var(--rp-text-mute);
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 24px;
}
.ramperpay-product-desc p { margin: 0 0 10px; }
.ramperpay-product-desc p:last-child { margin-bottom: 0; }

.ramperpay-price-block {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 18px 0;
    border-top: 1px dashed var(--rp-card-border-strong);
    border-bottom: 1px dashed var(--rp-card-border-strong);
    margin-bottom: 20px;
}
.ramperpay-price-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--rp-text-dim);
}
.ramperpay-price-value {
    font-family: "JetBrains Mono", monospace;
    font-weight: 600;
    color: #fff;
}
.ramperpay-price-num {
    font-size: 30px;
    letter-spacing: -0.02em;
}
.ramperpay-price-ccy {
    font-size: 14px;
    color: var(--rp-mint);
    margin-left: 6px;
}

.ramperpay-trust {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ramperpay-trust li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--rp-text-mute);
}
.ramperpay-trust li svg { color: var(--rp-mint); flex-shrink: 0; }

/* ---------- Form side ---------- */
.ramperpay-form-title {
    font-family: "Syne", sans-serif;
    font-weight: 700;
    font-size: clamp(22px, 2.8vw, 28px);
    margin: 0 0 6px;
    color: #fff;
    letter-spacing: -0.015em;
}
.ramperpay-form-sub {
    margin: 0 0 28px;
    color: var(--rp-text-mute);
    font-size: 14px;
}

.ramperpay-alert {
    background: rgba(255, 90, 115, 0.08);
    border: 1px solid rgba(255, 90, 115, 0.3);
    color: #ffb3bf;
    padding: 12px 16px;
    border-radius: var(--rp-radius-sm);
    font-size: 13px;
    margin-bottom: 20px;
}

.ramperpay-checkout-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ramperpay-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ramperpay-field-label {
    font-size: 11px;
    font-family: "JetBrains Mono", monospace;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--rp-text-dim);
}
.ramperpay-field input {
    appearance: none;
    border: 1px solid var(--rp-card-border-strong);
    background: rgba(0, 0, 0, 0.25);
    color: var(--rp-text);
    padding: 14px 16px;
    border-radius: var(--rp-radius-sm);
    font-size: 15px;
    font-family: "Inter", sans-serif;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}
.ramperpay-field input::placeholder { color: var(--rp-text-dim); }
.ramperpay-field input:focus {
    outline: none;
    border-color: var(--rp-mint);
    background: rgba(0, 255, 163, 0.04);
    box-shadow: 0 0 0 4px rgba(0, 255, 163, 0.08);
}

/* ---------- Pay button ---------- */
.ramperpay-pay-btn {
    position: relative;
    margin-top: 10px;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, var(--rp-mint) 0%, #00d488 100%);
    color: #001a10;
    padding: 18px 22px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 15px;
    font-family: "Inter", sans-serif;
    letter-spacing: -0.005em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow:
        0 8px 30px var(--rp-mint-glow),
        inset 0 1px 0 rgba(255,255,255,0.5);
    transition: transform 0.15s ease, box-shadow 0.25s ease;
    overflow: hidden;
}
.ramperpay-pay-btn:hover {
    transform: translateY(-1px);
    box-shadow:
        0 12px 40px var(--rp-mint-glow),
        inset 0 1px 0 rgba(255,255,255,0.5);
}
.ramperpay-pay-btn:active {
    transform: translateY(0);
}
.ramperpay-pay-btn-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}
.ramperpay-pay-btn-amount {
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    font-weight: 500;
    opacity: 0.7;
    margin-top: 2px;
}
.ramperpay-pay-btn-arrow {
    transition: transform 0.2s ease;
    display: inline-flex;
}
.ramperpay-pay-btn:hover .ramperpay-pay-btn-arrow {
    transform: translateX(4px);
}

.ramperpay-pay-btn-loading {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--rp-mint) 0%, #00d488 100%);
    font-size: 14px;
}
.ramperpay-pay-btn.is-loading .ramperpay-pay-btn-text,
.ramperpay-pay-btn.is-loading .ramperpay-pay-btn-arrow {
    visibility: hidden;
}
.ramperpay-pay-btn.is-loading .ramperpay-pay-btn-loading {
    display: flex;
}
.ramperpay-pay-btn.is-loading {
    pointer-events: none;
}

.ramperpay-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 26, 16, 0.3);
    border-top-color: #001a10;
    border-radius: 50%;
    animation: pc-spin 0.7s linear infinite;
}
@keyframes pc-spin { to { transform: rotate(360deg); } }

.ramperpay-disclaimer {
    font-size: 12px;
    color: var(--rp-text-dim);
    text-align: center;
    margin: 16px 0 0;
    line-height: 1.5;
}

.ramperpay-providers {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--rp-card-border);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ramperpay-providers-label {
    font-size: 11px;
    font-family: "JetBrains Mono", monospace;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--rp-text-dim);
    margin-right: 4px;
}
.ramperpay-providers-chip {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border: 1px solid var(--rp-card-border-strong);
    border-radius: 6px;
    color: var(--rp-text-mute);
    background: rgba(255,255,255,0.02);
}
.ramperpay-providers-chip-accent {
    color: var(--rp-violet);
    border-color: rgba(124, 92, 255, 0.35);
    background: rgba(124, 92, 255, 0.06);
}

/* ---------- Footer ---------- */
.ramperpay-foot {
    margin-top: 48px;
    text-align: center;
    font-size: 12px;
    color: var(--rp-text-dim);
    display: flex;
    justify-content: center;
    gap: 8px;
}
.ramperpay-foot a {
    color: var(--rp-text-mute);
    text-decoration: none;
    border-bottom: 1px dotted var(--rp-text-dim);
}
.ramperpay-foot a:hover { color: var(--rp-mint); border-bottom-color: var(--rp-mint); }
.ramperpay-foot-sep { color: var(--rp-text-dim); }

/* ---------- Thanks / cancel pages ---------- */
.ramperpay-status-card {
    max-width: 540px;
    margin: 60px auto;
    text-align: center;
    padding: 48px 36px;
}
.ramperpay-status-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 255, 163, 0.08);
    border: 1px solid rgba(0, 255, 163, 0.25);
    color: var(--rp-mint);
}
.ramperpay-status-icon.is-error {
    background: rgba(255, 90, 115, 0.08);
    border-color: rgba(255, 90, 115, 0.25);
    color: var(--rp-danger);
}
.ramperpay-status-title {
    font-family: "Syne", sans-serif;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    color: #fff;
}
.ramperpay-status-msg {
    color: var(--rp-text-mute);
    margin: 0 0 24px;
}
.ramperpay-status-meta {
    display: inline-block;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--rp-card-border);
    color: var(--rp-text-dim);
}

/* ---------- Payment method picker ---------- */
.ramperpay-methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ramperpay-method {
    cursor: pointer;
    display: block;
}
.ramperpay-method input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ramperpay-method-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--rp-card-border-strong);
    background: rgba(0, 0, 0, 0.25);
    border-radius: var(--rp-radius-sm);
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.ramperpay-method input[type="radio"]:focus-visible + .ramperpay-method-card {
    outline: 2px solid var(--rp-mint);
    outline-offset: 2px;
}
.ramperpay-method:hover .ramperpay-method-card {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(0, 0, 0, 0.35);
}
.ramperpay-method input[type="radio"]:checked + .ramperpay-method-card {
    border-color: var(--rp-mint);
    background: rgba(0, 255, 163, 0.06);
    box-shadow: 0 0 0 1px var(--rp-mint), 0 8px 28px rgba(0, 255, 163, 0.12);
}

.ramperpay-method-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04);
    color: var(--rp-text);
    border: 1px solid var(--rp-card-border);
}
.ramperpay-method input[type="radio"]:checked + .ramperpay-method-card .ramperpay-method-icon {
    background: rgba(0, 255, 163, 0.12);
    color: var(--rp-mint);
    border-color: rgba(0, 255, 163, 0.3);
}
.ramperpay-method-icon-paypal {
    color: #ffd14d;
}
.ramperpay-method input[type="radio"]:checked + .ramperpay-method-card .ramperpay-method-icon-paypal {
    color: var(--rp-mint);
}

.ramperpay-method-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ramperpay-method-name {
    font-weight: 600;
    color: #fff;
    font-size: 14px;
}
.ramperpay-method-desc {
    font-size: 12px;
    color: var(--rp-text-mute);
    line-height: 1.4;
}

.ramperpay-method-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--rp-card-border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: all 0.18s ease;
    flex-shrink: 0;
}
.ramperpay-method input[type="radio"]:checked + .ramperpay-method-card .ramperpay-method-check {
    background: var(--rp-mint);
    border-color: var(--rp-mint);
    color: #001a10;
}

/* ---------- BTC instructions page ---------- */
.ramperpay-shell-narrow { max-width: 720px; }

.ramperpay-card-btc {
    padding: clamp(24px, 4vw, 36px);
}

.ramperpay-btc-steps {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ramperpay-btc-step {
    display: flex;
    gap: 16px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--rp-card-border);
    border-radius: var(--rp-radius-sm);
}

.ramperpay-btc-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rp-mint), #00d488);
    color: #001a10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: "JetBrains Mono", monospace;
    font-size: 14px;
    flex-shrink: 0;
}

.ramperpay-btc-step-body { flex: 1; min-width: 0; }

.ramperpay-btc-step-title {
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
    font-size: 15px;
}

.ramperpay-btc-step-hint {
    font-size: 12px;
    color: var(--rp-text-mute);
    margin: 8px 0 0;
    line-height: 1.5;
}

.ramperpay-btc-amount-box {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(0, 255, 163, 0.08);
    border: 1px solid rgba(0, 255, 163, 0.25);
    margin-top: 4px;
}
.ramperpay-btc-amount-num {
    font-family: "JetBrains Mono", monospace;
    font-size: 22px;
    font-weight: 600;
    color: var(--rp-mint);
}
.ramperpay-btc-amount-ccy {
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    color: var(--rp-text-mute);
    letter-spacing: 0.08em;
}

.ramperpay-btc-wallet-field {
    position: relative;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--rp-card-border-strong);
    border-radius: var(--rp-radius-sm);
    padding: 12px 90px 12px 14px;
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    color: var(--rp-text);
    word-break: break-all;
    line-height: 1.4;
}
.ramperpay-btc-wallet-field code {
    background: transparent;
    padding: 0;
    color: inherit;
    font: inherit;
}

.ramperpay-btc-copy {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 255, 163, 0.12);
    border: 1px solid rgba(0, 255, 163, 0.35);
    color: var(--rp-mint);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 11px;
    font-family: "JetBrains Mono", monospace;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.15s ease;
    font-weight: 600;
}
.ramperpay-btc-copy:hover {
    background: rgba(0, 255, 163, 0.2);
}

.ramperpay-btc-copied {
    font-size: 12px;
    color: var(--rp-mint);
    margin-top: 8px;
    opacity: 0;
    transform: translateY(-4px);
    transition: all 0.2s ease;
    pointer-events: none;
}
.ramperpay-btc-copied.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ramperpay-pay-btn-btc {
    margin-top: 10px;
    text-decoration: none;
}

.ramperpay-btc-warn {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 209, 77, 0.08);
    border: 1px solid rgba(255, 209, 77, 0.35);
    color: #ffd14d;
    font-size: 12px;
}

.ramperpay-btc-note {
    margin-top: 26px;
    padding: 16px 18px;
    border-radius: var(--rp-radius-sm);
    background: rgba(124, 92, 255, 0.06);
    border: 1px solid rgba(124, 92, 255, 0.2);
    color: var(--rp-text-mute);
    font-size: 13px;
    line-height: 1.6;
}
.ramperpay-btc-note strong {
    display: block;
    color: #fff;
    margin-bottom: 6px;
    font-weight: 600;
}

.ramperpay-method-icon-btc { color: #f7931a; }
.ramperpay-method input[type="radio"]:checked + .ramperpay-method-card .ramperpay-method-icon-btc {
    color: var(--rp-mint);
}

.ramperpay-method-icon-finchpay { color: var(--rp-mint, #00ffa3); }

/* ---------- Confirm form on BTC instructions page ---------- */
.ramperpay-confirm-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px;
}

.ramperpay-confirm-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    padding: 14px 16px;
    border: 1px solid var(--rp-card-border-strong);
    border-radius: var(--rp-radius-sm);
    background: rgba(0, 0, 0, 0.2);
    transition: border-color 0.2s ease, background 0.2s ease;
}
.ramperpay-confirm-check:hover {
    border-color: rgba(0, 255, 163, 0.4);
    background: rgba(0, 255, 163, 0.04);
}
.ramperpay-confirm-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    flex-shrink: 0;
    accent-color: var(--rp-mint);
    cursor: pointer;
}
.ramperpay-confirm-check span {
    font-size: 13px;
    color: var(--rp-text-mute);
    line-height: 1.5;
}

/* Confirm button disabled state */
#ramperpay-confirm-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}
#ramperpay-confirm-submit:disabled:hover {
    transform: none !important;
}

/* Status badge for awaiting_verification in orders table */
.ramperpay-status-awaiting_verification {
    background: #fff3cd;
    color: #856404;
}

.ramperpay-custom-message {
    text-align: left;
    max-width: 100%;
}
.ramperpay-custom-message p { margin: 0 0 12px; }
.ramperpay-custom-message p:last-child { margin-bottom: 0; }
.ramperpay-custom-message a {
    color: var(--rp-mint);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ramperpay-custom-message a:hover { color: #fff; }
.ramperpay-custom-message ul,
.ramperpay-custom-message ol { padding-left: 22px; margin: 8px 0; }
.ramperpay-custom-message code {
    background: rgba(0,0,0,0.35);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
}

.ramperpay-method-recommended {
    border-color: var(--rp-mint) !important;
    box-shadow: 0 0 0 1px var(--rp-mint), 0 8px 28px rgba(0, 255, 163, 0.12);
}
.ramperpay-method-ribbon {
    position: absolute;
    top: -8px;
    right: 12px;
    background: var(--rp-mint);
    color: #001a10;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.08em;
}
.ramperpay-method-card { position: relative; }

/* ---------- Coupon toggle ---------- */
.ramperpay-coupon-toggle {
    margin: 14px 0;
    border: 1px solid var(--rp-card-border);
    border-radius: var(--rp-radius-sm);
    background: rgba(0,0,0,0.2);
    padding: 12px 16px;
}
.ramperpay-coupon-toggle > summary {
    cursor: pointer;
    color: var(--rp-text-mute);
    font-size: 13px;
    user-select: none;
    list-style: none;
}
.ramperpay-coupon-toggle > summary::-webkit-details-marker { display: none; }
.ramperpay-coupon-toggle[open] > summary { color: var(--rp-mint); margin-bottom: 10px; }
.ramperpay-coupon-row { display: flex; gap: 8px; }
.ramperpay-coupon-row input {
    flex: 1;
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--rp-card-border-strong);
    color: var(--rp-text);
    padding: 10px 12px;
    border-radius: 8px;
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
}
.ramperpay-coupon-btn {
    background: rgba(0, 255, 163, 0.12);
    border: 1px solid rgba(0, 255, 163, 0.4);
    color: var(--rp-mint);
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.ramperpay-coupon-btn:hover { background: rgba(0, 255, 163, 0.2); }
.ramperpay-coupon-feedback {
    margin-top: 8px;
    font-size: 12px;
    min-height: 16px;
}
.ramperpay-coupon-feedback.is-ok  { color: var(--rp-mint); }
.ramperpay-coupon-feedback.is-err { color: #ff7c7c; }

/* ===== FinchPay Accordion ===== */
.ramperpay-accordion-finchpay {
    margin-bottom: 18px;
    border: 1px solid rgba(0, 255, 163, 0.35);
    border-radius: var(--rp-radius-sm);
    overflow: hidden;
}

.ramperpay-accordion-header {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    background: rgba(0, 255, 163, 0.06);
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.18s ease;
    position: relative;
}
.ramperpay-accordion-header:hover { background: rgba(0, 255, 163, 0.1); }
.ramperpay-accordion-header[aria-expanded="true"] { background: rgba(0, 255, 163, 0.1); }

.ramperpay-accordion-icon {
    color: var(--rp-mint);
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(0, 255, 163, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ramperpay-accordion-label { flex: 1; min-width: 0; }
.ramperpay-accordion-name {
    display: block;
    font-weight: 700;
    color: #fff;
    font-size: 14px;
}
.ramperpay-accordion-desc {
    display: block;
    font-size: 12px;
    color: var(--rp-text-mute);
    margin-top: 2px;
}

.ramperpay-accordion-badge {
    position: static;
    flex-shrink: 0;
    font-size: 9px;
    padding: 3px 7px;
}

.ramperpay-accordion-chevron {
    color: var(--rp-text-mute);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}
.ramperpay-accordion-header[aria-expanded="true"] .ramperpay-accordion-chevron {
    transform: rotate(180deg);
}

.ramperpay-accordion-body { overflow: hidden; transition: max-height 0.3s ease; }
.ramperpay-accordion-inner {
    padding: 20px 18px 18px;
    border-top: 1px solid rgba(0, 255, 163, 0.15);
    background: rgba(0, 0, 0, 0.2);
}

.ramperpay-accordion-intro {
    font-size: 13px;
    color: var(--rp-text-mute);
    margin: 0 0 14px;
    line-height: 1.6;
}

.ramperpay-accordion-amount {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    background: rgba(0, 255, 163, 0.08);
    border: 1px solid rgba(0, 255, 163, 0.2);
    border-radius: 10px;
    padding: 6px 14px;
    margin-bottom: 14px;
}

/* Proceed button: disabled state */
.ramperpay-finchpay-proceed[aria-disabled="true"] {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
    filter: grayscale(0.4);
}
.ramperpay-finchpay-proceed[aria-disabled="false"] {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}

/* Tooltip that appears until the user copies */
.ramperpay-accordion-tooltip {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: #ffd14d;
    background: rgba(255, 209, 77, 0.08);
    border: 1px solid rgba(255, 209, 77, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    transition: opacity 0.3s ease;
}
.ramperpay-accordion-tooltip.is-hidden { opacity: 0; pointer-events: none; height: 0; padding: 0; margin: 0; overflow: hidden; }

.ramperpay-other-methods-label {
    text-align: center;
    font-size: 12px;
    color: var(--rp-text-mute);
    margin: 20px 0 12px;
    position: relative;
}
.ramperpay-other-methods-label::before,
.ramperpay-other-methods-label::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: var(--rp-card-border);
}
.ramperpay-other-methods-label::before { left: 0; }
.ramperpay-other-methods-label::after  { right: 0; }

/* ===== FinchPay in-radio accordion body ===== */
/* Shows the info panel under the FinchPay radio only when it's selected. */
.ramperpay-method-accordion + .ramperpay-finchpay-body { display: none; }
.ramperpay-method-accordion:has(input:checked) + .ramperpay-finchpay-body { display: block; }

.ramperpay-finchpay-body {
    margin: -6px 0 14px;
    padding: 14px 16px;
    background: rgba(0, 255, 163, 0.05);
    border: 1px solid rgba(0, 255, 163, 0.2);
    border-radius: var(--rp-radius-sm);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.ramperpay-finchpay-body .ramperpay-accordion-intro {
    margin: 0;
    font-size: 12px;
    color: var(--rp-text-mute);
    line-height: 1.55;
}
.ramperpay-finchpay-body .ramperpay-btc-warn {
    margin-top: 10px;
}

/* Fallback for older browsers without :has() — JS will toggle .is-open */
.ramperpay-method-accordion + .ramperpay-finchpay-body.is-open { display: block; }

/* ===== FinchPay green reminder + locked submit ===== */
.ramperpay-finchpay-reminder {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.5;
    color: #00ffa3;
    background: rgba(0, 255, 163, 0.06);
    border: 1px solid rgba(0, 255, 163, 0.25);
    border-radius: 8px;
    transition: opacity 0.3s ease, color 0.3s ease;
}
.ramperpay-finchpay-reminder svg {
    flex-shrink: 0;
    margin-top: 1px;
}
.ramperpay-finchpay-reminder.is-done {
    opacity: 0.55;
}

/* Locked submit button — visually disabled until copy */
.ramperpay-pay-btn.is-locked,
.ramperpay-pay-btn[disabled] {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    pointer-events: none;
    filter: grayscale(0.5);
}

/* ===== Custom logo image ===== */
.ramperpay-logo-img {
    max-width: 180px;
    object-fit: contain;
}
.ramperpay-method-icon-img {
    object-fit: contain;
}


/* =====================================================================
   FinchPay Modal — premium light theme
   Palette extracted from FinchPay logo:
     - Backdrop / card: pure white with frosted blur
     - Text: deep black (#0a0e1a) for high contrast
     - Accent button: FinchPay light blue (#4D82A9 base, #80B3D8 hover)
     - Highlights: soft sky blue (#ABD0EA) and dark steel (#2D5878)
   ===================================================================== */

/* Underlying page blur — applied to <main> when modal opens */
.ramperpay-blurred {
    filter: blur(8px);
    pointer-events: none;
    transition: filter 0.35s ease;
    user-select: none;
}
body.ramperpay-modal-locked { overflow: hidden; }

/* Modal container */
.ramperpay-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.ramperpay-modal.is-open {
    display: flex;
    opacity: 1;
    animation: ramperpay-modal-fade 0.3s ease;
}
@keyframes ramperpay-modal-fade { from { opacity: 0; } to { opacity: 1; } }

/* Solid translucent backdrop (no blur — was causing renderer hangs on layered modals) */
.ramperpay-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    cursor: pointer;
}

/* Dialog — pure white card with floating soft shadow + blue ambient glow */
.ramperpay-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid rgba(77, 130, 169, 0.18);
    border-radius: 24px;
    padding: 44px 32px 30px;
    box-shadow:
        0 32px 64px -12px rgba(77, 130, 169, 0.22),
        0 12px 28px -6px rgba(15, 23, 42, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    color: #0a0e1a;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    transform: translateY(14px) scale(0.97);
    opacity: 0;
    animation: ramperpay-modal-pop 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes ramperpay-modal-pop {
    0%   { transform: translateY(14px) scale(0.97); opacity: 0; }
    100% { transform: translateY(0) scale(1);       opacity: 1; }
}

/* Decorative ambient halo behind the card */
.ramperpay-modal-dialog::before {
    content: "";
    position: absolute;
    top: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: 140%;
    height: 60%;
    background: radial-gradient(ellipse at center, rgba(171, 208, 234, 0.45) 0%, rgba(171, 208, 234, 0) 70%);
    z-index: -1;
    pointer-events: none;
}

/* Close button — light pill, top right */
.ramperpay-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border: none;
    background: #f5f7fa;
    border-radius: 50%;
    color: #5a6b7c;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.ramperpay-modal-close:hover {
    background: #e6eef5;
    color: #0a0e1a;
    transform: rotate(90deg);
}

/* FinchPay logo at top */
.ramperpay-modal-logo {
    display: flex;
    justify-content: center;
    margin: 0 0 24px;
    animation: ramperpay-logo-fade 0.6s ease 0.1s both;
}
@keyframes ramperpay-logo-fade {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ramperpay-modal-logo img {
    height: 38px;
    width: auto;
    max-width: 220px;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(77, 130, 169, 0.15));
}

/* Title — bold black */
.ramperpay-modal-title {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;
    color: #0a0e1a;
    text-align: center;
    margin: 0 0 8px;
    letter-spacing: -0.015em;
}

/* Subtitle — soft dark slate */
.ramperpay-modal-sub {
    font-size: 14px;
    line-height: 1.6;
    color: #4a5568;
    text-align: center;
    margin: 0 auto 24px;
    max-width: 360px;
}

/* Wallet display panel */
.ramperpay-modal-wallet {
    background: linear-gradient(180deg, #fafbfd 0%, #f4f7fa 100%);
    border: 1px solid rgba(77, 130, 169, 0.15);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 18px;
}
.ramperpay-modal-wallet-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: #4D82A9;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 10px;
}
.ramperpay-modal-wallet-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.ramperpay-modal-wallet-row code {
    flex: 1;
    min-width: 0;
    word-break: break-all;
    font-family: "JetBrains Mono", "SF Mono", Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    color: #0a0e1a;
    background: #ffffff;
    padding: 11px 13px;
    border-radius: 10px;
    border: 1px solid rgba(77, 130, 169, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Copy button — light blue gradient */
.ramperpay-modal-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 16px;
    background: linear-gradient(180deg, #80B3D8 0%, #4D82A9 100%);
    border: 1px solid rgba(77, 130, 169, 0.4);
    border-radius: 10px;
    color: #ffffff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(77, 130, 169, 0.3), inset 0 1px 0 rgba(255,255,255,0.25);
    transition: transform 0.15s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.ramperpay-modal-copy:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(77, 130, 169, 0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}
.ramperpay-modal-copy:active { transform: translateY(0); }
.ramperpay-modal-copy.is-copied {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
    border-color: #059669;
    cursor: default;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.ramperpay-modal-copy.is-copied .ramperpay-modal-copy-icon { display: none; }

/* Green reminder under wallet */
.ramperpay-modal-reminder {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 12px;
    padding: 11px 13px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #065f46;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    transition: opacity 0.4s ease;
}
.ramperpay-modal-reminder svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: #10b981;
}
.ramperpay-modal-reminder.is-done {
    opacity: 0.5;
}

/* Proceed button — premium light blue, full width */
.ramperpay-modal-proceed {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 22px;
    background: linear-gradient(135deg, #80B3D8 0%, #4D82A9 100%);
    border: none;
    border-radius: 14px;
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.015em;
    cursor: pointer;
    overflow: hidden;
    box-shadow:
        0 8px 20px rgba(77, 130, 169, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.3s ease, filter 0.3s ease;
}
.ramperpay-modal-proceed:not([disabled]):hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 28px rgba(77, 130, 169, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.ramperpay-modal-proceed:not([disabled]):active { transform: translateY(0); }

/* Shimmer effect that sweeps across the button */
.ramperpay-modal-proceed:not([disabled])::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.25) 50%, transparent 70%);
    transition: left 0.6s ease;
}
.ramperpay-modal-proceed:not([disabled]):hover::after { left: 100%; }

/* Disabled state — gray, lifeless */
.ramperpay-modal-proceed[disabled],
.ramperpay-modal-proceed:disabled {
    background: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

/* Glow burst the moment the button unlocks */
.ramperpay-modal-proceed.active-state {
    animation: ramperpay-proceed-pop 1.6s ease-out 1;
}
@keyframes ramperpay-proceed-pop {
    0%   { box-shadow: 0 0 0 0 rgba(77, 130, 169, 0.6); }
    60%  { box-shadow: 0 0 0 18px rgba(77, 130, 169, 0); }
    100% { box-shadow: 0 8px 20px rgba(77, 130, 169, 0.3); }
}

/* Inline btc-warn override (light variant for inside the modal) */
.ramperpay-modal-dialog .ramperpay-btc-warn {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
}

/* Mobile tweaks */
@media (max-width: 520px) {
    .ramperpay-modal-dialog { padding: 36px 22px 24px; border-radius: 20px; }
    .ramperpay-modal-title  { font-size: 19px; }
    .ramperpay-modal-logo img { height: 32px; }
    .ramperpay-modal-wallet-row { flex-direction: column; }
    .ramperpay-modal-copy    { width: 100%; justify-content: center; }
}


/* =====================================================================
   Direct Crypto awaiting page — premium layout
   Two-column grid (QR | address) on desktop, stacked on mobile.
   Banner with amount + countdown on top.
   ===================================================================== */

/* Amount + Timer banner */
.ramperpay-crypto-banner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 14px;
    margin: 0 0 22px;
}
.ramperpay-crypto-amount,
.ramperpay-crypto-banner > .ramperpay-crypto-timer {
    background:
        radial-gradient(circle at 0% 0%, rgba(124, 92, 255, 0.08), transparent 60%),
        rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    position: relative;
    overflow: hidden;
}
.ramperpay-crypto-amount::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 255, 163, 0.04) 0%, transparent 60%);
    pointer-events: none;
}

.ramperpay-crypto-amount-label,
.ramperpay-crypto-timer-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--rp-text-mute, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.ramperpay-crypto-amount-value {
    font-family: "Syne", "Inter", sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.1;
    color: var(--rp-text, #fff);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
    margin: 2px 0 0;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.ramperpay-crypto-amount-ccy {
    font-size: 14px;
    color: var(--rp-mint, #00ffa3);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ramperpay-crypto-amount-hint {
    font-size: 12px;
    color: var(--rp-text-mute, #94a3b8);
    margin-top: 2px;
}
.ramperpay-crypto-amount-hint strong {
    color: var(--rp-text, #fff);
    font-weight: 600;
}

/* Timer card */
.ramperpay-crypto-timer {
    text-align: left;
}
.ramperpay-crypto-timer-label svg { color: var(--rp-mint, #00ffa3); }
.ramperpay-crypto-timer-clock {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-family: "JetBrains Mono", "SF Mono", monospace;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
    color: var(--rp-text, #fff);
    font-variant-numeric: tabular-nums;
    margin: 2px 0 8px;
    transition: color 0.2s ease;
}
.ramperpay-crypto-timer-sep {
    color: var(--rp-mint, #00ffa3);
    animation: ramperpay-blink 1s steps(2, end) infinite;
}
@keyframes ramperpay-blink { 50% { opacity: 0.3; } }
.ramperpay-crypto-timer.is-warning .ramperpay-crypto-timer-clock {
    color: #f59e0b;
}
.ramperpay-crypto-timer.is-warning .ramperpay-crypto-timer-clock {
    animation: ramperpay-clock-pulse 1s ease-in-out infinite;
}
@keyframes ramperpay-clock-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.03); }
}
.ramperpay-crypto-timer.is-expired .ramperpay-crypto-timer-clock {
    color: #ef4444;
    animation: none;
}
.ramperpay-crypto-timer-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.ramperpay-crypto-timer-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--rp-mint, #00ffa3), #00c896);
    transition: width 1s linear, background 0.4s ease;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(0, 255, 163, 0.4);
}

/* Picker (when multiple coins) */
.ramperpay-crypto-picker-field {
    margin: 0 0 18px !important;
}
.ramperpay-field select#ramperpay-crypto-coin-picker {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--rp-text, #fff);
    padding: 13px 14px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300ffa3' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 38px;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.ramperpay-field select#ramperpay-crypto-coin-picker:hover {
    border-color: rgba(0, 255, 163, 0.4);
}

/* ========== Main two-column grid ========== */
.ramperpay-crypto-grid {
    display: grid;
    grid-template-columns: 232px 1fr;
    gap: 16px;
    margin: 0 0 18px;
    align-items: stretch;
}

/* QR card (left) */
.ramperpay-crypto-qr-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 255, 163, 0.06), transparent 70%),
        rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 18px;
}
.ramperpay-crypto-qr-frame {
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(0, 255, 163, 0.15);
    line-height: 0;
}
.ramperpay-crypto-qr-frame img {
    width: 176px;
    height: 176px;
    display: block;
    border-radius: 4px;
    transition: opacity 0.15s ease;
}
.ramperpay-crypto-qr-caption {
    font-size: 11px;
    color: var(--rp-text-mute, #94a3b8);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
}

/* Address card (right) */
.ramperpay-crypto-addr-card {
    background:
        linear-gradient(135deg, rgba(124, 92, 255, 0.04) 0%, transparent 50%),
        rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ramperpay-crypto-addr-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ramperpay-crypto-addr-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--rp-text-mute, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.ramperpay-crypto-coin-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--rp-mint, #00ffa3);
    background: rgba(0, 255, 163, 0.08);
    border: 1px solid rgba(0, 255, 163, 0.25);
    border-radius: 100px;
    padding: 5px 11px;
    font-family: "JetBrains Mono", monospace;
    letter-spacing: 0.02em;
    text-transform: none;
}
.ramperpay-crypto-coin-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rp-mint, #00ffa3);
    box-shadow: 0 0 6px var(--rp-mint, #00ffa3);
    animation: ramperpay-coin-pulse 2s ease-in-out infinite;
}
@keyframes ramperpay-coin-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

.ramperpay-crypto-addr-value code {
    display: block;
    word-break: break-all;
    font-family: "JetBrains Mono", "SF Mono", monospace;
    font-size: 13px;
    line-height: 1.6;
    color: var(--rp-text, #fff);
    background: rgba(0, 0, 0, 0.35);
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    user-select: all;
    -webkit-user-select: all;
}

/* Copy button (full width below address) */
.ramperpay-crypto-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 11px 16px;
    background: rgba(0, 255, 163, 0.1);
    border: 1px solid rgba(0, 255, 163, 0.3);
    border-radius: 10px;
    color: var(--rp-mint, #00ffa3);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}
.ramperpay-crypto-copy-btn:hover {
    background: rgba(0, 255, 163, 0.18);
    border-color: rgba(0, 255, 163, 0.5);
}
.ramperpay-crypto-copy-btn:active { transform: translateY(1px); }
.ramperpay-crypto-copy-btn.is-copied {
    background: rgba(0, 255, 163, 0.25);
    border-color: rgba(0, 255, 163, 0.6);
}

.ramperpay-crypto-addr-note {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--rp-text-mute, #94a3b8);
}
.ramperpay-crypto-addr-note svg { color: #f59e0b; }
.ramperpay-crypto-addr-note strong {
    color: var(--rp-text, #fff);
    font-weight: 600;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    background: rgba(245, 158, 11, 0.08);
    padding: 1px 6px;
    border-radius: 4px;
}

/* Instructions block */
.ramperpay-crypto-instructions {
    background: rgba(124, 92, 255, 0.05);
    border: 1px solid rgba(124, 92, 255, 0.15);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--rp-text-mute, #94a3b8);
}

/* TXID form */
.ramperpay-crypto-form {
    margin-top: 4px;
}

/* Expired state */
.ramperpay-crypto-expired {
    text-align: center;
    padding: 28px 20px;
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 16px;
    margin: 14px 0;
}
.ramperpay-crypto-expired-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.ramperpay-crypto-expired-title {
    font-family: "Syne", "Inter", sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--rp-text, #fff);
    letter-spacing: -0.01em;
}
.ramperpay-crypto-expired-msg {
    font-size: 13.5px;
    color: var(--rp-text-mute, #94a3b8);
    margin: 0 0 18px;
    line-height: 1.5;
}

/* Mobile */
@media (max-width: 600px) {
    .ramperpay-crypto-banner {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .ramperpay-crypto-grid {
        grid-template-columns: 1fr;
    }
    .ramperpay-crypto-qr-card {
        padding: 14px;
    }
    .ramperpay-crypto-amount-value {
        font-size: 28px;
    }
    .ramperpay-crypto-timer-clock {
        font-size: 24px;
    }
    .ramperpay-crypto-addr-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* =====================================================================
   PREMIUM POLISH PASS — system-wide refinement (overrides earlier defaults)
   ===================================================================== */

/* ----- Topbar: layout + 3-step indicator ----- */
.ramperpay-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}
.ramperpay-topbar-meta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ramperpay-steps {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 6px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 100px;
    backdrop-filter: blur(20px);
}
.ramperpay-step {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 5px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    font-weight: 500;
    transition: color 0.2s ease;
}
.ramperpay-step-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}
.ramperpay-step-label {
    letter-spacing: 0.01em;
}
.ramperpay-step-active {
    color: var(--rp-text, #fff);
}
.ramperpay-step-active .ramperpay-step-dot {
    background: linear-gradient(135deg, var(--rp-mint, #00ffa3), #00c896);
    border-color: var(--rp-mint, #00ffa3);
    color: #0a0e1a;
    box-shadow: 0 0 12px rgba(0, 255, 163, 0.4);
}
.ramperpay-step-done {
    color: rgba(255, 255, 255, 0.7);
}
.ramperpay-step-done .ramperpay-step-dot {
    background: rgba(0, 255, 163, 0.12);
    border-color: rgba(0, 255, 163, 0.3);
    color: var(--rp-mint, #00ffa3);
}
.ramperpay-step-sep {
    display: inline-block;
    width: 18px;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 -2px;
}

/* Secure badge — tighter */
.ramperpay-secure {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: rgba(0, 255, 163, 0.06);
    border: 1px solid rgba(0, 255, 163, 0.18);
    border-radius: 100px;
    color: var(--rp-mint, #00ffa3);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Mobile: hide step labels, keep dots */
@media (max-width: 700px) {
    .ramperpay-topbar { flex-direction: column; align-items: flex-start; gap: 16px; }
    .ramperpay-topbar-meta { width: 100%; justify-content: space-between; }
    .ramperpay-step-label { display: none; }
    .ramperpay-step { padding: 5px; }
    .ramperpay-step-sep { width: 12px; }
}

/* ----- Cards: refined surface treatment ----- */
.ramperpay-card {
    background:
        linear-gradient(135deg, rgba(124, 92, 255, 0.025) 0%, transparent 50%),
        rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 20px;
    padding: 32px;
    backdrop-filter: blur(20px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 24px 60px -20px rgba(0, 0, 0, 0.5);
}
.ramperpay-card-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 20px;
    align-items: start;
}
@media (max-width: 900px) {
    .ramperpay-card-wrap { grid-template-columns: 1fr; }
    .ramperpay-card { padding: 24px; }
}

/* ----- Eyebrow tag (small pill above titles) ----- */
.ramperpay-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(0, 255, 163, 0.08);
    border: 1px solid rgba(0, 255, 163, 0.2);
    border-radius: 100px;
    color: var(--rp-mint, #00ffa3);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "JetBrains Mono", monospace;
    margin-bottom: 16px;
}
.ramperpay-eyebrow::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--rp-mint, #00ffa3);
    box-shadow: 0 0 6px var(--rp-mint, #00ffa3);
    animation: ramperpay-eyebrow-pulse 2s ease-in-out infinite;
}
@keyframes ramperpay-eyebrow-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/* ----- Product card refinements ----- */
.ramperpay-card-product { position: sticky; top: 20px; }
.ramperpay-product-image {
    margin: 0 0 20px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.ramperpay-product-image img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.6s ease;
}
.ramperpay-product-image:hover img { transform: scale(1.02); }

.ramperpay-product-name {
    font-family: "Syne", "Inter", sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--rp-text, #fff);
    margin: 0 0 14px;
}

.ramperpay-product-desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 20px;
}
.ramperpay-product-desc p { margin: 0 0 8px; }
.ramperpay-product-desc p:last-child { margin: 0; }

.ramperpay-price-block {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 18px 20px;
    background:
        linear-gradient(135deg, rgba(0, 255, 163, 0.05) 0%, transparent 60%),
        rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 255, 163, 0.15);
    border-radius: 14px;
    margin: 0 0 20px;
}
.ramperpay-price-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--rp-text-mute, #94a3b8);
}
.ramperpay-price-value {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.ramperpay-price-num {
    font-family: "Syne", "Inter", sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: var(--rp-text, #fff);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
}
.ramperpay-price-ccy {
    font-size: 13px;
    font-weight: 600;
    color: var(--rp-mint, #00ffa3);
    letter-spacing: 0.05em;
}

.ramperpay-trust {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ramperpay-trust li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
}
.ramperpay-trust li svg {
    flex-shrink: 0;
    color: var(--rp-mint, #00ffa3);
    opacity: 0.7;
}

/* ----- Form card: title + sub ----- */
.ramperpay-form-title {
    font-family: "Syne", "Inter", sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--rp-text, #fff);
    margin: 0 0 8px;
}
.ramperpay-form-sub {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 22px;
}

/* ----- Input fields ----- */
.ramperpay-field {
    display: block;
    margin: 0 0 14px;
}
.ramperpay-field-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 6px;
}
.ramperpay-field input[type="text"],
.ramperpay-field input[type="email"],
.ramperpay-field input[type="tel"],
.ramperpay-field input[type="url"],
.ramperpay-field select,
.ramperpay-field textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--rp-text, #fff);
    padding: 13px 15px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    box-sizing: border-box;
}
.ramperpay-field input::placeholder,
.ramperpay-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* v3.9.21 — <option> elements render in the OS's native dropdown popup, which
   uses a white background. They inherit color:#fff from the parent <select>,
   which makes them white-on-white = invisible. Force dark text on white
   background so the open dropdown is always legible. */
.ramperpay-field select option,
.ramperpay-field select optgroup {
    background-color: #ffffff;
    color: #0f172a;
}
.ramperpay-field input:focus,
.ramperpay-field select:focus,
.ramperpay-field textarea:focus {
    outline: none;
    border-color: rgba(0, 255, 163, 0.45);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 3px rgba(0, 255, 163, 0.1);
}

/* ----- Pay button ----- */
.ramperpay-pay-btn {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 17px 24px;
    background: linear-gradient(135deg, var(--rp-mint, #00ffa3) 0%, #00c896 100%);
    border: none;
    border-radius: 12px;
    color: #0a0e1a;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    overflow: hidden;
    box-shadow:
        0 10px 24px -8px rgba(0, 255, 163, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.25) inset;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    margin-top: 6px;
}
.ramperpay-pay-btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow:
        0 14px 32px -8px rgba(0, 255, 163, 0.6),
        0 1px 0 rgba(255, 255, 255, 0.3) inset;
}
.ramperpay-pay-btn:not(:disabled):active { transform: translateY(0); }
.ramperpay-pay-btn::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
    transition: left 0.6s ease;
    pointer-events: none;
}
.ramperpay-pay-btn:not(:disabled):hover::after { left: 100%; }
.ramperpay-pay-btn-arrow {
    display: inline-flex;
    transition: transform 0.18s ease;
}
.ramperpay-pay-btn:not(:disabled):hover .ramperpay-pay-btn-arrow {
    transform: translateX(3px);
}
.ramperpay-pay-btn.is-locked,
.ramperpay-pay-btn:disabled {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.3);
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}

/* ----- Method radio cards (override existing styles) ----- */
.ramperpay-methods {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 20px;
}
.ramperpay-method-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.ramperpay-method:hover .ramperpay-method-card {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
}
.ramperpay-method input[type="radio"]:checked + .ramperpay-method-card {
    border-color: rgba(0, 255, 163, 0.45);
    background:
        linear-gradient(135deg, rgba(0, 255, 163, 0.06) 0%, transparent 60%),
        rgba(0, 255, 163, 0.03);
    box-shadow: 0 0 0 1px rgba(0, 255, 163, 0.25), 0 4px 16px -4px rgba(0, 255, 163, 0.2);
}

.ramperpay-method-card .ramperpay-method-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.8);
    border: none;
}
.ramperpay-method input[type="radio"]:checked + .ramperpay-method-card .ramperpay-method-icon {
    background: rgba(0, 255, 163, 0.12);
    color: var(--rp-mint, #00ffa3);
}
.ramperpay-method-card .ramperpay-method-name {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--rp-text, #fff);
    line-height: 1.3;
}
.ramperpay-method-card .ramperpay-method-desc,
.ramperpay-method-card .ramperpay-method-meta {
    display: block;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 2px;
}
.ramperpay-method-check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    transition: border-color 0.18s ease, background 0.18s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ramperpay-method-check svg { display: none; }
.ramperpay-method input[type="radio"]:checked + .ramperpay-method-card .ramperpay-method-check {
    border-color: var(--rp-mint, #00ffa3);
    background: var(--rp-mint, #00ffa3);
}
.ramperpay-method input[type="radio"]:checked + .ramperpay-method-card .ramperpay-method-check::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: #0a0e1a;
}

/* Hide native radios */
.ramperpay-method input[type="radio"],
.ramperpay-method-accordion input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

/* "RECOMMENDED" ribbon */
.ramperpay-method-card.ramperpay-method-recommended {
    border-color: rgba(0, 255, 163, 0.25);
    background:
        linear-gradient(135deg, rgba(0, 255, 163, 0.05) 0%, transparent 70%),
        rgba(255, 255, 255, 0.025);
}
.ramperpay-method-ribbon {
    position: absolute;
    top: -1px;
    right: 14px;
    transform: translateY(-50%);
    background: linear-gradient(135deg, var(--rp-mint, #00ffa3), #00c896);
    color: #0a0e1a;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding: 3px 8px;
    border-radius: 100px;
    font-family: "JetBrains Mono", monospace;
    box-shadow: 0 4px 12px -2px rgba(0, 255, 163, 0.4);
}

/* ----- Footer ----- */
.ramperpay-foot {
    margin-top: 40px;
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.35);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.ramperpay-foot-sep { color: rgba(255, 255, 255, 0.2); }
.ramperpay-foot a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.18s ease;
}
.ramperpay-foot a:hover { color: var(--rp-mint, #00ffa3); }

/* ----- Alert / errors ----- */
.ramperpay-alert {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #fca5a5;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin: 0 0 14px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* ----- Disclaimer text ----- */
.ramperpay-disclaimer {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.5;
    margin: 12px 0 0;
    text-align: center;
}

/* ----- Shell width tweaks ----- */
.ramperpay-shell {
    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 24px 40px;
}
.ramperpay-shell-narrow {
    max-width: 620px;
}

/* ----- Background — make it richer ----- */
.ramperpay-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 15% 20%, rgba(124, 92, 255, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 85% 75%, rgba(0, 255, 163, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, #0a0e1a 0%, #0d1220 100%);
}
.ramperpay-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
}

/* =====================================================================
   Switchere Modal — purple/orange palette from the official widget
   Backdrop: soft cream→purple gradient (matches screenshot)
   Card: pure white with subtle shadow
   Accent: #5B5CE0 (Switchere indigo) for buttons, #F7931A (BTC orange)
   ===================================================================== */

/* Switchere-specific backdrop — cream→purple radial gradient */
.ramperpay-sw-backdrop {
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 220, 200, 0.85) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(180, 140, 220, 0.7) 0%, transparent 50%),
        rgba(15, 23, 42, 0.55);
}

/* Dialog — bright white card */
.ramperpay-sw-dialog {
    background: #ffffff;
    border: 1px solid rgba(91, 92, 224, 0.12);
    border-radius: 20px;
    padding: 36px 28px 24px;
    max-width: 420px;
    color: #0F172A;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-shadow:
        0 32px 64px -16px rgba(91, 92, 224, 0.25),
        0 12px 28px -8px rgba(15, 23, 42, 0.1);
}

.ramperpay-sw-close {
    background: #f3f4f6;
    color: #6b7280;
}
.ramperpay-sw-close:hover {
    background: #e5e7eb;
    color: #0F172A;
}

/* Logo */
.ramperpay-sw-logo {
    display: flex;
    justify-content: center;
    margin: 0 0 22px;
}
.ramperpay-sw-logo img {
    height: 28px;
    width: auto;
    max-width: 180px;
    display: block;
}


/* ===== Widget preview card — accurate Switchere replica (rev 2) ===== */
.ramperpay-sw-widget {
    background: #ffffff;
    border: 1px solid #E8EAF1;
    border-radius: 14px;
    padding: 18px 16px;
    margin: 0 0 18px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

/* Top: hamburger left, three tabs right (only Buy on pill bg) */
.ramperpay-sw-widget-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.ramperpay-sw-hamburger {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: default;
    display: inline-flex;
    color: #1F2937;
}
.ramperpay-sw-tabs {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    font-size: 13px;
    font-weight: 600;
}
.ramperpay-sw-tab {
    color: #1F2937;
    cursor: default;
    padding: 8px 4px;
}
.ramperpay-sw-tab-active {
    background: #5C5CFF;
    color: #ffffff !important;
    padding: 8px 22px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(92, 92, 255, 0.25);
}

/* Field cards — with inset top-left label */
.ramperpay-sw-field {
    position: relative;
    background: #ffffff;
    border: 1px solid #E8EAF1;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ramperpay-sw-field-label-inset {
    position: absolute;
    top: 8px;
    left: 14px;
    font-size: 11px;
    color: #94A3B8;
    background: transparent;
    z-index: 1;
}
.ramperpay-sw-field-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
}
.ramperpay-sw-currency-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.ramperpay-sw-flag-circle,
.ramperpay-sw-coin-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-block;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.ramperpay-sw-flag-circle svg,
.ramperpay-sw-coin-circle svg { display: block; width: 100%; height: 100%; }
.ramperpay-sw-currency-stack {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.25;
    gap: 1px;
}
.ramperpay-sw-currency-code {
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ramperpay-sw-currency-name {
    font-size: 11px;
    color: #6B7280;
    font-weight: 400;
}
.ramperpay-sw-btc-badge {
    display: inline-block;
    background: #FFE9A8;
    color: #B45309;
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.03em;
}
.ramperpay-sw-field-amount {
    font-size: 26px;
    font-weight: 700;
    color: #0F172A;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
}
.ramperpay-sw-field-amount-est {
    color: #1F2937;
    font-weight: 600;
    font-size: 20px;
}

/* "You send" highlight pulse + arrow tooltip */
.ramperpay-sw-field-highlight {
    border-color: rgba(92, 92, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(92, 92, 255, 0.08);
    animation: ramperpay-sw-field-pulse 2.4s ease-in-out infinite;
}
@keyframes ramperpay-sw-field-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(92, 92, 255, 0.08); }
    50%      { box-shadow: 0 0 0 5px rgba(92, 92, 255, 0.16); }
}
.ramperpay-sw-field-highlight .ramperpay-sw-field-amount {
    color: #4F46E5;
}
.ramperpay-sw-amount-hint {
    position: absolute;
    top: -8px;
    right: 16px;
    transform: translateY(-100%);
    background: #4F46E5;
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
    animation: ramperpay-sw-hint-bounce 1.5s ease-in-out infinite;
    pointer-events: none;
}
.ramperpay-sw-amount-hint-arrow {
    position: absolute;
    bottom: -4px;
    right: 18px;
    width: 8px;
    height: 8px;
    background: #4F46E5;
    transform: rotate(45deg);
}
@keyframes ramperpay-sw-hint-bounce {
    0%, 100% { transform: translateY(-100%); }
    50%      { transform: translateY(calc(-100% - 3px)); }
}

/* Payment method pills */
.ramperpay-sw-methods {
    margin-top: 18px;
}
.ramperpay-sw-methods-label {
    display: block;
    font-size: 13px;
    color: #1F2937;
    margin-bottom: 12px;
    font-weight: 500;
}
.ramperpay-sw-methods-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.ramperpay-sw-methods-row:last-child { margin-bottom: 0; }

.ramperpay-sw-method-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1px solid #E8EAF1;
    border-radius: 100px;
    background: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    color: #1F2937;
    line-height: 1.2;
    white-space: nowrap;
    min-height: 36px;
    box-sizing: border-box;
}

/* Visa + Mastercard combo pill */
.ramperpay-sw-pill-card {
    gap: 8px;
}
.ramperpay-sw-visa {
    display: inline-block;
    background: #1A1F71;
    color: #F7B600;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 2px;
    letter-spacing: 0.06em;
    line-height: 1;
}
.ramperpay-sw-mc {
    display: inline-block;
    width: 18px;
    height: 12px;
    border-radius: 2px;
    background:
        radial-gradient(circle at 32% 50%, #EB001B 5.5px, transparent 6px),
        radial-gradient(circle at 68% 50%, #F79E1B 5.5px, transparent 6px);
}

/* Open Banking — two-line stacked label */
.ramperpay-sw-stacked-label {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
    font-size: 10.5px;
    font-weight: 700;
}
.ramperpay-sw-stacked-label span { display: block; }

/* G Pay */
.ramperpay-sw-gpay {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 13px;
}

/* Neteller — green oval */
.ramperpay-sw-pill-neteller {
    background: #ffffff;
}
.ramperpay-sw-neteller-text {
    color: #8DBE00;
    font-weight: 900;
    font-size: 10.5px;
    letter-spacing: 0.05em;
    font-style: italic;
}

/* PayPal */
.ramperpay-sw-paypal-text {
    font-weight: 800;
    font-size: 12.5px;
}
.ramperpay-sw-paypal-text::first-letter { color: #003087; }

/* AstroPay */
.ramperpay-sw-astropay-mark {
    color: #00C2FF;
    font-weight: 900;
    font-size: 14px;
    margin-right: -2px;
}
.ramperpay-sw-astropay-text {
    color: #0F172A;
    font-weight: 700;
    font-size: 12px;
}

/* Skrill */
.ramperpay-sw-skrill-text {
    color: #862165;
    font-weight: 900;
    font-style: italic;
    font-size: 13px;
}

/* Revolut */
.ramperpay-sw-revolut-text {
    color: #0F172A;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: -0.02em;
}

/* Purchase summary row */
.ramperpay-sw-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 10px 4px 0;
    font-size: 13px;
    color: #0F172A;
    flex-wrap: wrap;
}
.ramperpay-sw-summary-label {
    color: #1F2937;
    font-weight: 500;
}
.ramperpay-sw-summary-value {
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ramperpay-sw-summary-arrow {
    color: #1F2937;
    font-weight: 500;
}
.ramperpay-sw-summary-details {
    margin-left: auto;
    color: #5C5CFF;
    cursor: pointer;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 12.5px;
}

/* The "Buy" CTA inside the widget — IS the proceed action */
.ramperpay-sw-buy-btn {
    width: 100%;
    background: #5C5CFF;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 14px 20px;
    margin-top: 14px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
    box-shadow: 0 6px 14px -4px rgba(92, 92, 255, 0.4);
}
.ramperpay-sw-buy-btn:not([disabled]):hover {
    background: #4747F0;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -6px rgba(92, 92, 255, 0.55);
}
.ramperpay-sw-buy-btn:not([disabled]):active { transform: translateY(0); }
.ramperpay-sw-buy-btn[disabled],
.ramperpay-sw-buy-btn:disabled {
    background: #C7CAD6;
    color: #ffffff;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}
.ramperpay-sw-buy-btn.is-ready {
    animation: ramperpay-sw-buy-pop 1.4s ease-out 1;
}
@keyframes ramperpay-sw-buy-pop {
    0%   { box-shadow: 0 0 0 0 rgba(92, 92, 255, 0.6); }
    60%  { box-shadow: 0 0 0 16px rgba(92, 92, 255, 0); }
    100% { box-shadow: 0 6px 14px -4px rgba(92, 92, 255, 0.4); }
}

/* ===== BTC wallet section ===== */
.ramperpay-sw-wallet {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
    margin: 0 0 16px;
}
.ramperpay-sw-wallet-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: #5B5CE0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}
.ramperpay-sw-wallet-row {
    display: flex;
    gap: 6px;
    align-items: stretch;
}
.ramperpay-sw-wallet-row code {
    flex: 1;
    min-width: 0;
    word-break: break-all;
    font-family: "JetBrains Mono", "SF Mono", monospace;
    font-size: 11px;
    line-height: 1.45;
    color: #0F172A;
    background: #ffffff;
    padding: 9px 11px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.ramperpay-sw-copy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 9px 13px;
    background: #5B5CE0;
    border: 1px solid #5B5CE0;
    border-radius: 8px;
    color: #ffffff;
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.1s ease;
}
.ramperpay-sw-copy:hover { background: #4A4BD0; }
.ramperpay-sw-copy:active { transform: translateY(1px); }
.ramperpay-sw-copy.is-copied {
    background: #10b981;
    border-color: #10b981;
    cursor: default;
}

/* Reminder banner */
.ramperpay-sw-reminder {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 10px;
    font-size: 11.5px;
    line-height: 1.45;
    color: #065f46;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    transition: opacity 0.3s ease;
}
.ramperpay-sw-reminder svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: #10b981;
}
.ramperpay-sw-reminder.is-done {
    opacity: 0.55;
}

/* ===== Proceed (the big purple button) ===== */
.ramperpay-sw-proceed {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    background: #5B5CE0;
    border: none;
    border-radius: 10px;
    color: #ffffff;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
    box-shadow: 0 6px 16px -4px rgba(91, 92, 224, 0.4);
}
.ramperpay-sw-proceed:not([disabled]):hover {
    background: #4A4BD0;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -6px rgba(91, 92, 224, 0.55);
}
.ramperpay-sw-proceed:not([disabled]):active { transform: translateY(0); }
.ramperpay-sw-proceed[disabled],
.ramperpay-sw-proceed:disabled {
    background: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}
.ramperpay-sw-proceed.is-ready {
    animation: ramperpay-sw-pop 1.4s ease-out 1;
}
@keyframes ramperpay-sw-pop {
    0%   { box-shadow: 0 0 0 0 rgba(91, 92, 224, 0.6); }
    60%  { box-shadow: 0 0 0 16px rgba(91, 92, 224, 0); }
    100% { box-shadow: 0 6px 16px -4px rgba(91, 92, 224, 0.4); }
}

/* Mobile */
@media (max-width: 520px) {
    .ramperpay-sw-dialog { padding: 28px 20px 20px; }
    .ramperpay-sw-wallet-row { flex-direction: column; }
    .ramperpay-sw-copy { width: 100%; justify-content: center; }
}

/* =====================================================================
   Switchere — Two-column layout (Tailwind-style utility composition)
   Prefix `rpsw-` so it never collides with existing .ramperpay-sw- styles.
   Only additive — existing widget/wallet styles stay untouched.
   ===================================================================== */

/* Wider dialog to fit 2 columns */
.ramperpay-modal-switchere .ramperpay-sw-dialog {
    max-width: 880px;
}

/* The grid container */
.rpsw-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 24px;
    align-items: start;
}

/* Column shared shell */
.rpsw-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ===== LEFT COLUMN ===== */
.rpsw-col-left {
    padding: 4px 4px 0 0;
}
.rpsw-col-title {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}
.rpsw-col-sub {
    font-size: 13px;
    color: #6B7280;
    line-height: 1.5;
    margin: 0 0 20px;
}

/* Numbered steps list */
.rpsw-steps {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rpsw-step {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    background: #F9FAFB;
    border: 1px solid #E8EAF1;
    border-radius: 10px;
    transition: border-color 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease;
    opacity: 0;
    transform: translateX(-8px);
    animation: rpsw-step-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.rpsw-step:hover {
    border-color: rgba(92, 92, 255, 0.3);
    transform: translateX(2px);
    box-shadow: 0 4px 12px -4px rgba(92, 92, 255, 0.15);
}
.rpsw-step[data-step="1"] { animation-delay: 0.05s; }
.rpsw-step[data-step="2"] { animation-delay: 0.15s; }
.rpsw-step[data-step="3"] { animation-delay: 0.25s; }
@keyframes rpsw-step-in {
    to { opacity: 1; transform: translateX(0); }
}

.rpsw-step-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5C5CFF 0%, #4747F0 100%);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(92, 92, 255, 0.35);
}

.rpsw-step-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}
.rpsw-step-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: #0F172A;
    line-height: 1.3;
}
.rpsw-step-icon { color: #5C5CFF; flex-shrink: 0; }
.rpsw-step-desc {
    font-size: 12px;
    color: #6B7280;
    line-height: 1.5;
}
.rpsw-step-desc strong {
    color: #0F172A;
    font-weight: 700;
}

/* Highlighted warning box */
.rpsw-warning {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.04) 100%);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 10px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
}
.rpsw-warning::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #F59E0B;
}
.rpsw-warning-icon {
    color: #D97706;
    flex-shrink: 0;
    margin-top: 1px;
}
.rpsw-warning-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #78350F;
}
.rpsw-warning-text strong {
    color: #92400E;
    font-weight: 700;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ===== RIGHT COLUMN ===== */
.rpsw-col-right {
    position: relative;
}
.rpsw-col-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #5C5CFF;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}
.rpsw-col-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #5C5CFF;
    box-shadow: 0 0 0 3px rgba(92, 92, 255, 0.15);
    animation: rpsw-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes rpsw-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(92, 92, 255, 0.15); }
    50%      { box-shadow: 0 0 0 6px rgba(92, 92, 255, 0.05); }
}

/* Visual arrow pointing at the amount field */
.rpsw-arrow {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 4px;
}
.rpsw-arrow-amount {
    top: 88px;
    right: -28px;
    transform: rotate(8deg);
    animation: rpsw-arrow-float 2.4s ease-in-out infinite;
}
@keyframes rpsw-arrow-float {
    0%, 100% { transform: rotate(8deg) translateY(0); }
    50%      { transform: rotate(8deg) translateY(-4px); }
}
.rpsw-arrow-label {
    background: #5C5CFF;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(92, 92, 255, 0.3);
}

/* Caption under the widget */
.rpsw-caption {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11.5px;
    color: #6B7280;
    margin: 12px 0 0;
    padding: 8px 12px;
    background: #F9FAFB;
    border-radius: 8px;
    line-height: 1.4;
}
.rpsw-caption svg { color: #5C5CFF; flex-shrink: 0; }

/* ===== Responsive: stack on mobile ===== */
@media (max-width: 720px) {
    .ramperpay-modal-switchere .ramperpay-sw-dialog {
        max-width: 460px;
    }
    .rpsw-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .rpsw-arrow-amount {
        display: none;  /* hide the arrow on mobile — widget renders fine without */
    }
    .rpsw-col-left { padding: 0; }
}

/* Step "done" state — green check + dimmed body */
.rpsw-step-done {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.04);
}
.rpsw-step-done .rpsw-step-num {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
    font-size: 0;  /* hide the number */
    position: relative;
}
.rpsw-step-done .rpsw-step-num::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}
.rpsw-step-done .rpsw-step-title {
    color: #064E3B;
}
.rpsw-step-done .rpsw-step-icon {
    color: #10b981;
}

/* =====================================================================
   Switchere — Single-column revision (overrides 2-col grid)
   ===================================================================== */

/* Single-column container — keep dialog narrow */
.ramperpay-modal-switchere .ramperpay-sw-dialog {
    max-width: 460px;
}
.rpsw-single {
    display: flex;
    flex-direction: column;
}

/* Green reminder — prominent, before proceeding */
.rpsw-green-reminder {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 12px;
    padding: 11px 14px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    color: #065F46;
    background: linear-gradient(135deg, rgba(16,185,129,0.12) 0%, rgba(16,185,129,0.05) 100%);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 10px;
    transition: opacity 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.rpsw-green-reminder svg {
    flex-shrink: 0;
    color: #10b981;
    transition: transform 0.3s ease;
}
/* When copied — turn into confirmation */
.rpsw-green-reminder.is-confirmed {
    background: linear-gradient(135deg, rgba(16,185,129,0.2) 0%, rgba(16,185,129,0.08) 100%);
    border-color: rgba(16, 185, 129, 0.6);
}
.rpsw-green-reminder.is-confirmed svg { transform: scale(1.15); }

/* Buy button — clearer with arrow + interaction */
.ramperpay-sw-buy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}
.rpsw-buy-arrow {
    transition: transform 0.2s ease;
}
.ramperpay-sw-buy-btn:not([disabled]):hover .rpsw-buy-arrow {
    transform: translateX(4px);
}
/* Shimmer sweep on hover when enabled */
.ramperpay-sw-buy-btn:not([disabled])::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
    transition: left 0.6s ease;
    pointer-events: none;
}
.ramperpay-sw-buy-btn:not([disabled]):hover::after { left: 100%; }

/* When unlocked, pulse once + glow to draw attention */
.ramperpay-sw-buy-btn.is-ready {
    animation: rpsw-buy-ready 1.6s ease-out 1, rpsw-buy-breathe 2.4s ease-in-out 1.6s infinite;
}
@keyframes rpsw-buy-ready {
    0%   { box-shadow: 0 0 0 0 rgba(92, 92, 255, 0.6); }
    60%  { box-shadow: 0 0 0 16px rgba(92, 92, 255, 0); }
    100% { box-shadow: 0 6px 14px -4px rgba(92, 92, 255, 0.4); }
}
@keyframes rpsw-buy-breathe {
    0%, 100% { box-shadow: 0 6px 14px -4px rgba(92, 92, 255, 0.4); }
    50%      { box-shadow: 0 8px 22px -2px rgba(92, 92, 255, 0.6); }
}

/* Amount hint inside widget — reword to manual-entry color (amber, not "done") */
.ramperpay-sw-amount-hint {
    background: #4F46E5;
}

/* =====================================================================
   Switchere — Dynamic progress + guidance (v3.9.2)
   ===================================================================== */

/* Progress bar */
.rpsw-progress {
    margin: 0 0 18px;
}
.rpsw-progress-track {
    height: 6px;
    background: #E8EAF1;
    border-radius: 100px;
    overflow: hidden;
}
.rpsw-progress-fill {
    height: 100%;
    width: 50%;
    background: linear-gradient(90deg, #5C5CFF, #8B8BFF);
    border-radius: 100px;
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 8px rgba(92, 92, 255, 0.4);
}
.rpsw-progress-label {
    display: block;
    margin-top: 7px;
    font-size: 11.5px;
    font-weight: 600;
    color: #5C5CFF;
    letter-spacing: 0.01em;
}

/* Active step — glowing highlight (the step the buyer should do now) */
.rpsw-step.rpsw-step-active {
    border-color: rgba(92, 92, 255, 0.5);
    background: linear-gradient(135deg, rgba(92,92,255,0.07) 0%, rgba(92,92,255,0.02) 100%);
    box-shadow: 0 0 0 3px rgba(92, 92, 255, 0.1);
    animation: rpsw-active-glow 2s ease-in-out infinite;
}
@keyframes rpsw-active-glow {
    0%, 100% { box-shadow: 0 0 0 3px rgba(92, 92, 255, 0.1); }
    50%      { box-shadow: 0 0 0 5px rgba(92, 92, 255, 0.18); }
}
.rpsw-step.rpsw-step-active .rpsw-step-num {
    transform: scale(1.08);
}

/* Animated finger/pointer that draws attention to the next action */
.rpsw-pointer {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    color: #5C5CFF;
    animation: rpsw-pointer-bob 1.1s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(92,92,255,0.4));
}
@keyframes rpsw-pointer-bob {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-6px); }
}

/* Copy button — attention pulse when it's the active action */
.ramperpay-sw-copy.rpsw-attention {
    animation: rpsw-copy-attention 1.4s ease-in-out infinite;
}
@keyframes rpsw-copy-attention {
    0%, 100% { box-shadow: 0 2px 8px rgba(77,130,169,0.3); }
    50%      { box-shadow: 0 2px 16px rgba(92,92,255,0.6); transform: scale(1.03); }
}

/* =====================================================================
   Switchere — compact amount callout (v3.9.3 cleanup)
   Replaces the verbose 3-step list + warning box.
   ===================================================================== */
.rpsw-amount-callout {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    margin: 0 0 16px;
    background: linear-gradient(135deg, rgba(92,92,255,0.08) 0%, rgba(92,92,255,0.03) 100%);
    border: 1px solid rgba(92, 92, 255, 0.3);
    border-radius: 12px;
    text-align: center;
}
.rpsw-amount-callout-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5C5CFF;
}
.rpsw-amount-callout-value {
    font-family: "Syne", "Inter", sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.rpsw-amount-callout-ccy {
    font-size: 14px;
    color: #5C5CFF;
    font-weight: 600;
}
.rpsw-amount-callout-note {
    font-size: 11.5px;
    color: #B45309;
    font-weight: 600;
    margin-top: 2px;
}

/* =====================================================================
   Switchere — Instruction lines + accordion (v3.9.4, matches mockup)
   ===================================================================== */
.rpsw-title-main {
    font-family: "Syne", "Inter", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #0F172A;
    text-align: center;
    margin: 0 0 18px;
    letter-spacing: -0.01em;
}

/* Numbered instruction lines */
.rpsw-instr-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    margin-bottom: 10px;
    background: #F9FAFB;
    border: 1px solid #E8EAF1;
    border-radius: 10px;
    font-size: 13.5px;
    color: #1F2937;
    line-height: 1.4;
}
.rpsw-instr-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5C5CFF, #4747F0);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(92,92,255,0.3);
}
.rpsw-instr-text {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}
.rpsw-instr-text strong { color: #0F172A; font-weight: 700; }
.rpsw-instr-addr {
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    color: #0F172A;
    background: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #E8EAF1;
    word-break: break-all;
}

/* Copy button — yellow highlight like the mockup */
.rpsw-copy-btn {
    flex-shrink: 0;
    padding: 7px 16px;
    background: #FFE600;
    color: #0F172A;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.rpsw-copy-btn:hover { background: #FFD600; }
.rpsw-copy-btn:active { transform: translateY(1px); }
.rpsw-copy-btn.is-copied {
    background: #10b981;
    color: #fff;
}
/* attention pulse reuses existing keyframes if present */
.rpsw-copy-btn.rpsw-attention {
    animation: rpsw-copy-attention 1.4s ease-in-out infinite;
}

/* Accordion — hidden until copy */
.rpsw-accordion {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease, margin 0.4s ease;
    margin-top: 0;
}
.rpsw-accordion.is-open {
    max-height: 1200px;
    opacity: 1;
    margin-top: 14px;
}
.rpsw-accordion-inner {
    padding-top: 4px;
}

/* Main proceed CTA */
.rpsw-proceed-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
    padding: 15px 20px;
    background: #5C5CFF;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
    box-shadow: 0 6px 16px -4px rgba(92,92,255,0.45);
}
.rpsw-proceed-btn:hover {
    background: #4747F0;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -6px rgba(92,92,255,0.6);
}
.rpsw-proceed-btn:active { transform: translateY(0); }

/* =====================================================================
   Switchere — static example screenshot in accordion (v3.9.5)
   ===================================================================== */
.rpsw-example-img {
    display: flex;
    justify-content: center;
    margin: 4px 0 0;
}
.rpsw-example-img img {
    display: block;
    width: 100%;
    max-width: 340px;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.25);
}

/* =====================================================================
   Switchere — embedded widget (v3.9.6) — adapted from user-supplied design
   ===================================================================== */

/* Header logo (wordmark above the widget) */
.rpsw-header-logo {
    text-align: center;
    margin-bottom: 18px;
}
.rpsw-header-logo img {
    height: 36px;
    width: auto;
}
.rpsw-header-logo .rpsw-logo-fallback {
    font-size: 2rem;
    font-weight: 800;
    color: #374151;
    letter-spacing: -0.5px;
}

/* Instruction text above widget */
.rpsw-instruction-text {
    font-size: 0.92rem;
    font-weight: 600;
    color: #4b5563;
    text-align: center;
    margin-bottom: 14px;
    padding: 11px 18px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.rpsw-highlight-amount {
    color: #6366f1;
    font-weight: 800;
    font-size: 1.08rem;
}

/* Widget card */
.rpsw-widget {
    width: 100%;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.12);
    overflow: hidden;
    border: 1px solid #e8e8e8;
}

/* Widget header (menu + logo) */
.rpsw-sw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #f9fafb;
    border-bottom: 1px solid #f3f4f6;
}
.rpsw-sw-menu {
    width: 20px;
    height: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.rpsw-sw-menu span {
    display: block;
    height: 2px;
    background: #9ca3af;
    border-radius: 1px;
}
.rpsw-sw-logo-text {
    font-size: 1.18rem;
    font-weight: 800;
    color: #374151;
    letter-spacing: 0.4px;
}

/* Tabs */
.rpsw-sw-tabs {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 10px 14px;
    background: #f9fafb;
}
.rpsw-sw-tab {
    padding: 7px 20px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #9ca3af;
    cursor: default;
    border: none;
    background: transparent;
    font-family: inherit;
}
.rpsw-sw-tab-active {
    background: #6366f1;
    color: #fff;
    box-shadow: 0 2px 10px rgba(99,102,241,0.3);
}

.rpsw-sw-body { padding: 16px; }

/* Input boxes */
.rpsw-sw-input-box {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: 13px 14px;
    margin-bottom: 10px;
    text-align: left;
    position: relative;
}
.rpsw-sw-input-label {
    font-size: 0.68rem;
    color: #9ca3af;
    margin-bottom: 5px;
    font-weight: 500;
}
.rpsw-sw-input-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.rpsw-sw-currency {
    display: flex;
    align-items: center;
    gap: 9px;
}
.rpsw-sw-currency img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.rpsw-sw-currency-info { display: flex; flex-direction: column; }
.rpsw-sw-currency-code {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 4px;
}
.rpsw-sw-arrow { font-size: 0.62rem; color: #d1d5db; }
.rpsw-sw-currency-name { font-size: 0.66rem; color: #9ca3af; }
.rpsw-sw-amount {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1f2937;
    background: transparent;
    border: none;
    text-align: right;
    width: 110px;
    outline: none;
    font-family: inherit;
}
.rpsw-sw-btc-amount {
    font-size: 1rem;
    font-weight: 600;
    color: #6b7280;
}
.rpsw-sw-btc-tag {
    background: #f7931a;
    color: #fff;
    font-size: 0.56rem;
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 3px;
    font-weight: 700;
}

/* Animated amount indicator */
.rpsw-amount-indicator {
    position: absolute;
    top: -10px;
    right: 12px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(99,102,241,0.4);
    animation: rpsw-indicator-bounce 1.8s infinite;
    z-index: 2;
    white-space: nowrap;
}
@keyframes rpsw-indicator-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

/* Payment methods */
.rpsw-sw-pm-section { margin-top: 12px; text-align: left; }
.rpsw-sw-pm-label {
    font-size: 0.68rem;
    color: #9ca3af;
    margin-bottom: 8px;
    font-weight: 500;
}
.rpsw-sw-pm-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.rpsw-sw-pm-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 11px;
    border: 1.5px solid #e5e7eb;
    border-radius: 24px;
    background: #fff;
    min-height: 30px;
}
.rpsw-sw-pm-item img {
    height: 16px;
    width: auto;
    max-width: 50px;
    object-fit: contain;
}

/* Summary line */
.rpsw-sw-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    margin-top: 8px;
    border-top: 1px solid #f3f4f6;
}
.rpsw-sw-summary-text {
    font-size: 0.76rem;
    color: #6b7280;
    font-weight: 500;
}
.rpsw-sw-summary-text strong { color: #1f2937; font-weight: 700; }
.rpsw-sw-details-link {
    font-size: 0.76rem;
    color: #6366f1;
    font-weight: 600;
}

/* BTC address section */
.rpsw-btc-section { margin: 14px 0 10px; text-align: left; }
.rpsw-btc-label {
    font-size: 0.7rem;
    color: #9ca3af;
    font-weight: 500;
    margin-bottom: 7px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.rpsw-btc-box {
    display: flex;
    align-items: center;
    gap: 9px;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: 11px 13px;
    transition: all 0.3s ease;
}
.rpsw-btc-box-copied {
    border-color: #22c55e;
    background: #f0fdf4;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}
.rpsw-btc-code {
    font-family: "Courier New", monospace;
    font-size: 0.8rem;
    color: #374151;
    font-weight: 600;
    word-break: break-all;
    flex: 1;
    line-height: 1.4;
}
.rpsw-btc-copy-btn {
    background: #f7e600;
    color: #1a1a1a;
    border: none;
    padding: 8px 18px;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(247, 230, 0, 0.4);
    white-space: nowrap;
    flex-shrink: 0;
    font-family: inherit;
}
.rpsw-btc-copy-btn:hover {
    background: #e6d500;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(247, 230, 0, 0.5);
}
.rpsw-btc-copy-btn.is-copied {
    background: #22c55e;
    color: #fff;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

/* Proceed button (locked/ready) */
.rpsw-proceed-btn {
    width: 100%;
    padding: 14px;
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 0.98rem;
    font-weight: 700;
    margin-top: 8px;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
    box-shadow: 0 4px 20px rgba(99,102,241,0.3);
    letter-spacing: 0.3px;
    font-family: inherit;
}
.rpsw-proceed-btn:not(.rpsw-proceed-locked):hover {
    background: #4f46e5;
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(99,102,241,0.4);
}
.rpsw-proceed-locked,
.rpsw-proceed-btn[disabled] {
    background: #d1d5db !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    pointer-events: auto;
}
.rpsw-proceed-locked:hover {
    transform: none;
}
.rpsw-proceed-ready {
    animation: rpsw-proceed-pulse 1.6s ease-out 1;
}
@keyframes rpsw-proceed-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(99,102,241,0.6); }
    60%  { box-shadow: 0 0 0 16px rgba(99,102,241,0); }
    100% { box-shadow: 0 4px 20px rgba(99,102,241,0.3); }
}

/* Security note */
.rpsw-security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 0.72rem;
    color: #6b7280;
    font-weight: 500;
}
.rpsw-security-note svg { color: #22c55e; flex-shrink: 0; }

@media (max-width: 480px) {
    .rpsw-btc-box { flex-direction: column; align-items: stretch; }
    .rpsw-btc-copy-btn { width: 100%; }
}

/* =====================================================================
   v3.9.7 — Self-contained brand pills (no hotlinking)
   ===================================================================== */

/* Currency icons inside You send / You get */
.rpsw-sw-cc-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-block;
    line-height: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.rpsw-sw-cc-icon svg { display: block; width: 100%; height: 100%; }

/* Brand pill content sizing */
.rpsw-sw-pm-item {
    gap: 5px;
    padding: 7px 12px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #1F2937;
    line-height: 1.2;
    white-space: nowrap;
}
.rpsw-pm-text { font-size: 0.72rem; font-weight: 700; }

/* Visa + Mastercard combo */
.rpsw-pm-visa {
    display: inline-block;
    background: #1A1F71;
    color: #F7B600;
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 2px;
    letter-spacing: 0.06em;
    line-height: 1;
}
.rpsw-pm-mc {
    display: inline-block;
    width: 17px;
    height: 11px;
    border-radius: 2px;
    background:
        radial-gradient(circle at 32% 50%, #EB001B 5px, transparent 5.5px),
        radial-gradient(circle at 68% 50%, #F79E1B 5px, transparent 5.5px);
}

/* Neteller */
.rpsw-pm-neteller {
    color: #8DBE00;
    font-weight: 900;
    font-style: italic;
    letter-spacing: 0.05em;
    font-size: 0.62rem;
}

/* PayPal text styling */
.rpsw-pm-paypal {
    font-weight: 800;
    font-size: 0.74rem;
}
.rpsw-pm-paypal::first-letter { color: #003087; }

/* Skrill */
.rpsw-pm-skrill {
    color: #862165;
    font-weight: 900;
    font-style: italic;
    font-size: 0.78rem;
}

/* Revolut */
.rpsw-pm-revolut {
    color: #0F172A;
    font-weight: 900;
    letter-spacing: -0.02em;
    font-size: 0.72rem;
}

/* Header logo size — use bundled SVG */
.rpsw-header-logo img {
    height: 30px;
    max-width: 180px;
}

/* =====================================================================
   v3.9.8 — Switchere widget CSS (user-supplied snippet, namespaced)
   All selectors scoped under .rpsw-sb so they only apply inside the modal.
   ===================================================================== */

/* HEADER LOGO */
.rpsw-sb .header-logo { margin-bottom: 24px; text-align: center; }
.rpsw-sb .header-logo img { height: 40px; width: auto; }
.rpsw-sb .header-logo .logo-fallback {
    font-size: 2.2rem;
    font-weight: 800;
    color: #374151;
    letter-spacing: -0.5px;
}

/* INSTRUCTION TEXT */
.rpsw-sb .instruction-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 16px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    text-align: center;
}
.rpsw-sb .instruction-text .highlight-amount {
    color: #6366f1;
    font-weight: 800;
    font-size: 1.1rem;
}

/* SWITCHERE WIDGET */
.rpsw-sb .switchere-widget {
    width: 100%;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.12);
    overflow: hidden;
    border: 1px solid #e8e8e8;
}
.rpsw-sb .sw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #f9fafb;
    border-bottom: 1px solid #f3f4f6;
}
.rpsw-sb .sw-menu {
    width: 20px;
    height: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}
.rpsw-sb .sw-menu span {
    display: block;
    height: 2px;
    background: #9ca3af;
    border-radius: 1px;
}
.rpsw-sb .sw-logo {
    font-size: 1.3rem;
    font-weight: 800;
    color: #374151;
    letter-spacing: 0.5px;
}
.rpsw-sb .sw-tabs {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 12px 16px;
    background: #f9fafb;
}
.rpsw-sb .sw-tab {
    padding: 8px 22px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #9ca3af;
    cursor: pointer;
    border: none;
    background: transparent;
    transition: all 0.2s;
    font-family: inherit;
}
.rpsw-sb .sw-tab.active {
    background: #6366f1;
    color: white;
    box-shadow: 0 2px 10px rgba(99,102,241,0.3);
}
.rpsw-sb .sw-body { padding: 18px; }

/* Input boxes with indicator */
.rpsw-sb .sw-input-box {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    text-align: left;
    transition: all 0.25s ease;
    position: relative;
}
.rpsw-sb .sw-input-box:focus-within {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}
.rpsw-sb .amount-indicator {
    position: absolute;
    top: -10px;
    right: 12px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 10px rgba(99,102,241,0.4);
    animation: rpsw-sb-indicator-bounce 1.8s infinite;
    z-index: 2;
    white-space: nowrap;
}
@keyframes rpsw-sb-indicator-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
.rpsw-sb .sw-input-label {
    font-size: 0.7rem;
    color: #9ca3af;
    margin-bottom: 6px;
    font-weight: 500;
}
.rpsw-sb .sw-input-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.rpsw-sb .sw-currency {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rpsw-sb .sw-currency img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}
.rpsw-sb .sw-currency-info {
    display: flex;
    flex-direction: column;
}
.rpsw-sb .sw-currency-code {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 4px;
}
.rpsw-sb .sw-currency-code .arrow {
    font-size: 0.65rem;
    color: #d1d5db;
}
.rpsw-sb .sw-currency-name {
    font-size: 0.68rem;
    color: #9ca3af;
}
.rpsw-sb .sw-amount {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1f2937;
    background: transparent;
    border: none;
    text-align: right;
    width: 120px;
    outline: none;
    font-family: inherit;
}
.rpsw-sb .sw-btc-amount {
    font-size: 1.05rem;
    font-weight: 600;
    color: #6b7280;
}

/* Payment Methods */
.rpsw-sb .sw-pm-section { margin-top: 14px; text-align: left; }
.rpsw-sb .sw-pm-label {
    font-size: 0.7rem;
    color: #9ca3af;
    margin-bottom: 10px;
    font-weight: 500;
}
.rpsw-sb .sw-pm-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.rpsw-sb .sw-pm-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1.5px solid #e5e7eb;
    border-radius: 24px;
    background: #fff;
    transition: all 0.2s;
    cursor: pointer;
}
.rpsw-sb .sw-pm-item:hover {
    border-color: #6366f1;
    background: #f5f5ff;
}
.rpsw-sb .sw-pm-item img {
    height: 18px;
    width: auto;
    max-width: 55px;
    object-fit: contain;
}

/* Summary */
.rpsw-sb .sw-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    margin-top: 10px;
    border-top: 1px solid #f3f4f6;
}
.rpsw-sb .sw-summary-text {
    font-size: 0.78rem;
    color: #6b7280;
    font-weight: 500;
}
.rpsw-sb .sw-summary-text strong {
    color: #1f2937;
    font-weight: 700;
}
.rpsw-sb .sw-details-link {
    font-size: 0.78rem;
    color: #6366f1;
    text-decoration: none;
    font-weight: 600;
}

/* BTC ADDRESS */
.rpsw-sb .btc-section { margin: 16px 0 12px; text-align: left; }
.rpsw-sb .btc-label {
    font-size: 0.72rem;
    color: #9ca3af;
    font-weight: 500;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.rpsw-sb .btc-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 14px;
    transition: all 0.3s ease;
}
.rpsw-sb .btc-box.copied {
    border-color: #22c55e;
    background: #f0fdf4;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}
.rpsw-sb .btc-code {
    font-family: 'Courier New', monospace;
    font-size: 0.82rem;
    color: #374151;
    font-weight: 600;
    word-break: break-all;
    flex: 1;
    line-height: 1.4;
}
.rpsw-sb .btc-copy-btn {
    background: #f7e600;
    color: #1a1a1a;
    border: none;
    padding: 8px 18px;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(247, 230, 0, 0.4);
    white-space: nowrap;
    flex-shrink: 0;
    font-family: inherit;
}
.rpsw-sb .btc-copy-btn:hover {
    background: #e6d500;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(247, 230, 0, 0.5);
}
.rpsw-sb .btc-copy-btn.copied {
    background: #22c55e;
    color: white;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

/* PROCEED BUTTON */
.rpsw-sb .sw-proceed-btn {
    width: 100%;
    padding: 15px;
    background: #6366f1;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    margin-top: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(99,102,241,0.3);
    text-align: center;
    letter-spacing: 0.3px;
    font-family: inherit;
}
.rpsw-sb .sw-proceed-btn:hover:not(.disabled) {
    background: #4f46e5;
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(99,102,241,0.4);
}
.rpsw-sb .sw-proceed-btn.disabled {
    background: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
    position: relative;
}
.rpsw-sb .sw-proceed-btn.disabled::after {
    content: 'Copy the BTC address first';
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    background: #ef4444;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.rpsw-sb .sw-proceed-btn.disabled:hover::after {
    opacity: 1;
}

/* SECURITY NOTE */
.rpsw-sb .security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
}
.rpsw-sb .security-note svg {
    width: 14px;
    height: 14px;
    color: #22c55e;
}

@media (max-width: 480px) {
    .rpsw-sb .btc-box { flex-direction: column; align-items: stretch; }
    .rpsw-sb .btc-copy-btn { width: 100%; text-align: center; }
}

/* =====================================================================
   v3.9.10 — Switchere proceed "bridge" overlay (spinner + reminder)
   ===================================================================== */
.rpsw-bridge {
    position: absolute;
    inset: 0;
    background: #ffffff;
    border-radius: 20px; /* matches dialog */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 24px;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    z-index: 10;
}
.rpsw-bridge.is-visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}
.rpsw-bridge-inner {
    width: 100%;
    max-width: 380px;
    text-align: center;
}

/* Spinner */
.rpsw-bridge-spinner {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    position: relative;
}
.rpsw-bridge-spinner-ring {
    width: 100%;
    height: 100%;
    border: 4px solid rgba(99,102,241,0.15);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: rpsw-spin 0.9s linear infinite;
}
@keyframes rpsw-spin {
    to { transform: rotate(360deg); }
}

.rpsw-bridge-title {
    font-family: "Inter", -apple-system, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}
.rpsw-bridge-text {
    font-size: 0.85rem;
    color: #4B5563;
    margin: 0 0 14px;
    line-height: 1.5;
    font-weight: 600;
}

.rpsw-bridge-list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rpsw-bridge-list li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 11px 13px;
    background: #F0FDF4;
    border: 1px solid rgba(34,197,94,0.3);
    border-radius: 10px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #14532d;
}
.rpsw-bridge-list li svg {
    flex-shrink: 0;
    color: #16a34a;
    margin-top: 2px;
}
.rpsw-bridge-list li strong {
    color: #6366f1;
    font-weight: 800;
}

/* Mini progress bar at the bottom */
.rpsw-bridge-progress {
    height: 4px;
    background: rgba(99,102,241,0.12);
    border-radius: 100px;
    overflow: hidden;
    margin: 0 0 10px;
}
.rpsw-bridge-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 100px;
    box-shadow: 0 0 8px rgba(99,102,241,0.4);
}
.rpsw-bridge.is-visible .rpsw-bridge-progress-fill {
    animation: rpsw-bridge-fill 2.4s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes rpsw-bridge-fill {
    to { width: 100%; }
}

.rpsw-bridge-foot {
    font-size: 0.72rem;
    color: #6B7280;
    margin: 0;
    font-style: italic;
}

@media (max-width: 480px) {
    .rpsw-bridge { padding: 24px 16px; border-radius: 16px; }
    .rpsw-bridge-title { font-size: 1rem; }
}

/* =====================================================================
   v3.9.11 — Shake + warning toast + proceed ready state
   ===================================================================== */
.rpsw-sb .rpsw-shake {
    animation: rpsw-shake-kf 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes rpsw-shake-kf {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
    40%, 60% { transform: translate3d(3px, 0, 0); }
}
.rpsw-sb .rpsw-copy-warn {
    margin-top: 8px;
    padding: 8px 12px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #b91c1c;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 8px;
    text-align: center;
    animation: rpsw-fade-in 0.3s ease;
}
@keyframes rpsw-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.rpsw-sb .sw-proceed-btn.is-ready {
    animation: rpsw-proceed-pulse 1.6s ease-out 1;
}
@keyframes rpsw-proceed-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(99,102,241,0.6); }
    60%  { box-shadow: 0 0 0 16px rgba(99,102,241,0); }
    100% { box-shadow: 0 4px 20px rgba(99,102,241,0.3); }
}

/* ============================================================
   WhatsApp Pay — full-image button (v3.9.34)
   The merchant's button image covers the whole card. Works across
   all 5 checkout styles. Responsive on desktop / tablet / phone.
   ============================================================ */
.ramperpay-method-whatsapp-img {
    display: block;
    cursor: pointer;
    margin: 10px 0;
}
.ramperpay-method-whatsapp-img input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ramperpay-wa-card {
    position: relative;
    display: block;
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: #25D366; /* WhatsApp green fallback behind the image */
    border: 2px solid transparent;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.28);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    min-height: 56px;
}
.ramperpay-wa-fullimg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 84px;
    object-fit: contain;
    /* center small images on the green background */
    margin: 0 auto;
    padding: 8px 12px;
    box-sizing: border-box;
}
/* Hover: lift + stronger shadow + subtle scale */
.ramperpay-method-whatsapp-img:hover .ramperpay-wa-card {
    transform: translateY(-2px) scale(1.012);
    box-shadow: 0 10px 26px rgba(37, 211, 102, 0.42);
}
/* Selected state: green ring */
.ramperpay-method-whatsapp-img input:checked + .ramperpay-wa-card {
    border-color: #128C7E;
    box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.25), 0 8px 22px rgba(37, 211, 102, 0.4);
}
/* RECOMMENDED ribbon on the WhatsApp card */
.ramperpay-wa-card .ramperpay-method-ribbon {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    background: #ffffff;
    color: #128C7E;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
/* Check mark on selected */
.ramperpay-wa-check {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    color: #128C7E;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.ramperpay-method-whatsapp-img input:checked + .ramperpay-wa-card .ramperpay-wa-check {
    display: flex;
}
/* Subtle idle pulse to draw attention (recommended option) */
@keyframes rp-wa-pulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(37, 211, 102, 0.28); }
    50%      { box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45); }
}
.ramperpay-method-whatsapp-img:not(:hover) .ramperpay-wa-card {
    animation: rp-wa-pulse 2.6s ease-in-out infinite;
}

/* Responsive: tablet */
@media (max-width: 820px) {
    .ramperpay-wa-fullimg { max-height: 72px; }
    .ramperpay-wa-card { min-height: 50px; }
}
/* Responsive: phone */
@media (max-width: 480px) {
    .ramperpay-wa-fullimg { max-height: 60px; padding: 6px 10px; }
    .ramperpay-wa-card { min-height: 46px; border-radius: 12px; }
    .ramperpay-wa-card .ramperpay-method-ribbon { font-size: 8px; padding: 2px 6px; }
}

/* ============================================================
   WhatsApp Pay — confirmation modal (v3.9.34)
   Shown when buyer submits with WhatsApp selected: order details
   + spinner, then auto-redirect to wa.me.
   ============================================================ */
.ramperpay-wa-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ramperpay-wa-modal.is-open { display: flex; }
.ramperpay-wa-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
}
.ramperpay-wa-dialog {
    position: relative;
    z-index: 1;
    background: #ffffff;
    border-radius: 16px;
    max-width: 420px;
    width: 100%;
    padding: 28px 26px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4);
    animation: rp-wa-modal-in 0.25s ease;
    text-align: center;
}
@keyframes rp-wa-modal-in {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ramperpay-wa-modal-logo {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ramperpay-wa-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 6px;
}
.ramperpay-wa-modal-sub {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 18px;
    line-height: 1.5;
}
.ramperpay-wa-order {
    text-align: left;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 18px;
}
.ramperpay-wa-order-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    font-size: 13px;
}
.ramperpay-wa-order-row + .ramperpay-wa-order-row {
    border-top: 1px solid #eef2f7;
}
.ramperpay-wa-order-label { color: #64748b; font-weight: 500; }
.ramperpay-wa-order-value { color: #0f172a; font-weight: 600; text-align: right; word-break: break-word; }
.ramperpay-wa-spinner-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #128C7E;
    font-size: 13px;
    font-weight: 600;
}
.ramperpay-wa-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(37, 211, 102, 0.25);
    border-top-color: #25D366;
    border-radius: 50%;
    animation: rp-wa-spin 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes rp-wa-spin { to { transform: rotate(360deg); } }
@media (max-width: 480px) {
    .ramperpay-wa-dialog { padding: 22px 18px; }
}

/* ============================================================
   Form layout hardening + full responsive pass (v3.9.34)
   Fixes field overflow and ensures the checkout works cleanly
   on desktop, tablet, and phone. Scoped to .ramperpay-checkout-form
   so it can't leak into the rest of the page.
   ============================================================ */
.ramperpay-checkout-form .ramperpay-field {
    display: block;
    margin: 0 0 14px;
    width: 100%;
    box-sizing: border-box;
}
.ramperpay-checkout-form .ramperpay-field-label {
    display: block;
    margin-bottom: 6px;
}
.ramperpay-checkout-form .ramperpay-field input[type="text"],
.ramperpay-checkout-form .ramperpay-field input[type="email"],
.ramperpay-checkout-form .ramperpay-field input[type="tel"],
.ramperpay-checkout-form .ramperpay-field input[type="url"],
.ramperpay-checkout-form .ramperpay-field input[type="number"],
.ramperpay-checkout-form .ramperpay-field select,
.ramperpay-checkout-form .ramperpay-field textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
/* Checkbox custom fields: row layout, checkbox not stretched */
.ramperpay-checkout-form .ramperpay-field-checkbox {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}
.ramperpay-checkout-form .ramperpay-field-checkbox input[type="checkbox"] {
    /* Restore native checkbox look — the base .ramperpay-field input rule
       strips it with appearance:none, which made the checkbox render as a
       big blank box. Force it back to a real, sized, accent-colored checkbox. */
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: checkbox !important;
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    min-width: 20px !important;
    flex: 0 0 20px;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    border-radius: 4px !important;
    accent-color: #25D366;
    cursor: pointer;
    background: #fff;
}
/* Methods + button always full width, never overflow */
.ramperpay-checkout-form .ramperpay-methods,
.ramperpay-checkout-form .ramperpay-method,
.ramperpay-checkout-form .ramperpay-pay-btn {
    width: 100%;
    box-sizing: border-box;
}
.ramperpay-checkout-form .ramperpay-method-card {
    box-sizing: border-box;
    max-width: 100%;
}

/* ---- Tablet ---- */
@media (max-width: 820px) {
    .ramperpay-shell,
    .rp-sf-wrap,
    .rp-hero-form-wrap {
        max-width: 100% !important;
    }
    .ramperpay-checkout-form .ramperpay-method-card {
        padding: 11px 13px;
    }
}

/* ---- Phone ---- */
@media (max-width: 480px) {
    .ramperpay-checkout-form .ramperpay-field input,
    .ramperpay-checkout-form .ramperpay-field select,
    .ramperpay-checkout-form .ramperpay-field textarea {
        font-size: 16px; /* prevents iOS zoom-on-focus */
        padding: 12px 13px;
    }
    .ramperpay-checkout-form .ramperpay-method-name { font-size: 13px; }
    .ramperpay-checkout-form .ramperpay-method-desc { font-size: 11px; }
    .ramperpay-checkout-form .ramperpay-pay-btn { padding: 14px 16px; }
}

/* ============================================================
   WhatsApp Pay — inline accordion with QR + Proceed (v3.9.35)
   Opens below the WhatsApp button when it's selected. Replaces
   the v3.9.34 popup modal approach.
   ============================================================ */
.ramperpay-method-wa-wrap { display: block; }
.ramperpay-wa-accordion {
    overflow: hidden;
    border: 2px solid #25D366;
    border-top: none;
    border-radius: 0 0 14px 14px;
    background: #f0fdf4;
    margin: -6px 0 12px;
    animation: rp-wa-accordion-in 0.25s ease;
}
@keyframes rp-wa-accordion-in {
    from { opacity: 0; max-height: 0; }
    to   { opacity: 1; max-height: 600px; }
}
.ramperpay-wa-accordion-inner {
    display: flex;
    gap: 18px;
    padding: 18px;
    align-items: center;
}
.ramperpay-wa-qr-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.ramperpay-wa-qr {
    width: 140px;
    height: 140px;
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ramperpay-wa-qr canvas,
.ramperpay-wa-qr img { display: block; max-width: 100%; height: auto; }
.ramperpay-wa-qr-label {
    font-size: 11px;
    color: #15803d;
    font-weight: 600;
    text-align: center;
    max-width: 140px;
}
.ramperpay-wa-proceed-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.ramperpay-wa-accordion-text {
    font-size: 13px;
    color: #166534;
    margin: 0;
    line-height: 1.5;
}
.ramperpay-wa-proceed-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 13px 20px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.32);
}
.ramperpay-wa-proceed-btn:hover {
    background: #1ebe5a;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.42);
}
.ramperpay-wa-proceed-btn:active { transform: translateY(0); }

/* v3.9.42 — device-specific accordion text. Desktop shows QR instructions;
   mobile/tablet (where the QR is hidden) shows button-only instructions. */
.rp-wa-text-mobile { display: none; }
.rp-wa-text-desktop { display: inline; }
@media (max-width: 1024px) {
    .ramperpay-wa-qr-col { display: none !important; }
    .ramperpay-wa-accordion-inner {
        flex-direction: column;
        text-align: center;
    }
    .ramperpay-wa-proceed-col { width: 100%; }
    .ramperpay-wa-accordion-text { text-align: center; }
    .rp-wa-text-desktop { display: none; }
    .rp-wa-text-mobile { display: inline; }
}