/*
File: assets/css/shared/registration-foundation.css
Purpose: Shared professional visual foundation for all Raanmat registration forms.

Used By:
- Public User Registration
- User Panel Register New User
- Admin Manual/Special ID Registration
- Admin Franchise Registration

Important:
- Page-specific CSS keeps local layout differences.
- This file owns section containers, sequential error state, placement feedback,
  terms link, review dialog and common action states.
*/

:root {
    --registration-foundation-primary: #17118f;
    --registration-foundation-primary-hover: #241cb1;
    --registration-foundation-primary-active: #0d086b;
    --registration-foundation-danger: #be123c;
    --registration-foundation-success: #087a3d;
    --registration-foundation-border: #d8e0ef;
    --registration-foundation-soft: #f7f9fd;
    --registration-foundation-text: #25324a;
    --registration-foundation-muted: #66758e;
}

.registration-foundation-form {
    width: 100%;
}

.registration-foundation-section {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin: 0 0 18px;
    padding: 18px;
    border: 1px solid var(--registration-foundation-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(35, 48, 78, 0.055);
}

.registration-foundation-section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -18px -18px 18px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--registration-foundation-border);
    border-radius: 12px 12px 0 0;
    background: linear-gradient(135deg, #f6f8fd 0%, #eef2fb 100%);
}

.registration-foundation-section-index,
.registration-foundation-section-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
}

.registration-foundation-section-index {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--registration-foundation-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.registration-foundation-section-icon {
    width: 30px;
    height: 30px;
    border: 1px solid #cbd5eb;
    border-radius: 8px;
    background: #fff;
    color: var(--registration-foundation-primary);
    font-size: 13px;
}

.registration-foundation-section-icon.is-trailing {
    margin-left: auto;
}

.registration-foundation-section-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.registration-foundation-section-copy h2 {
    margin: 0;
    color: #17233a;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
}

.registration-foundation-section-copy p {
    margin: 3px 0 0;
    color: var(--registration-foundation-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
}

.registration-foundation-field-invalid {
    border-color: var(--registration-foundation-danger) !important;
    box-shadow: 0 0 0 3px rgba(190, 18, 60, 0.1) !important;
}

.registration-foundation-field-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 7px 0 0;
    color: var(--registration-foundation-danger);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

.registration-foundation-field-error i {
    margin-top: 2px;
}

.registration-foundation-placement-feedback {
    display: none;
    align-items: center;
    gap: 7px;
    margin: 9px 0 0;
    padding: 9px 11px;
    border: 1px solid #a9dfbd;
    border-radius: 8px;
    background: #f0fbf4;
    color: var(--registration-foundation-success);
    font-size: 12px;
    font-weight: 400;
}

.registration-foundation-placement-feedback.is-visible {
    display: flex;
}

.registration-foundation-placement-choice.is-selected,
.registration-foundation-placement-choice:has(input:checked) {
    border-color: var(--registration-foundation-primary) !important;
    background: #eeedff !important;
    box-shadow: 0 0 0 3px rgba(23, 17, 143, 0.1);
}

.registration-foundation-placement-choice.is-selected strong,
.registration-foundation-placement-choice:has(input:checked) strong {
    color: var(--registration-foundation-primary);
}

.registration-foundation-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--registration-foundation-text);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

.registration-foundation-consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--registration-foundation-primary);
}

.registration-foundation-terms-link {
    color: var(--registration-foundation-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.registration-foundation-terms-link:hover,
.registration-foundation-terms-link:focus-visible {
    color: var(--registration-foundation-primary-hover);
}

.registration-foundation-submit-button {
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease,
        transform 120ms ease, box-shadow 160ms ease;
}

.registration-foundation-submit-button:hover:not(:disabled) {
    transform: translateY(-1px);
}

.registration-foundation-submit-button:active:not(:disabled) {
    transform: translateY(0);
}

.registration-foundation-submit-button:disabled,
.registration-foundation-submit-button.is-submitting {
    cursor: not-allowed !important;
    opacity: 0.68;
    transform: none !important;
    box-shadow: none !important;
}

.registration-review-dialog[hidden] {
    display: none;
}

.registration-review-dialog {
    position: fixed;
    z-index: 10050;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
}

.registration-review-dialog-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 16, 35, 0.68);
    backdrop-filter: blur(3px);
}

.registration-review-card {
    position: relative;
    width: min(620px, 100%);
    max-height: min(86vh, 720px);
    overflow: auto;
    border: 1px solid #d6deef;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(10, 18, 45, 0.3);
}

.registration-review-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px;
    border-bottom: 1px solid #e1e6f1;
    background: #f7f9fd;
}

.registration-review-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--registration-foundation-primary);
    color: #fff;
}

.registration-review-head > div {
    min-width: 0;
    flex: 1;
}

.registration-review-head h2 {
    margin: 0;
    color: #18243b;
    font-size: 18px;
    font-weight: 600;
}

.registration-review-head p {
    margin: 4px 0 0;
    color: var(--registration-foundation-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
}

.registration-review-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #d4dcea;
    border-radius: 8px;
    background: #fff;
    color: #40506c;
    cursor: pointer;
}

.registration-review-summary {
    display: grid;
    gap: 9px;
    padding: 18px;
}

.registration-review-row {
    display: grid;
    grid-template-columns: minmax(130px, 0.7fr) minmax(0, 1.3fr);
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #e0e6f1;
    border-radius: 9px;
    background: #fff;
}

.registration-review-row span {
    color: var(--registration-foundation-muted);
    font-size: 12px;
    font-weight: 400;
}

.registration-review-row strong {
    overflow-wrap: anywhere;
    color: #17233a;
    font-size: 13px;
    font-weight: 600;
}

