/* =====================================================
   ABSA BANK ZAMBIA — Online Customer Registration
   Cloned from https://online.absa.co.zm/air/feature/onlineRegistration
   ===================================================== */

:root {
    --absa-red: #870a3c;
    --absa-red-dark: #6b0830;
    --absa-red-bright: #dc0032;
    --absa-red-light: #f5e3e8;
    --absa-orange: #FA551E;
    --absa-orange-hover: #e84a16;
    --absa-text: #500a28;
    --absa-text-dark: #2D2323;
    --absa-text-muted: #5A4B4B;
    --absa-bg: #F7F7F7;
    --absa-border: #ccc;
    --absa-border-light: #e0e0e0;
    --absa-white: #FFFFFF;
    --absa-grey: #999;
    --absa-grey-step: #b5b5b5;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    font-family: 'Source Sans Pro', 'Source Sans 3', Arial, sans-serif;
    font-size: 14px;
    color: var(--absa-text);
    background: var(--absa-bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

a { color: var(--absa-red); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: 14px; }

/* =====================================================
   1. PAGE LAYOUT
   ===================================================== */
.absa-reg-page {
    background: var(--absa-bg);
    min-height: 100vh;
}

.absa-reg-wrapper {
    background: var(--absa-bg);
    max-width: 100%;
    margin: 0;
}

/* =====================================================
   2. TOP UTILITY BAR
   ===================================================== */
.absa-reg-topbar {
    background: var(--absa-bg);
    padding: 8px 40px;
    text-align: right;
    font-size: 13px;
}

.absa-reg-topbar a {
    color: var(--absa-text);
    margin-left: 24px;
    text-decoration: none;
}

.absa-reg-topbar a:first-child { margin-left: 0; }

.absa-reg-topbar a:hover {
    color: var(--absa-red);
}

/* =====================================================
   3. HEADER
   ===================================================== */
.absa-reg-header {
    background: #fff;
    padding: 16px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--absa-border-light);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.absa-reg-header img.logo {
    width: 60px;
    height: 60px;
}

.absa-reg-header .absa-btn-login {
    background: var(--absa-orange);
    color: #fff;
    padding: 8px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 2px;
    text-decoration: none;
    transition: background 0.15s;
    display: inline-block;
}

.absa-reg-header .absa-btn-login:hover {
    background: var(--absa-orange-hover);
    text-decoration: none;
}

/* =====================================================
   4. PAGE TITLE
   ===================================================== */
.absa-reg-title {
    padding: 30px 40px 0;
    max-width: 1100px;
    margin: 0 auto;
}

.absa-reg-title h1 {
    font-size: 26px;
    font-weight: 400;
    color: var(--absa-red);
    margin-bottom: 20px;
}

/* =====================================================
   5. PROGRESS BAR (3 steps)
   ===================================================== */
.absa-progress {
    display: flex;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px 16px;
    position: relative;
    border-bottom: 4px solid #d9d9d9;
}

.absa-progress::before {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 40px;
    width: 33.33%;
    height: 4px;
    background: var(--absa-red);
    z-index: 1;
}

.absa-progress-step {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    position: relative;
    z-index: 2;
}

.absa-progress-step .step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    background: var(--absa-grey-step);
    color: #fff;
    flex-shrink: 0;
}

.absa-progress-step.active .step-num {
    background: var(--absa-red);
}

.absa-progress-step .step-label {
    font-size: 14px;
    color: var(--absa-text);
    font-weight: 400;
}

.absa-progress-step.active .step-label {
    color: var(--absa-text);
    font-weight: 600;
}

/* =====================================================
   6. MAIN FORM AREA
   ===================================================== */
.absa-reg-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 40px 40px;
}

.absa-reg-form {
    background: transparent;
    padding: 0;
    max-width: 600px;
}

.absa-form-group {
    margin-bottom: 18px;
}

.absa-form-group label {
    display: block;
    font-size: 14px;
    color: var(--absa-text);
    margin-bottom: 6px;
    font-weight: 400;
}

.absa-form-group label .req {
    color: var(--absa-red);
    font-weight: 700;
    margin-left: 2px;
}

