/* ── Accounts Open Account Form Section ─────────────────────────────────── */

.accounts-form-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    gap: 32px;
    /* Decorative line art pinned to the bottom-right corner, layered over the
       existing gradient. Two background layers instead of an extra element, so
       nothing is added to the DOM or the flex flow. The artwork is 579x163 and
       is left at its natural size to keep the linework crisp.
       background-color is the fallback if the gradient fails to paint. */
    background-color: #003B70;
    background-image: url("/assets/NewFolder/FormBg.svg");
    background-repeat: no-repeat, no-repeat;
    background-position: right bottom, center center;
    background-size: auto, cover;
    scroll-margin-top: 80px;
}

/* The apply form is always visible on Accounts, Loans and Cards — the product
   buttons scroll to it rather than reveal it. scroll-margin-top above keeps the
   heading clear of the sticky header when they do. */

.accounts-form-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
   /* gap: 24px;*/
    width: 100%;
    max-width: 972px;
}

.accounts-form__title {
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 100%;
    text-align: center;
    color: #ffffff;
    margin: 0;
}

/* ── Alerts ──────────────────────────────────────────────────────────────── */

.accounts-form__alert {
    width: 100%;
    padding: 14px 20px;
    border-radius: 8px;
    font-family: 'Co Headline', sans-serif;
    font-size: 14px;
    text-align: center;
}

.accounts-form__alert--success {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #ffffff;
}

.accounts-form__alert--error {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.5);
    color: #fff;
}

/* ── Form layout ─────────────────────────────────────────────────────────── */

.accounts-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    margin-top: 20px;
}

.accounts-form__row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
}

.accounts-form__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

/* ── Inputs & selects ────────────────────────────────────────────────────── */

.accounts-form__input,
.accounts-form__select {
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    padding: 10px;
    background: #ffffff;
    border: 1px solid #cdcdcd;
    border-radius: 8px;
    font-family: 'Co Headline', sans-serif;
    font-size: 12px;
    color: #333333;
    outline: none;
    transition: border-color 0.2s;
    appearance: none;
    -webkit-appearance: none;
}

.accounts-form__input::placeholder,
.accounts-form__select.placeholder-shown {
    color: #9d9d9d;
}

.accounts-form__select:invalid,
.accounts-form__select:has(option[value=""]:checked),
.accounts-form__select option[value=""] {
    color: #9d9d9d;
}

.accounts-form__select option {
    color: #333333;
}

.accounts-form__input:focus,
.accounts-form__select:focus {
    border-color: #00C4B3;
}

/* Select arrow */
.accounts-form__select-wrap {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.accounts-form__select-wrap::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 25px; /* center of the 50px-tall select, unaffected by error message below */
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #9d9d9d;
    pointer-events: none;
}

[dir='rtl'] .accounts-form__select-wrap::after {
    right: auto;
    left: 16px;
}

/* Textarea */
.accounts-form__textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 87px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #cdcdcd;
    border-radius: 8px;
    font-family: 'Co Headline', sans-serif;
    font-size: 12px;
    color: #333333;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
}

.accounts-form__textarea::placeholder {
    color: #9d9d9d;
}

.accounts-form__textarea:focus {
    border-color: #00C4B3;
}

/* Notes hint */
.accounts-form__note {
    font-family: 'Co Headline', sans-serif;
    font-size: 13px;
    color: #ffffff;
    text-align: start;
}

/* ── Inline field errors ─────────────────────────────────────────────────── */

.accounts-form__error {
    font-family: 'Co Headline', sans-serif;
    font-size: 11px;
    color: red;
    margin: 0;
}

/* ── Radio groups ────────────────────────────────────────────────────────── */

.accounts-form__radio-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    width: 100%;
}

.accounts-form__radio-label {
   
    text-align: start;
    width:fit-content ;
    font-family: 'Co Headline', sans-serif;
    font-size: 12px;
    color: #ffffff;
    white-space: nowrap;
}

.accounts-form__radio-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.accounts-form__radio-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .accounts-form__radio-option span {
        white-space: pre;
        font-family: 'Co Headline', sans-serif;
        font-size: 12px;
        color: #ffffff;
    }

.accounts-form__radio-option input[type='radio'] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    min-width: 14px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

/* Selected: teal fill + white inset ring → leaves a teal centre dot */
.accounts-form__radio-option input[type='radio']:checked {
    background: #00C4B3;
    border-color: #00C4B3;
   /* box-shadow: inset 0 0 0 3px #ffffff;*/
}

/* ── Submit area ─────────────────────────────────────────────────────────── */

.accounts-form__submit-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.accounts-form__submit-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 25px;
    background: #00C4B3;
    border: none;
    border-radius: 100px;
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    text-decoration: none;
}

.accounts-form__submit-btn:hover {
    background: #00b0a0;
    transform: translateY(-1px);
    color: #ffffff;
}

.accounts-form__submit-btn svg {
    flex-shrink: 0;
}

.accounts-form__hint {
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    text-align: center;
    color: #ffffff;
    margin: 0;
}

/* ── reCAPTCHA ───────────────────────────────────────────────────────────── */

.accounts-form__recaptcha-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.accounts-form__recaptcha-error {
    font-family: 'Co Headline', sans-serif;
    font-size: 12px;
    color: #ffcccc;
}

/* ── RTL ─────────────────────────────────────────────────────────────────── */

/* Inputs: placeholder and text align to the right in RTL */
[dir='rtl'] .accounts-form__input,
[dir='rtl'] .accounts-form__textarea {
    text-align: right;
}

/* Selects: arrow moves to left, text and padding mirror accordingly */
[dir='rtl'] .accounts-form__select {
    text-align: right;
    direction: rtl;
    padding-right: 10px;
    padding-left: 40px; /* space for the left-side arrow */
}

/* LTR selects need right-padding for the right-side arrow */
.accounts-form__select {
    padding-right: 40px;
    padding-left: 16px;
}

/* Radio: direction:rtl inherited from dir="rtl" on the section already makes
   flex-direction:row lay items right-to-left. Adding row-reverse would
   double-reverse back to LTR, so no flex-direction overrides are needed here. */

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .accounts-form__radio-label{
        width:100%;
    }
    /* Section: 40px top/bottom, 16px sides → inner width = 375-32 = 343px */
    .accounts-form-section {
        padding: 40px 16px;
        gap: 15px;
        /* At 579px wide the corner art is wider than a phone, so `contain` scales
           it down to fit rather than cropping most of it off-screen. */
        background-size: contain, cover;
    }

    .accounts-form__title {
        font-size: 28px;
        line-height: 32px;
    }

    /* Fields stack single-column, each taking full width */
    .accounts-form__row {
        flex-direction: column;
        gap: 15px;
    }

    .accounts-form__field,
    .accounts-form__select-wrap {
        width: 100%;
        flex: unset;
    }

    /* Radio rows: label on top, options below */
    .accounts-form__radio-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    [dir='rtl'] .accounts-form__radio-row {
        align-items: flex-end;
    }

    /* Radio options: 2-per-row grid (Employment 2×2, Existing Customer 1×2) */
    .accounts-form__radio-group {
        width: 100%;
        flex-wrap: wrap;
        gap: 16px;
    }

    .accounts-form__radio-option {
        width: calc(50% - 8px);
    }

    /* Notes textarea taller on mobile */
    .accounts-form__textarea {
        min-height: 144px;
    }

    /* Submit button compact on mobile */
    .accounts-form__submit-btn {
        padding: 16px 24px;
        font-size: 18px;
        line-height: 18px;
    }
}