/* ==========================================================================
   Page: Account/Register
   --------------------------------------------------------------------------
   Wide sectioned card for the long registration form. Field markup comes from
   the Ng* helpers (.form-row > .col-md-6.MB25 > validatable > label + control),
   ui-select (select2 theme), intl-tel-input and the shared _Captcha partial —
   all restyled here without touching their behaviour. Scoped to
   .ms-page-register. Depends on: mosadaqa-tokens.css, mosadaqa-forms.css.
   ========================================================================== */

/* Canvas: legacy container becomes a neutral wrapper, the card is the sectioned variant */
.ms-page-register .musadqa-container {
    background-image: none !important;
    background-color: transparent;
    box-shadow: none;
    padding: 0 !important;
    min-height: 0;
    max-width: 1040px !important;
}

.ms-page-register .ms-form-card--sectioned {
    max-width: none;
    width: 100%;
}

/* Legacy spacers */
.ms-page-register .ms-form-card__body > br,
.ms-page-register .ms-form-card__body .form-row + br,
.ms-page-register .ms-form-card__body .clearfix + br,
.ms-page-register .well-lg br {
    display: none;
}

/* .well-lg is the body element itself; keep the card body padding */
.ms-page-register .ms-form-card--sectioned .ms-form-card__body {
    padding: var(--mosadaqa-space-6) var(--mosadaqa-space-6) var(--mosadaqa-space-4);
}

/* Group dividers */
.ms-page-register .ms-form-divider {
    width: 100%;
    margin: var(--mosadaqa-space-2) 0 var(--mosadaqa-space-5);
    border: 0;
    border-top: 1px dashed var(--mosadaqa-line);
    opacity: 1;
}

/* ---- Grid: .form-row (compat) with 24px gutters --------------------------- */
.ms-page-register .form-row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: calc(-1 * var(--mosadaqa-space-3));
}

.ms-page-register .form-row > [class*="col-"] {
    padding-inline: var(--mosadaqa-space-3);
}

.ms-page-register .form-row > .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.ms-page-register .MB25,
.ms-page-register .form-row > .col-md-6 {
    margin-bottom: var(--mosadaqa-space-5);
}

/* ---- Labels & controls ------------------------------------------------------ */
.ms-page-register label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--mosadaqa-text-md);
    font-weight: 700;
    color: var(--mosadaqa-dark);
}

.ms-page-register .ms-form-card--sectioned .form-control,
.ms-page-register .ms-form-card--sectioned .input-group .form-control {
    height: 52px !important;
    font-size: var(--mosadaqa-text-md);
}

/* ui-select (select2 theme) rendered as a boxed control */
.ms-page-register .ui-select-container.select2-container {
    display: block;
    width: 100% !important;
    min-width: 0 !important; /* helper emits an inline min-width:560px */
}

.ms-page-register .select2-container .select2-choice {
    height: 52px !important; /* ui-select2/custom.css forces 32px !important */
    line-height: 50px !important;
    display: flex;
    align-items: center;
    padding: 0 var(--mosadaqa-space-4);
    font-size: var(--mosadaqa-text-md);
    color: var(--mosadaqa-ink);
    background: var(--mosadaqa-white);
    border: 1px solid var(--mosadaqa-line-neutral);
    border-radius: 12px;
    box-shadow: none;
    background-image: none;
}

.ms-page-register .select2-container .select2-choice:hover {
    border-color: var(--mosadaqa-blue-strong);
}

.ms-page-register .select2-container-active .select2-choice,
.ms-page-register .select2-dropdown-open .select2-choice {
    border-color: var(--mosadaqa-blue);
    box-shadow: 0 0 0 3px rgba(75, 155, 174, 0.2);
}

.ms-page-register .select2-container .select2-choice .select2-arrow {
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    width: 40px;
    height: 100%;
    background: transparent;
    border: 0;
}

.ms-page-register .select2-container .select2-choice .select2-arrow b {
    display: none; /* select2 sprite arrow */
}

.ms-page-register .select2-container .select2-choice .select2-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--mosadaqa-muted);
    border-bottom: 2px solid var(--mosadaqa-muted);
    transform: translate(-50%, -70%) rotate(45deg);
}

.ms-page-register .select2-drop {
    border: 1px solid var(--mosadaqa-line);
    border-radius: 12px;
    box-shadow: var(--mosadaqa-shadow-md);
    overflow: hidden;
}

.ms-page-register .select2-results .select2-highlighted {
    background: var(--mosadaqa-soft);
    color: var(--mosadaqa-blue-dark);
}