.absa-form-group input[type="text"],
.absa-form-group input[type="password"],
.absa-form-group input[type="email"],
.absa-form-group select {
    width: 280px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid #999;
    border-radius: 2px;
    background: #fff;
    color: var(--absa-text-dark);
    font-size: 14px;
    transition: border-color 0.15s;
}

.absa-form-group input[type="text"]:focus,
.absa-form-group input[type="password"]:focus,
.absa-form-group select:focus {
    outline: none;
    border-color: var(--absa-red);
    box-shadow: 0 0 0 2px rgba(135, 10, 60, 0.1);
}

/* Selects: tighter */
.absa-form-group select {
    width: 200px;
    cursor: pointer;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%235a4b4b' d='M6 8L0 0h12z'/></svg>") no-repeat right 8px center;
    background-size: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 28px;
}

/* Date row (day/month/year) */
.absa-dob-row {
    display: flex;
    gap: 6px;
}

.absa-dob-row select {
    width: 60px;
}

.absa-dob-row select:nth-child(1) { width: 60px; }
.absa-dob-row select:nth-child(2) { width: 60px; }
.absa-dob-row select:nth-child(3) { width: 90px; }

/* Branch row (input + lookup button) */
.absa-branch-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.absa-branch-row input {
    flex: 1;
    max-width: 280px;
}

.absa-branch-lookup {
    background: #fff;
    color: var(--absa-orange);
    border: 1px solid var(--absa-orange);
    padding: 6px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.15s;
    height: 32px;
    margin-top: 0;
}

.absa-branch-lookup:hover {
    background: var(--absa-orange);
    color: #fff;
}

/* Card digit boxes (7, 9, 11, 16) */
.absa-card-digits {
    margin-top: 14px;
    background: #ededed;
    padding: 18px 30px 22px;
    border-radius: 2px;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    max-width: 580px;
}

.absa-card-digit {
    flex: 1;
    text-align: center;
}

.absa-card-digit .digit-label {
    display: block;
    font-size: 14px;
    color: var(--absa-text);
    margin-bottom: 8px;
    font-weight: 400;
}

.absa-card-digit input {
    width: 50px;
    height: 36px;
    padding: 0;
    text-align: center;
    border: 1px solid #999;
    border-radius: 2px;
    background: #fff;
    font-size: 14px;
    color: var(--absa-text-dark);
    font-weight: 600;
    -moz-appearance: textfield;
}

.absa-card-digit input::-webkit-outer-spin-button,
.absa-card-digit input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.absa-card-digit input:focus {
    outline: none;
    border-color: var(--absa-red);
}

/* DEBIT CARD EXPIRY row */
.absa-expiry-row {
    display: flex;
    gap: 6px;
}

.absa-expiry-row select {
    width: 60px;
}

.absa-expiry-row select:nth-child(2) { width: 70px; }

/* CVV row with Help link */
.absa-cvv-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.absa-cvv-row input {
    width: 100px;
    height: 30px;
}

.absa-cvv-help {
    color: var(--absa-red);
    font-size: 13px;
    font-weight: 600;
    margin-top: 6px;
    cursor: pointer;
    text-decoration: none;
}

.absa-cvv-help:hover {
    text-decoration: underline;
}

/* =====================================================
   7. TERMS CHECKBOX
   ===================================================== */
.absa-terms {
    display: flex;
    gap: 12px;
    margin: 30px 0 24px;
    max-width: 700px;
    align-items: flex-start;
}

.absa-terms input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--absa-red);
    cursor: pointer;
}

.absa-terms label {
    font-size: 14px;
    color: var(--absa-text);
    line-height: 1.5;
    cursor: pointer;
}

.absa-terms a {
    color: var(--absa-red);
    font-weight: 600;
    text-decoration: none;
}

.absa-terms a:hover {
    text-decoration: underline;
}

/* =====================================================
   8. ACTION BUTTONS
   ===================================================== */
.absa-reg-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin: 30px 0 16px;
}

.absa-reg-actions .absa-btn {
    padding: 10px 40px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    display: inline-block;
    min-width: 120px;
    text-align: center;
}

.absa-reg-actions .absa-btn-cancel {
    background: #fff;
    color: var(--absa-orange);
    border: 1px solid var(--absa-orange);
}

