/* =====================================================
   ABSA BANK — Online Account Opening (Onboarding)
   Visual replica of https://onboarding.absa.co.ug/#/?productId=708
   (Absa Flexi Account)

   Mobile-first: the desktop layout (stepper + card side by side)
   is progressively enhanced from a single-column stack.
   ===================================================== */

:root {
    --absa-red: #870a3c;
    --absa-red-dark: #6b0830;
    --absa-red-bright: #dc0032;
    --absa-orange: #FA551E;
    --absa-text: #333333;
    --absa-text-dark: #2D2323;
    --absa-text-muted: #6b6b6b;
    --absa-bg: #f4f4f4;
    --absa-white: #FFFFFF;
    --absa-border: #cccccc;
    --absa-border-light: #e0e0e0;
    --absa-info-bg: #eef7fd;
    --absa-info-border: #b9ddf5;
    --absa-info-text: #31708f;
    --absa-step-done: #870a3c;
    --absa-step-todo: #b5b5b5;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Source Sans Pro', 'Source Sans 3', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--absa-text);
    background: var(--absa-bg);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--absa-red); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }

/* =====================================================
   1. APP HEADER (logo bar)
   ===================================================== */
.ob-header {
    background: var(--absa-white);
    border-bottom: 1px solid var(--absa-border-light);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: relative;
    z-index: 5;
}
.ob-header .ob-logo img { height: 38px; width: auto; }
.ob-header .ob-help-link {
    font-size: 13px;
    color: var(--absa-red);
    font-weight: 600;
    white-space: nowrap;
}

/* =====================================================
   2. HERO BANNER
   ===================================================== */
.ob-hero {
    position: relative;
    background-image: url('../images/absa/credit-cards-and-rewards.jpg');
    background-size: cover;
    background-position: center 40%;
    color: #fff;
    padding: 28px 16px;
    overflow: hidden;
}
.ob-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20,8,12,.88) 0%, rgba(40,12,20,.62) 55%, rgba(0,0,0,.25) 100%);
    pointer-events: none;
}
.ob-hero-inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; }
.ob-hero h1 {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.2px;
}
.ob-hero p {
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    opacity: .95;
    max-width: 640px;
}
@media (min-width: 768px) {
    .ob-hero { padding: 52px 40px; }
    .ob-hero h1 { font-size: 40px; }
    .ob-hero p { font-size: 16px; }
}

/* =====================================================
   3. PAGE TITLE
   ===================================================== */
.ob-page-title { padding: 22px 16px 6px; max-width: 1100px; margin: 0 auto; }
.ob-page-title h2 { margin: 0 0 2px; font-size: 22px; font-weight: 400; color: #2f3b45; }
.ob-page-title p { margin: 0; font-size: 13px; color: var(--absa-text-muted); }
@media (min-width: 768px) {
    .ob-page-title { padding: 34px 40px 10px; }
    .ob-page-title h2 { font-size: 28px; }
}

/* =====================================================
   4. MAIN LAYOUT — stepper + card
   ===================================================== */
.ob-layout {
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 16px 40px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 992px) {
    .ob-layout {
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 40px;
        padding: 10px 40px 60px;
        align-items: start;
    }
}

/* ---------- 4a. STEPPER ---------- */
.ob-stepper { order: -1; }
@media (min-width: 992px) { .ob-stepper { order: 0; } }

.ob-step { display: flex; gap: 12px; padding-bottom: 6px; position: relative; }

/* vertical connector line */
.ob-step::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 30px;
    bottom: -6px;
    width: 1px;
    background: var(--absa-step-todo);
}
.ob-step:last-child::before { display: none; }
.ob-step.is-active::before,
.ob-step.is-done::before { background: var(--absa-step-done); }

