:root { --primary: #1a3c6d; }
body { background: #f8fafc; font-family: 'Segoe UI', system-ui, Roboto, sans-serif; }
.max-container { max-width: 480px; margin: 0 auto 80px auto; padding: 15px; }
.card { border-radius: 20px; box-shadow: 0 10px 30px -10px rgba(26, 60, 109, 0.15); border: none; overflow: hidden; }
.btn-primary { background-color: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background-color: #132d52; }
#v_name { font-size: 1.25rem; font-weight: 600; color: var(--primary); }
.editProfileBtn { background-color: #6c757d; color: #ffffff; }
.viewProfileBtn { background-color: #6c757d; color: #ffffff; }
.logoutBtn { background-color: #dc3545; color: #ffffff; }
.deleteProfileBtn { background-color: #dc3545; color: #ffffff; }
.refreshBtn { background-color: #0d6efd; color: #ffffff; }
.paymentBtn { background-color: #fff8e6; color: #b45309; border: 1.5px solid #fcd34d; }
.paymentBtn:hover { background-color: #fef3c7; color: #92400e; }
.fs-7 { font-size: 0.8rem; }
.form-control, .form-select { border-radius: 12px; padding: 12px 16px; font-size: 1rem; }
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 0.25rem rgba(26, 60, 109, 0.15); }
.upload-zone { border: 2.5px dashed #cbd5e1; border-radius: 16px; padding: 24px 16px; text-align: center; background: #f8fafc; transition: all 0.3s ease; }
.upload-zone:hover { border-color: var(--primary); background: #f0f7ff; }
.profile-img-new { width: 180px; height: 200px; object-fit: cover; object-position: top; border-radius: 20px; border: 6px solid white; box-shadow: 0 8px 25px rgba(0,0,0,0.12); }
.profile-img-prev { width: 180px; height: 200px; object-fit: cover; object-position: top; }
.signature-prev { width: 100%; height: 90px; object-fit: cover; object-position: middle; }
.section-title { font-size: 1.05rem; font-weight: 700; color: var(--primary); margin: 28px 0 14px; text-transform: uppercase; letter-spacing: 0.6px; }
.spinner { width: 48px; height: 48px; border: 5px solid #e2e8f0; border-bottom-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.meta-text { font-size: 0.95rem; color: #64748b; }

/* HEADER & APP BAR */
header {
    background: #fff; padding: 10px 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; gap: 12px;
}
.header-icon { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; border: 1px solid #eee; }
.logo { font-size: 16px; font-weight: 700; color: var(--primary); letter-spacing: 0.5px; }
header a { margin-left: auto; color: var(--primary); text-decoration: none; background-color: #689de7; padding: 4px 8px; border-radius: 4px; color: white; }

/* DOB Triple Input Styling */
.dob-group { display: flex; gap: 8px; }
.dob-group input { text-align: center; padding: 12px 5px !important; }
.dob-day, .dob-month { flex: 1; }
.dob-year { flex: 2; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fixedAtBottom { position: fixed; bottom: 0; left: 0; width: 100%; background: #f8fafc; padding: 10px 15px; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); }
.fixedAtBottom .mt-4, .fixedAtBottom .row>* { margin-top: 0 !important; }
#cancelReloadBtn { display: none; }