.fnf-wrap { max-width:700px; margin:0 auto; font-family:'Segoe UI',system-ui,sans-serif; color:#333; position:relative; }
.fnf-type-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    background: #f0f0f0;
    border-radius: 50px;
    padding: 5px;
}
.fnf-tab {
    flex: 1;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: .95rem;
    font-weight: 600;
    color: #777;
    transition: all .25s;
    position: relative;
}
.fnf-tab:hover { color: #1a2e44; }
.fnf-tab.active {
    background: #1a2e44;
    color: #fff;
    box-shadow: 0 2px 10px rgba(26,46,68,.25);
}
.fnf-tab.active::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: #1a2e44;
}
.fnf-row-two { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.fnf-input { width:100%; box-sizing:border-box; padding:13px 16px; border:1.5px solid #d5d5d5; border-radius:8px; font-size:.95rem; outline:none; transition:border-color .2s; background:#fff; color:#333; }
.fnf-input:focus { border-color:#3dbf6e; }
.fnf-input::placeholder { color:#aaa; }
input[type=number].fnf-input::-webkit-inner-spin-button, input[type=number].fnf-input::-webkit-outer-spin-button { -webkit-appearance:none; }
input[type=number].fnf-input { -moz-appearance:textfield; }
.fnf-label-center { text-align:center; color:#3dbf6e; font-weight:600; font-size:.95rem; margin:18px 0 12px; }
.fnf-currencies { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.fnf-cur-btn { flex:1; min-width:140px; padding:12px 10px; border:1.5px solid #d5d5d5; border-radius:50px; background:#fff; cursor:pointer; font-size:.88rem; font-weight:500; color:#444; transition:all .2s; }
.fnf-cur-btn:hover { border-color:#3dbf6e; color:#3dbf6e; }
.fnf-cur-btn.active { background:#1a2e44; border-color:#1a2e44; color:#fff; }
.fnf-presets { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
.fnf-preset-btn { padding:13px 8px; border:1.5px solid #d5d5d5; border-radius:50px; background:#fff; cursor:pointer; font-size:.95rem; font-weight:500; color:#444; transition:all .2s; }
.fnf-preset-btn:hover  { border-color:#3dbf6e; color:#3dbf6e; }
.fnf-preset-btn.active { background:#1a2e44; border-color:#1a2e44; color:#fff; }
.fnf-total { display:flex; align-items:center; justify-content:center; background:#f4f4f4; border:1.5px solid #d5d5d5; border-radius:8px; padding:13px 16px; font-size:.9rem; color:#555; gap:5px; flex-wrap:wrap; }
.fnf-total strong { color:#1a2e44; font-size:1rem; }
.fnf-dop-note { background:#fff8e1; border:1px solid #ffe082; border-radius:8px; padding:10px 14px; font-size:.85rem; color:#795548; margin-bottom:12px; }
#fnf-paypal-buttons { margin:18px 0 8px; min-height:48px; }
#fnf-card-fields-wrap { margin-top:12px; }
#fnf-card-number,#fnf-card-expiry,#fnf-card-cvv,#fnf-card-name { border:1.5px solid #d5d5d5; border-radius:8px; padding:6px 10px; margin-bottom:10px; min-height:46px; background:#fff; }
.fnf-pay-btn { width:100%; padding:15px; background:#3dbf6e; color:#fff; border:none; border-radius:50px; font-size:1rem; font-weight:700; letter-spacing:.5px; cursor:pointer; transition:background .2s; margin-top:6px; }
.fnf-pay-btn:hover { background:#2da85e; }
.fnf-message { margin-top:16px; padding:14px 18px; border-radius:8px; font-size:.95rem; font-weight:500; }
.fnf-message.success { background:#e6f7ee; color:#1a7f4b; border:1px solid #a3d9be; }
.fnf-message.error   { background:#fdecea; color:#c0392b; border:1px solid #f5c6c2; }
.fnf-divider { border:none; border-top:1px solid #eee; margin:24px 0 18px; }
.fnf-transfer-note { text-align:center; color:#555; font-size:.9rem; margin-bottom:14px; }
.fnf-transfer-btns { display:flex; gap:12px; flex-wrap:wrap; }
.fnf-transfer-btn { flex:1; min-width:200px; padding:14px 20px; border:none; border-radius:50px; font-size:.85rem; font-weight:700; cursor:pointer; text-transform:uppercase; transition:opacity .2s; background:#3dbf6e; color:#fff; }
.fnf-transfer-btn:hover { opacity:.85; }
.fnf-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9998; }
.fnf-overlay.open { display:block; }
.fnf-popup { display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:9999; width:92%; max-width:520px; max-height:80vh; overflow-y:auto; }
.fnf-popup.open { display:block; }
.fnf-popup-inner { background:#fff; border-radius:16px; padding:32px 28px 28px; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.2); }
.fnf-popup-inner h3 { margin:0 0 16px; color:#1a2e44; font-size:1.2rem; }
.fnf-popup-content { color:#444; font-size:.95rem; line-height:1.7; }
.fnf-popup-close { position:absolute; top:14px; right:16px; background:none; border:none; font-size:1.1rem; cursor:pointer; color:#888; padding:4px 8px; }
.fnf-popup-close:hover { color:#333; }

/* Loading */
.fnf-loading { position:absolute; inset:0; background:rgba(255,255,255,.92); z-index:100; display:flex; align-items:center; justify-content:center; border-radius:12px; }
.fnf-loading-inner { text-align:center; }
.fnf-loading-inner p { margin-top:16px; color:#555; font-size:.95rem; }
.fnf-spinner { width:52px; height:52px; border:4px solid #e0e0e0; border-top-color:#3dbf6e; border-radius:50%; animation:fnf-spin .8s linear infinite; margin:0 auto; }
@keyframes fnf-spin { to { transform:rotate(360deg); } }

/* Success screen */
.fnf-success-screen { position:absolute; inset:0; background:#fff; z-index:101; display:flex; align-items:center; justify-content:center; border-radius:12px; animation:fnf-fadein .4s ease; }
@keyframes fnf-fadein { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:scale(1); } }
.fnf-success-inner { text-align:center; padding:32px 24px; }
.fnf-check-circle { width:80px; height:80px; margin:0 auto 20px; }
.fnf-check-circle circle { stroke:#3dbf6e; stroke-width:2; stroke-dasharray:160; stroke-dashoffset:160; animation:fnf-circle .6s .2s ease forwards; }
.fnf-check-circle path { stroke:#3dbf6e; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:50; stroke-dashoffset:50; animation:fnf-check .4s .8s ease forwards; }
@keyframes fnf-circle { to { stroke-dashoffset:0; } }
@keyframes fnf-check  { to { stroke-dashoffset:0; } }
.fnf-success-inner h2 { color:#1a2e44; font-size:1.6rem; margin:0 0 10px; }
.fnf-success-inner p  { color:#555; font-size:1rem; margin:0 0 16px; line-height:1.6; }
.fnf-success-amount { display:inline-block; background:#e6f7ee; color:#1a7f4b; border:1px solid #a3d9be; border-radius:50px; padding:8px 24px; font-size:1.1rem; font-weight:700; margin-bottom:24px; }
.fnf-success-btn { padding:14px 36px; background:#1a2e44; color:#fff; border:none; border-radius:50px; font-size:1rem; font-weight:700; cursor:pointer; transition:background .2s; }
.fnf-success-btn:hover { background:#243d58; }

@media (max-width:560px) {
    .fnf-row-two { grid-template-columns:1fr; }
    .fnf-presets { grid-template-columns:repeat(2,1fr); }
    .fnf-currencies { flex-direction:column; }
    .fnf-transfer-btns { flex-direction:column; }
}