.ob-step-num {
    flex: 0 0 auto;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    border: 1px solid var(--absa-step-todo);
    color: var(--absa-step-todo);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 400;
    position: relative;
    z-index: 1;
}
.ob-step.is-active .ob-step-num {
    border-color: var(--absa-step-done);
    background: var(--absa-step-done);
    color: #fff;
}
.ob-step.is-done .ob-step-num {
    border-color: var(--absa-step-done);
    color: var(--absa-step-done);
}
.ob-step.is-done .ob-step-num::after { content: '\2713'; font-size: 14px; }

.ob-step-body { padding-top: 3px; min-width: 0; }
.ob-step-title {
    font-size: 15px;
    color: #4a4a4a;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f4f4f4;
    padding: 1px 8px;
    border-radius: 2px;
}
.ob-step.is-active .ob-step-title { color: var(--absa-red); font-weight: 600; }

.ob-step-subs { margin-top: 6px; padding-left: 4px; }
.ob-step-sub {
    position: relative;
    padding-left: 16px;
    font-size: 12px;
    color: #7d7d7d;
    line-height: 1.9;
}
.ob-step-sub::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--absa-step-todo);
}
.ob-step-sub.is-current { color: var(--absa-text); font-weight: 600; }
.ob-step-sub.is-current::before { background: var(--absa-red); }

/* Mobile: collapse the stepper into a compact horizontal bar */
@media (max-width: 991.98px) {
    .ob-stepper {
        background: #fff;
        border: 1px solid var(--absa-border-light);
        border-radius: 3px;
        padding: 12px 14px;
        display: flex;
        justify-content: space-between;
        gap: 6px;
    }
    .ob-step { flex: 1 1 0; padding: 0; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
    .ob-step::before { display: none; }
    .ob-step-body { padding-top: 0; }
    .ob-step-title { font-size: 11px; padding: 0; background: none; }
    .ob-step-subs { display: none; }
}

/* =====================================================
   5. THE CARD
   ===================================================== */
.ob-card {
    background: #fff;
    border: 1px solid var(--absa-border-light);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    overflow: hidden;
}
.ob-card-head {
    padding: 16px 18px;
    border-bottom: 1px solid var(--absa-border-light);
}
.ob-card-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--absa-text); }
.ob-card-head .ob-card-sub { margin: 3px 0 0; font-size: 13px; color: var(--absa-text-muted); }
.ob-card-body { padding: 18px; }
@media (min-width: 768px) {
    .ob-card-head { padding: 18px 28px; }
    .ob-card-body { padding: 28px; }
}

.ob-card-foot {
    border-top: 1px solid var(--absa-border-light);
    padding: 14px 18px;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
}
@media (min-width: 768px) {
    .ob-card-foot { padding: 16px 28px; flex-direction: row; justify-content: flex-end; gap: 14px; }
}

/* =====================================================
   6. INFO BANNER
   ===================================================== */
.ob-info {
    display: flex;
    gap: 12px;
    background: var(--absa-info-bg);
    border: 1px solid var(--absa-info-border);
    border-radius: 2px;
    padding: 14px 16px;
    margin-bottom: 22px;
    color: var(--absa-info-text);
}
.ob-info i {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--absa-info-text);
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.ob-info p { margin: 0; font-size: 13px; line-height: 1.55; }

/* =====================================================
   7. FORM FIELDS
   ===================================================== */
.ob-field { margin-bottom: 20px; }
.ob-field:last-child { margin-bottom: 0; }