/* Gender: radio options as choice chips */
.ms-page-register .ms-choice-group {
    display: flex;
    gap: var(--mosadaqa-space-3);
    margin: 0;
}

.ms-page-register .ms-choice-group > span {
    flex: 0 0 auto;
    max-width: none;
    padding: 0;
}

.ms-page-register .ms-choice-group input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ms-page-register .ms-choice-group label {
    display: inline-flex;
    align-items: center;
    gap: var(--mosadaqa-space-2);
    min-width: 120px;
    height: 52px;
    margin: 0;
    padding: 0 var(--mosadaqa-space-4);
    font-size: var(--mosadaqa-text-md);
    font-weight: 600;
    color: var(--mosadaqa-ink);
    background: var(--mosadaqa-white);
    border: 1px solid var(--mosadaqa-line-neutral);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color var(--mosadaqa-ease), background-color var(--mosadaqa-ease);
}

.ms-page-register .ms-choice-group label::before {
    content: "";
    width: 18px;
    height: 18px;
    border: 2px solid var(--mosadaqa-line-neutral);
    border-radius: 50%;
    background: var(--mosadaqa-white);
    transition: border-color var(--mosadaqa-ease), box-shadow var(--mosadaqa-ease);
}

.ms-page-register .ms-choice-group label:hover {
    border-color: var(--mosadaqa-blue-strong);
}

.ms-page-register .ms-choice-group input[type="radio"]:checked + label {
    border-color: var(--mosadaqa-blue-dark);
    background: var(--mosadaqa-soft);
    color: var(--mosadaqa-blue-dark);
}

.ms-page-register .ms-choice-group input[type="radio"]:checked + label::before {
    border-color: var(--mosadaqa-blue-dark);
    box-shadow: inset 0 0 0 4px var(--mosadaqa-white);
    background: var(--mosadaqa-blue-dark);
}

.ms-page-register .ms-choice-group input[type="radio"]:focus-visible + label {
    box-shadow: var(--mosadaqa-focus-ring);
}

/* Phone (intl-tel-input) */
.ms-page-register .iti {
    width: 100%;
}

.ms-page-register .iti__selected-flag {
    background: var(--mosadaqa-soft);
    border-inline-end: 1px solid var(--mosadaqa-line);
    border-radius: 12px 0 0 12px;
}

[dir="rtl"] .ms-page-register .iti__selected-flag {
    border-radius: 0 12px 12px 0;
}

/* Input groups: e-mail + send code / code + verify */
.ms-page-register .input-group {
    display: flex;
    align-items: stretch;
    gap: var(--mosadaqa-space-2);
}

.ms-page-register .input-group > .form-control {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    border-radius: 12px;
}

.ms-page-register .input-group-btn {
    display: flex;
    flex: 0 0 auto;
}

.ms-page-register .input-group-btn .btn {
    height: 52px;
    padding: 0 var(--mosadaqa-space-4);
    font-size: var(--mosadaqa-text-sm);
    font-weight: 700;
    white-space: nowrap;
    border-radius: 12px;
}

.ms-page-register .input-group-btn .btn:disabled {
    opacity: .55;
}

/* Timer / resend row */
.ms-page-register .PV10.text-end {
    padding: var(--mosadaqa-space-2) 0 0;
    font-size: var(--mosadaqa-text-sm);
    color: var(--mosadaqa-muted);
}

.ms-page-register .PV10.text-end a {
    font-weight: 600;
}

/* ---- Password block: fields stacked beside the rules checklist ------------ */
.ms-page-register .ms-register__passwords > .row {
    margin: 0;
}

.ms-page-register .ms-register__passwords > .row > .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
}

.ms-page-register .ms-register__rules .alert-info {
    position: relative;
    height: 100%;
    margin: 0;
    padding: var(--mosadaqa-space-4) var(--mosadaqa-space-5) var(--mosadaqa-space-4) var(--mosadaqa-space-5);
    font-size: var(--mosadaqa-text-sm);
    line-height: 1.6;
    color: var(--mosadaqa-ink);
    background: var(--mosadaqa-white);
    border: 1px solid var(--mosadaqa-line);
    border-radius: 14px;
    box-shadow: var(--mosadaqa-shadow-sm);
}

.ms-page-register .ms-register__rules-icon {
    float: inline-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-inline-end: var(--mosadaqa-space-3);
    font-size: 15px;
    color: var(--mosadaqa-blue-dark);
    background: var(--mosadaqa-soft);
    border-radius: 10px;
}

