:root {
    --primary-blue: #0098FF;
    --dark-blue: #0076C8;
    --light-grey: #F0F2F5;
    --text-dark: #1F2937;
    --text-grey: #6B7280;
    --error-red: #EF4444;
    --success-green: #10B981;
    --border-color: #E5E7EB;
    --card-shadow: 0 10px 25px -5px rgba(0,0,0,0.05), 0 8px 10px -6px rgba(0,0,0,0.02);
    --modal-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    color: var(--text-dark);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.header {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 1rem;
}
.logo-container { display: flex; flex-direction: column; }
.logo-main { font-size:1.35rem; font-weight:800; color:var(--primary-blue); line-height:1; }
.logo-sub { font-size:0.9rem; font-weight:600; color:#6B7280; }
.progress-bar-container { display: flex; gap:8px; flex:1; max-width:500px; margin:0 1rem; }
.progress-step { height:6px; background:#E5E7EB; border-radius:10px; flex:1; transition:0.3s; }
.progress-step.active { background:var(--primary-blue); box-shadow:0 0 8px rgba(0,152,255,0.4); }
.header-right { display: flex; align-items:center; gap:1.25rem; }
.icon-button { background:none; border:none; cursor:pointer; color:#6B7280; transition:0.2s; }
.icon-button:hover { color:var(--primary-blue); }
.lang-select { background:#F3F4F6; border:1px solid var(--border-color); padding:6px 12px; border-radius:8px; font-weight:600; cursor:pointer; }
.profile-circle { width:38px; height:38px; background:white; border:1px solid var(--border-color); border-radius:50%; display:flex; align-items:center; justify-content:center; padding:6px; }
.profile-circle img { width:100%; height:100%; object-fit:contain; }
.main-container { flex:1; display:flex; flex-direction:column; align-items:center; padding:3rem 1rem; }
.instruction-text { text-align:center; margin-bottom:2rem; max-width:600px; }
.instruction-text h1 { font-size:1.75rem; font-weight:700; margin-bottom:0.5rem; }
.instruction-text p { color:var(--text-grey); }
.payment-card { background:white; width:100%; max-width:520px; padding:2rem; border-radius:24px; box-shadow:var(--card-shadow); }
.card-title { font-size:1.25rem; font-weight:700; margin-bottom:1.25rem; }
.notification-info { background:#FEFCE8; border-left:4px solid #EAB308; padding:14px 16px; border-radius:12px; display:flex; gap:12px; margin-bottom:1.5rem; font-size:0.85rem; color:#854D0E; }
.form-group { margin-bottom:1.5rem; }
.input-wrapper { position:relative; border:1.5px solid var(--border-color); border-radius:14px; padding:14px 16px; display:flex; align-items:center; background:white; transition:0.2s; }
.input-wrapper.focused { border-color:var(--primary-blue); box-shadow:0 0 0 3px rgba(0,152,255,0.1); }
.input-wrapper.error { border-color:var(--error-red); }
.floating-label { position:absolute; top:-11px; left:14px; background:white; padding:0 6px; font-size:0.7rem; font-weight:600; color:var(--primary-blue); }
.input-wrapper input { border:none; outline:none; width:100%; font-size:1rem; background:transparent; }
.card-icon { width:48px; margin-right:12px; }
.error-text { color:var(--error-red); font-size:0.75rem; margin-top:6px; }
.error-text.hidden { display:none; }
.form-row { display:flex; gap:1rem; }
.form-row .form-group { flex:1; }
.info-link { color:var(--primary-blue); text-decoration:none; font-size:0.85rem; font-weight:600; display:inline-block; margin-top:0.5rem; }
.footer { background:white; padding:1rem 2rem; border-top:1px solid var(--border-color); display:flex; justify-content:space-between; align-items:center; position:sticky; bottom:0; }
.amount-value { font-size:1.5rem; font-weight:800; }
.amount-label { font-size:0.7rem; color:var(--text-grey); }
.nav-buttons { display:flex; gap:1rem; }
.btn { padding:10px 28px; border-radius:40px; font-weight:700; cursor:pointer; font-size:0.9rem; border:none; transition:0.2s; }
.btn-back { background:#F3F4F6; color:#4B5563; }
.btn-back:hover { background:#E5E7EB; transform:translateX(-2px); }
.btn-next { background:#E5E7EB; color:#9CA3AF; min-width:140px; cursor:not-allowed; }
.btn-next.enabled { background:var(--success-green); color:white; cursor:pointer; box-shadow:0 4px 12px rgba(16,185,129,0.3); }
.preloader { position:fixed; top:0; left:0; width:100%; height:100%; background:white; display:flex; align-items:center; justify-content:center; z-index:9999; transition:0.4s; }
.preloader.hidden { opacity:0; visibility:hidden; }
.preloader-content { display:flex; flex-direction:column; align-items:center; gap:24px; }
.preloader-logo { width:180px; animation:fadeIn 0.5s; }
.preloader-gif { width:100px; }
.preloader-text { margin-top:16px; font-size:14px; color:var(--text-grey); animation:pulse 1.5s infinite; }
.help-bubble { position:fixed; bottom:100px; right:24px; width:52px; height:52px; background:var(--primary-blue); border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; box-shadow:0 8px 20px rgba(0,152,255,0.3); cursor:pointer; transition:0.2s; z-index:90; }
.help-bubble:hover { transform:scale(1.08); background:var(--dark-blue); }
.modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:2000; visibility:hidden; opacity:0; transition:0.3s; }
.modal-overlay.active { visibility:visible; opacity:1; }
.modal { background:white; padding:2rem; border-radius:28px; width:90%; max-width:460px; text-align:center; box-shadow:var(--modal-shadow); animation:modalSlideIn 0.3s; }
.modal-trust-header { display:flex; justify-content:space-between; margin-bottom:1.5rem; }
.modal-k-logo { height:42px; }
.pci-logo { height:32px; }
.timer-container { background:#F0F9FF; color:var(--primary-blue); padding:8px 20px; border-radius:60px; display:inline-block; font-weight:800; font-size:1.3rem; margin:1rem 0; border:1px solid #BAE6FD; font-family:monospace; }
.modal input { width:100%; padding:14px; border:1.5px solid var(--border-color); border-radius:14px; text-align:center; font-size:1.25rem; letter-spacing:4px; margin-bottom:1rem; }
.modal-btns { display:flex; gap:12px; margin-top:8px; }
.modal-btns button { flex:1; padding:12px; border-radius:40px; font-weight:600; }
.secure-footer { margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--border-color); font-size:0.7rem; color:#8B8B8B; display:flex; justify-content:center; gap:8px; }
.app-banking-divider { position:relative; text-align:center; margin:20px 0 16px; }
.app-banking-divider span { background:white; padding:0 16px; color:#9CA3AF; font-size:12px; font-weight:600; position:relative; z-index:1; }
.app-banking-divider::before { content:''; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--border-color); z-index:0; }
.app-banking-option { display:flex; align-items:center; gap:14px; background:#F8FAFC; border:1.5px solid var(--border-color); border-radius:18px; padding:12px 18px; margin-bottom:20px; transition:0.2s; cursor:pointer; }
.app-banking-option:hover { border-color:var(--primary-blue); background:#F0F9FF; transform:translateY(-1px); }
.app-banking-icon { width:50px; height:50px; object-fit:contain; border-radius:12px; }
.app-banking-text { flex:1; text-align:left; }
.app-banking-title { font-weight:800; font-size:0.95rem; display:block; }
.app-banking-subtitle { font-size:0.7rem; color:var(--text-grey); }
.app-banking-btn { background:var(--primary-blue); color:white; border:none; padding:8px 22px; border-radius:40px; font-weight:700; cursor:pointer; transition:0.2s; }
.app-banking-btn.loading { opacity:0.7; cursor:not-allowed; position:relative; }
.app-banking-btn.loading::after { content:''; position:absolute; width:14px; height:14px; border:2px solid white; border-top-color:transparent; border-radius:50%; animation:spin 0.8s linear infinite; margin-left:8px; }
@keyframes fadeIn { from{opacity:0; transform:scale(0.95);} to{opacity:1; transform:scale(1);} }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.5;} }
@keyframes spin { to{transform:rotate(360deg);} }
@keyframes modalSlideIn { from{opacity:0; transform:scale(0.95) translateY(-20px);} to{opacity:1; transform:scale(1) translateY(0);} }

/* Initially hide sections – JS will show them based on mode */
#smsSection, #appSection { display: none; }
#appDivider { display: none; }

@media (max-width:768px) {
    .header { padding:0.8rem 1rem; }
    .progress-bar-container { display:none; }
    .instruction-text h1 { font-size:1.35rem; }
    .payment-card { padding:1.5rem; }
    .btn { padding:8px 20px; font-size:0.85rem; }
    .btn-next { min-width:120px; }
    .modal { padding:1.5rem; width:95%; }
}
@media (max-width:480px) {
    .header-right { gap:0.8rem; }
    .form-row { flex-direction:column; gap:1rem; }
    .app-banking-option { flex-wrap:wrap; justify-content:center; text-align:center; }
    .app-banking-btn { width:100%; }
    .modal-btns { flex-direction:column; }
}