.ob-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}
.ob-hint { font-size: 12px; color: #666; margin-top: 5px; }
.ob-req { color: var(--absa-red); }

.ob-input,
.ob-select,
.ob-textarea {
    width: 100%;
    height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--absa-border);
    border-radius: 2px;
    font-size: 14px;
    color: var(--absa-text);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.ob-textarea { height: auto; min-height: 90px; resize: vertical; }
.ob-input:focus,
.ob-select:focus,
.ob-textarea:focus {
    outline: none;
    border-color: var(--absa-red);
    box-shadow: 0 0 0 2px rgba(135,10,60,.12);
}
.ob-input.is-invalid,
.ob-select.is-invalid { border-color: #dc2626; }
.ob-input::placeholder, .ob-textarea::placeholder { color: #a8a8a8; }

.ob-select {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* error text */
.ob-error { display: none; font-size: 12px; color: #dc2626; margin-top: 5px; }
.ob-error.show { display: block; }
.ob-field.has-error .ob-input,
.ob-field.has-error .ob-select { border-color: #dc2626; }

/* radio group */
.ob-radio-row { display: flex; flex-wrap: wrap; gap: 18px; padding-top: 2px; }
.ob-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}
.ob-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.ob-radio .dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #999;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s ease;
    flex: 0 0 auto;
}
.ob-radio input:checked + .dot { border-color: var(--absa-red); border-width: 5px; }
.ob-radio input:focus-visible + .dot { box-shadow: 0 0 0 3px rgba(135,10,60,.25); }

/* checkbox (terms) */
.ob-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
}
.ob-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.ob-check .box {
    position: relative;
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    border: 1px solid #999;
    border-radius: 2px;
    background: #fff;
    transition: background .15s ease, border-color .15s ease;
}
.ob-check input:checked + .box { background: var(--absa-red); border-color: var(--absa-red); }
.ob-check input:checked + .box::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.ob-check input:focus-visible + .box { box-shadow: 0 0 0 3px rgba(135,10,60,.25); }

/* phone input with country code prefix */
.ob-phone { display: flex; }
.ob-phone .ob-cc {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 44px;
    padding: 0 10px 0 12px;
    border: 1px solid var(--absa-border);
    border-right: 0;
    border-radius: 2px 0 0 2px;
    background: #fafafa;
    font-size: 14px;
    color: #333;
}
.ob-phone .ob-cc select {
    border: 0;
    background: transparent;
    font-size: 14px;
    color: #333;
    font-weight: 600;
    padding-right: 2px;
    -webkit-appearance: none;
    appearance: none;
}
.ob-phone .ob-cc i { font-size: 9px; color: #888; }
.ob-phone .ob-input {
    border-radius: 0 2px 2px 0;
}

/* two-column field pair */
.ob-grid { display: grid; grid-template-columns: 1fr; gap: 0 18px; }
@media (min-width: 600px) {
    .ob-grid.cols-2 { grid-template-columns: 1fr 1fr; }
    .ob-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* file / document capture box */
.ob-capture {
    border: 1px dashed var(--absa-border);
    border-radius: 3px;
    background: #fafafa;
    padding: 20px;
    text-align: center;
    color: var(--absa-text-muted);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.ob-capture:hover { border-color: var(--absa-red); background: #fff; }
.ob-capture i { font-size: 26px; color: var(--absa-red); margin-bottom: 8px; }
.ob-capture .ob-capture-name { font-size: 13px; color: var(--absa-red); font-weight: 600; }

/* privacy notice */
.ob-privacy {
    font-size: 13px;
    color: #4a4a4a;
    line-height: 1.6;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--absa-border-light);
}

/* =====================================================
   8. BUTTONS
   ===================================================== */
.ob-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 26px;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
    width: 100%;
    text-align: center;
}
@media (min-width: 768px) { .ob-btn { width: auto; min-width: 130px; } }

.ob-btn-primary { background: var(--absa-red); color: #fff; border-color: var(--absa-red); }
.ob-btn-primary:hover { background: var(--absa-red-dark); border-color: var(--absa-red-dark); text-decoration: none; }
.ob-btn-secondary { background: #fff; color: var(--absa-orange); border-color: var(--absa-orange); }
.ob-btn-secondary:hover { background: #fff5f1; text-decoration: none; }
.ob-btn-ghost { background: #fff; color: #444; border-color: var(--absa-border); }
.ob-btn-ghost:hover { background: #f7f7f7; text-decoration: none; }
.ob-btn:disabled { opacity: .45; cursor: not-allowed; }
.ob-btn-primary:disabled { background: #dcdcdc; border-color: #dcdcdc; color: #6b6b6b; }

/* inline alert */
.ob-alert {
    display: none;
    padding: 12px 14px;
    border-radius: 2px;
    font-size: 13px;
    margin-bottom: 18px;
    border: 1px solid;
}
.ob-alert.show { display: block; }
.ob-alert.error { background: #fee2e2; border-color: #dc2626; color: #991b1b; }
.ob-alert.success { background: #dcfce7; border-color: #16a34a; color: #166534; }
.ob-alert.info { background: var(--absa-info-bg); border-color: var(--absa-info-border); color: var(--absa-info-text); }

/* OTP input */
.ob-otp-wrap { text-align: center; }
.ob-otp {
    width: 100%;
    max-width: 260px;
    height: 58px;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 10px;
    text-indent: 10px;
    border: 1px solid var(--absa-border);
    border-radius: 2px;
    padding: 0 8px;
}
.ob-otp:focus {
    outline: none;
    border-color: var(--absa-red);
    box-shadow: 0 0 0 2px rgba(135,10,60,.12);
}
.ob-ref {
    display: inline-block;
    background: #f4f4f4;
    padding: 3px 10px;
    border-radius: 3px;
    font-weight: 700;
    color: var(--absa-red);
    letter-spacing: 1px;
}

/* summary table (application summary) */
.ob-summary { width: 100%; border-collapse: collapse; font-size: 13px; }
.ob-summary th,
.ob-summary td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--absa-border-light); vertical-align: top; }
.ob-summary th { width: 42%; color: var(--absa-text-muted); font-weight: 600; }
.ob-summary tr:last-child th,
.ob-summary tr:last-child td { border-bottom: 0; }
@media (max-width: 575.98px) {
    .ob-summary th { width: 46%; font-size: 12px; }
    .ob-summary td { font-size: 12px; }
}

/* =====================================================
   9. "NEED MORE HELP?" SECTION
   ===================================================== */
.ob-help {
    background: #fafafa;
    border-top: 1px solid var(--absa-border-light);
    padding: 34px 16px;
    text-align: center;
}
.ob-help h2 { margin: 0 0 26px; font-size: 24px; font-weight: 700; color: #2f3b45; }
.ob-help-list {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}
@media (min-width: 768px) {
    .ob-help-list { grid-template-columns: repeat(3, 1fr); }
    .ob-help-item { border-left: 1px solid var(--absa-border-light); }
    .ob-help-item:first-child { border-left: 0; }
}
.ob-help-item i { font-size: 24px; color: var(--absa-text); margin-bottom: 8px; }
.ob-help-item .lbl { font-size: 14px; color: var(--absa-text); font-weight: 600; }
.ob-help-item .val { font-size: 14px; color: var(--absa-red); font-weight: 600; }
.ob-help-item .note { font-size: 12px; color: var(--absa-text-muted); }

/* =====================================================
   10. LEGAL FOOTER
   ===================================================== */
.ob-legal {
    background: #fff;
    border-top: 1px solid var(--absa-border-light);
    padding: 20px 16px;
    text-align: center;
    font-size: 12px;
    line-height: 1.7;
    color: var(--absa-text-muted);
    max-width: 1100px;
    margin: 0 auto;
}

/* coloured strip at the very bottom */
.ob-strip {
    height: 14px;
    background: linear-gradient(90deg,
        #870a3c 0%, #870a3c 12%,
        #dc0032 12%, #dc0032 24%,
        #FA551E 24%, #FA551E 36%,
        #f7b500 36%, #f7b500 48%,
        #870a3c 48%, #870a3c 100%);
}

/* =====================================================
   11. UTILITIES
   ===================================================== */
.ob-hidden { display: none !important; }

/* the card swaps content between views (Basic Details, Personal
   Information, ...) exactly like the production Absa stepper */
.ob-view { animation: ob-view-in .18s ease-out; }
@keyframes ob-view-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ob-view { animation: none; }
}

.ob-spinner {
    width: 15px; height: 15px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: ob-spin .7s linear infinite;
}
@keyframes ob-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .ob-spinner { animation: none; }
    * { transition: none !important; }
}