/* template: <b>Title</b><ul><li>…</li></ul> */
.ms-page-register .ms-register__rules .alert-info > b {
    display: block;
    padding-top: 7px;
    font-size: var(--mosadaqa-text-md);
    font-weight: 700;
    color: var(--mosadaqa-dark);
}

.ms-page-register .ms-register__rules .alert-info ul {
    clear: both;
    margin: var(--mosadaqa-space-3) 0 0;
    padding: 0;
    list-style: none;
}

.ms-page-register .ms-register__rules .alert-info li {
    position: relative;
    padding: 6px 0 6px 28px;
    color: #4a5560;
}

[dir="rtl"] .ms-page-register .ms-register__rules .alert-info li {
    padding: 6px 28px 6px 0;
}

.ms-page-register .ms-register__rules .alert-info li + li {
    border-top: 1px solid var(--mosadaqa-bg);
}

.ms-page-register .ms-register__rules .alert-info li::before {
    content: "\f058"; /* fa-check-circle */
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    position: absolute;
    inset-inline-start: 0;
    top: 6px;
    font-size: 16px;
    color: var(--mosadaqa-blue);
}

/* the forbidden-characters span carries an inline red colour */
.ms-page-register .ms-register__rules .alert-info li span[style] {
    display: inline-block;
    margin-inline-start: 4px;
    padding: 1px 8px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--mosadaqa-danger) !important;
    background: #fdf1f0;
    border: 1px solid #f5d5d2;
    border-radius: 6px;
    direction: ltr;
    unicode-bidi: isolate;
}

/* Captcha + submit */
.ms-page-register .ms-register__captcha {
    margin: 0 auto var(--mosadaqa-space-5);
    max-width: 460px;
    padding: var(--mosadaqa-space-4);
    background: var(--mosadaqa-white);
    border: 1px solid var(--mosadaqa-line);
    border-radius: 14px;
}

/* _Captcha partial: .clearfix > .col-md-6.centered (double-column mode) — make it fill the block */
.ms-page-register .ms-register__captcha .col-md-6,
.ms-page-register .ms-register__captcha .col-xs-12 {
    float: none;
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    margin: 0;
    padding: 0;
}

.ms-page-register .ms-register__captcha .ms-captcha__refresh {
    display: inline-block;
    margin-bottom: var(--mosadaqa-space-2);
}

.ms-page-register .ms-register__captcha .ms-captcha__image {
    border-radius: 12px;
    max-height: 90px;
    object-fit: cover;
}

.ms-page-register .ms-register__captcha .form-group {
    margin: var(--mosadaqa-space-2) 0 0;
}

.ms-page-register .ms-register__submit {
    max-width: 460px;
    margin: 0 auto;
    padding: 0;
}

.ms-page-register .ms-form-card__footer {
    text-align: center;
    padding-top: var(--mosadaqa-space-2);
}

.ms-page-register .ms-form-card__footer center a,
.ms-page-register .ms-form-card__footer a {
    font-weight: 600;
}

.ms-page-register .ms-form-card__footer br {
    display: none;
}

/* ---- Small screens ----------------------------------------------------------- */
@media (max-width: 767.98px) {
    .ms-page-register .form-row > .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .ms-page-register .ms-choice-group {
        flex-wrap: nowrap;
    }

    .ms-page-register .ms-choice-group > span {
        flex: 1 1 0;
    }

    .ms-page-register .ms-choice-group label {
        min-width: 0;
        width: 100%;
        justify-content: center;
    }

    .ms-page-register .input-group {
        flex-wrap: wrap;
    }

    .ms-page-register .input-group > .form-control {
        flex: 1 1 100%;
    }

    .ms-page-register .input-group-btn,
    .ms-page-register .input-group-btn .btn {
        width: 100%;
    }
}

/* ---- Datepicker input & popup positioning ---- */
.ms-page-register input[uib-datepicker-popup] {
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: 18px 18px;
    background-position: right 16px center;
    padding-inline-end: 46px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b9bae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='3' ry='3'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/><path d='M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01'/></svg>");
    transition: border-color var(--mosadaqa-ease), box-shadow var(--mosadaqa-ease);
}

[dir="rtl"] .ms-page-register input[uib-datepicker-popup],
body.rtl .ms-page-register input[uib-datepicker-popup] {
    background-position: left 16px center;
}

.ms-page-register .uib-datepicker-popup.dropdown-menu {
    right: auto !important;
}