/* Agency CRM registration form — Fix Marketing 2025 redesign (#3898).
   Scoped under .areg so it never affects crm/registration or other shared pages.
   Design tokens (from Figma): text #455568, accent #16A1C0, white #FFFFFF; font Noto Sans Hebrew. */

/* Page layout. The Figma mock has a side image column, but per the ticket this form
   is embedded in an iframe, so only the form is shown — the image column is hidden
   (.areg-page__bg { display:none }). Its markup/styles are kept so it can be re-enabled
   by removing that one line; column order then follows the locale (form on the reading
   side, image opposite — direction is set inline on .areg-page). */
.areg-page {
    display: flex;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

/* Side image — hidden (iframe = form only). Remove `display: none` to bring it back. */
.areg-page__bg {
    display: none;
    width: 38.3334%;
    flex: 0 0 38.3334%;
    background: url(../img/backgroundImage.png) 50% 50% no-repeat;
    background-size: cover;
    position: relative;
}

.areg-page__bg::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(41, 52, 66, 0.65);
}

.areg-page__main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 20px;
}

/* Center the form vertically but keep it scroll-safe: auto margins collapse to 0
   when the form is taller than the viewport, so the top stays reachable. */
.areg-page #registrationView {
    margin: auto;
    width: 100%;
}

.areg {
    --areg-primary: #16A1C0;
    --areg-primary-dark: #12879F;
    --areg-text: #455568;
    --areg-muted: #455568;
    --areg-line: #D5D9DE;
    --areg-placeholder: #455568;
    --areg-social-bg: #EEF1F5;
    --areg-social-bg-hover: #E2E7EE;

    box-sizing: border-box;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: 24px 20px 32px;
    font-family: "Noto Sans Hebrew", "Assistant", Heebo, Alef, sans-serif;
    color: var(--areg-text);
}

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

/* Logo */
.areg__logo {
    text-align: center;
    margin-bottom: 18px;
}

.areg__logo img {
    width: 210px;
    max-width: 70%;
    height: auto;
}

/* Headings — Noto Sans Hebrew SemiBold 24 / 32 */
.areg__title {
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: var(--areg-text);
    text-align: center;
}

.areg__subtitle {
    margin: 0 0 28px;
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: var(--areg-primary);
    text-align: center;
}

/* Form fields — underline style with floating label (Regular 15 / 24).
   The label sits above the field, hidden until the field is focused or filled;
   the placeholder shows the same text while the field is empty. */
.areg__field {
    position: relative;
    margin-bottom: 20px;
}

.areg__label {
    display: block;
    height: 24px;
    padding: 3px 0;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    color: var(--areg-text);
    text-align: start;
    transition: color .2s, visibility .2s;
    visibility: hidden;
}

.areg__field:focus-within .areg__label {
    visibility: visible;
    color: var(--areg-primary);
}

.areg__field:has(.elementor-field:not(:placeholder-shown)) .areg__label {
    visibility: visible;
}

.areg__field:has(.elementor-field.red-border) .areg__label {
    visibility: visible;
    color: #E1493E;
}

.areg__field .elementor-field,
.areg .areg-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--areg-line);
    border-radius: 0;
    background: transparent;
    padding: 2px 2px 11px;
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    font-family: inherit;
    color: var(--areg-text);
    transition: border-color .2s;
}

.areg__field .elementor-field::placeholder {
    color: var(--areg-placeholder);
    opacity: 1;
}

.areg__field .elementor-field:focus {
    outline: none;
    border-bottom: 2px solid var(--areg-primary);
    padding-bottom: 10px;
}

.areg__field .elementor-field:focus::placeholder {
    opacity: .5;
}

.areg__field .elementor-field.red-border {
    border-bottom: 2px solid #E1493E;
}

/* Field validation messages */
.areg .text-danger {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #E1493E;
}

/* Terms checkbox */
.areg__terms {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 22px;
    font-size: 15px;
    line-height: 24px;
    color: var(--areg-muted);
}

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

.areg__terms label {
    margin: 0;
    cursor: pointer;
}

.areg__terms a {
    font-weight: 600;
    color: var(--areg-primary);
    text-decoration: none;
}

.areg__validation-error {
    margin: -14px 0 16px;
    color: #E1493E;
    font-size: 14px;
    text-align: center;
}

.areg__validation-error p {
    margin: 0;
}

/* Submit button — Medium 15, white on #16A1C0 */
.areg__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: none;
    border-radius: 6px;
    background: var(--areg-primary);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    padding: 14px 16px;
    cursor: pointer;
    transition: background .2s;
}

.areg__submit:hover {
    background: var(--areg-primary-dark);
}

.areg__submit:disabled {
    background: #aaa;
    cursor: default;
}

.areg__submit .fa-spinner {
    margin: 0 8px;
}

/* Divider "or" */
.areg__divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px 0;
    color: var(--areg-muted);
    font-size: 15px;
}

.areg__divider::before,
.areg__divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--areg-line);
}

/* Social buttons — Regular 14, #455568 on light fill */
.areg__social {
    display: flex;
    gap: 12px;
}

.areg__social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex: 1 1 0;
    min-width: 0;
    min-height: 46px;
    border: none;
    border-radius: 8px;
    background: var(--areg-social-bg);
    color: var(--areg-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    padding: 8px 10px;
    cursor: pointer;
    transition: background .2s;
}

.areg__social-btn:hover {
    background: var(--areg-social-bg-hover);
    color: var(--areg-text);
}

.areg__social-btn svg {
    flex: 0 0 auto;
}

.areg__social-btn .areg__social-text {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Login link */
.areg__login {
    margin-top: 50px;
    text-align: center;
    font-size: 15px;
    color: var(--areg-muted);
}

.areg__login a {
    font-weight: 600;
    color: var(--areg-primary);
    text-decoration: none;
    margin: 0 4px;
}

.areg__login a:hover {
    text-decoration: underline;
}

#another-errors-messages {
    color: #E1493E;
    text-align: center;
    font-size: 14px;
    margin-top: 12px;
}

/* Responsive */
@media (max-width: 420px) {
    .areg__title,
    .areg__subtitle {
        font-size: 21px;
        line-height: 28px;
    }

    .areg__subtitle {
        margin-bottom: 22px;
    }

    .areg__social-btn {
        font-size: 13px;
        padding: 10px 8px;
        gap: 7px;
    }
}