.registration-review-reminder {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 18px 18px;
    padding: 11px 12px;
    border: 1px solid #cfd8ed;
    border-radius: 9px;
    background: #f5f7fc;
    color: #42516d;
}

.registration-review-reminder p {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
}

.registration-review-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 18px 18px;
    border-top: 1px solid #e1e6f1;
}

.registration-review-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 15px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, transform 120ms ease;
}

.registration-review-button.is-secondary {
    border-color: #cdd7e8;
    background: #fff;
    color: #34445f;
}

.registration-review-button.is-secondary:hover {
    background: #f1f4f9;
}

.registration-review-button.is-primary {
    background: var(--registration-foundation-primary);
    color: #fff;
}

.registration-review-button.is-primary:hover:not(:disabled) {
    background: var(--registration-foundation-primary-hover);
}

.registration-review-button.is-primary:active:not(:disabled) {
    background: var(--registration-foundation-primary-active);
    transform: translateY(1px);
}

.registration-review-button:disabled {
    cursor: not-allowed;
    opacity: 0.68;
}

body.registration-review-open {
    overflow: hidden;
}

@media (max-width: 680px) {
    .registration-foundation-section {
        padding: 14px;
        border-radius: 10px;
    }

    .registration-foundation-section-heading {
        margin: -14px -14px 14px;
        padding: 11px 12px;
        border-radius: 10px 10px 0 0;
    }

    .registration-foundation-section-index,
    .registration-foundation-section-icon {
        width: 28px;
        height: 28px;
    }

    .registration-foundation-section-copy h2 {
        font-size: 14px;
    }

    .registration-review-dialog {
        align-items: end;
        padding: 10px;
    }

    .registration-review-card {
        width: 100%;
        max-height: 92vh;
        border-radius: 14px 14px 10px 10px;
    }

    .registration-review-row {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .registration-review-actions {
        flex-direction: column-reverse;
    }

    .registration-review-button {
        width: 100%;
    }
}


/* Full-Width Registration Section Contract Start */
.registration-foundation-full-width,
.registration-foundation-form .user-registration-agreements-wrap,
.registration-foundation-form .admin-user-manual-registration-agreements-wrap,
.registration-foundation-form .registration-form-actions {
    width: 100%;
    max-width: none;
    flex: 0 0 100%;
    grid-column: 1 / -1;
    box-sizing: border-box;
}
/* Full-Width Registration Section Contract End */

/* Control-Level Font Awesome Icon Foundation Start */
.registration-foundation-control-shell {
    width: 100%;
    min-width: 0;
    position: relative;
}

.registration-foundation-control-shell > input,
.registration-foundation-control-shell > select,
.registration-foundation-control-shell > textarea {
    width: 100%;
    padding-left: 38px !important;
}

.registration-foundation-control-shell.is-textarea > textarea {
    padding-top: 11px !important;
}

.registration-foundation-control-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 12px;
    color: #74829a;
    font-size: 12px;
    pointer-events: none;
    transform: translateY(-50%);
    transition: color 150ms ease;
}

.registration-foundation-control-shell.is-textarea .registration-foundation-control-icon {
    top: 14px;
    transform: none;
}

.registration-foundation-control-shell:focus-within .registration-foundation-control-icon {
    color: var(--registration-foundation-primary);
}

.registration-foundation-control-shell.is-readonly .registration-foundation-control-icon {
    color: #9aa6b8;
}

.registration-foundation-control-shell.field-with-action {
    display: flex;
}

.registration-foundation-control-shell.field-with-action > input {
    min-width: 0;
}

.registration-foundation-secure-input.registration-foundation-control-shell input,
.user-password-field-wrap.registration-foundation-control-shell input,
.user-registration-password-field-wrap.registration-foundation-control-shell input,
.admin-user-manual-registration-password-field-wrap.registration-foundation-control-shell input {
    padding-right: 44px !important;
}

.registration-foundation-choice-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    color: var(--registration-foundation-primary);
    font-size: 12px;
}

.registration-foundation-consent {
    align-items: flex-start;
}

.registration-foundation-consent input[type="checkbox"]:checked + .registration-foundation-choice-icon {
    color: var(--registration-foundation-success);
}
/* Control-Level Font Awesome Icon Foundation End */

/* Shared Secure Input and Consent Layout Start */
.registration-foundation-consent-list {
    display: grid;
    gap: 10px;
}

.registration-foundation-secure-input {
    position: relative;
}

.registration-foundation-secure-input input {
    padding-right: 44px !important;
}

.registration-foundation-visibility-toggle {
    position: absolute;
    top: 50%;
    right: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transform: translateY(-50%);
}

.registration-foundation-visibility-toggle:hover,
.registration-foundation-visibility-toggle:focus-visible {
    background: #eef2f8;
    color: var(--registration-foundation-primary);
}
/* Shared Secure Input and Consent Layout End */

/* Placement Selection Confirmation Mark Start */
.registration-foundation-placement-choice {
    position: relative;
}

.registration-foundation-placement-choice.is-selected::after,
.registration-foundation-placement-choice:has(input:checked)::after {
    position: absolute;
    top: 8px;
    right: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--registration-foundation-success);
    color: #fff;
    font-family: "Font Awesome 6 Free";
    font-size: 10px;
    font-weight: 900;
    content: "\f00c";
}
/* Placement Selection Confirmation Mark End */

/* Registration Typography Normalization Start */
.registration-foundation-form label,
.registration-foundation-form legend {
    font-weight: 500;
}

.registration-foundation-form input,
.registration-foundation-form select,
.registration-foundation-form textarea,
.registration-foundation-form small,
.registration-foundation-form .field-note {
    font-weight: 400;
}
/* Registration Typography Normalization End */