.absa-reg-actions .absa-btn-cancel:hover {
    background: var(--absa-orange);
    color: #fff;
    text-decoration: none;
}

.absa-reg-actions .absa-btn-next {
    background: var(--absa-orange);
    color: #fff;
    border: 1px solid var(--absa-orange);
}

.absa-reg-actions .absa-btn-next:hover {
    background: var(--absa-orange-hover);
    border-color: var(--absa-orange-hover);
}

/* =====================================================
   9. MANDATORY NOTE
   ===================================================== */
.absa-mandatory {
    color: var(--absa-red);
    font-size: 13px;
    margin: 16px 0;
}

.absa-mandatory::before {
    content: '* ';
    font-weight: 700;
}

/* =====================================================
   10. NOTES SECTION
   ===================================================== */
.absa-reg-notes {
    border-top: 1px solid #d9d9d9;
    padding-top: 20px;
    margin-top: 16px;
    max-width: 1100px;
    margin: 16px auto 0;
    padding: 20px 40px 0;
}

.absa-reg-notes h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--absa-text);
    margin-bottom: 14px;
}

.absa-reg-notes p {
    font-size: 13px;
    color: var(--absa-text);
    line-height: 1.7;
    margin-bottom: 4px;
}

/* =====================================================
   11. ERROR MESSAGES
   ===================================================== */
.absa-form-error {
    color: var(--absa-red);
    font-size: 13px;
    margin-top: 4px;
    display: none;
}

.absa-form-error.show { display: block; }

.absa-form-success {
    color: #2e7d32;
    font-size: 14px;
    margin: 16px 0;
    padding: 12px 16px;
    background: #e8f5e9;
    border: 1px solid #2e7d32;
    border-radius: 2px;
    display: none;
}

.absa-form-success.show { display: block; }

/* =====================================================
   12. FOOTER
   ===================================================== */
.absa-reg-footer {
    background: #fff;
    padding: 20px 40px;
    text-align: center;
    border-top: 1px solid var(--absa-border-light);
    margin-top: 30px;
}

.absa-reg-footer a {
    color: var(--absa-red);
    font-size: 13px;
    text-decoration: none;
    margin: 0 4px;
}

.absa-reg-footer a:hover {
    text-decoration: underline;
}

.absa-reg-footer span.sep {
    color: #ccc;
    margin: 0 8px;
}

/* =====================================================
   13. RESPONSIVE
   ===================================================== */
@media (max-width: 1024px) {
    .absa-reg-topbar, .absa-reg-header,
    .absa-reg-title, .absa-reg-main,
    .absa-progress, .absa-reg-notes,
    .absa-reg-footer { padding-left: 20px; padding-right: 20px; }
    .absa-progress::before { left: 20px; }
}

@media (max-width: 768px) {
    .absa-reg-header { padding: 12px 20px; }
    .absa-reg-header img.logo { width: 48px; height: 48px; }
    .absa-reg-title h1 { font-size: 20px; }

    .absa-progress { flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 20px; }
    .absa-progress::before { display: none; }
    .absa-progress-step { width: 100%; padding: 6px 0; }

    .absa-form-group input,
    .absa-form-group select { width: 100%; max-width: 100%; }
    .absa-branch-row { flex-direction: column; gap: 10px; }
    .absa-branch-row input { max-width: 100%; }
    .absa-card-digits { flex-wrap: wrap; gap: 12px; padding: 16px; }
    .absa-card-digit { flex: 0 0 calc(50% - 6px); }
    .absa-card-digit input { width: 100%; max-width: 80px; }
    .absa-cvv-row { flex-direction: column; gap: 6px; }

    .absa-reg-actions { flex-direction: column; gap: 12px; }
    .absa-reg-actions .absa-btn { width: 100%; }

    .absa-reg-topbar { text-align: center; }
    .absa-reg-topbar a { margin: 0 10px; }

    .absa-terms { flex-direction: column; gap: 8px; }
}

@media (max-width: 480px) {
    .absa-card-digits { flex-direction: column; align-items: stretch; }
    .absa-card-digit { text-align: left; display: flex; align-items: center; gap: 12px; }
    .absa-card-digit .digit-label { margin-bottom: 0; min-width: 50px; }
    .absa-card-digit input { width: 50px; }
}