/* ==========================================================
   فصلنامه حقوقی نگاه شهروند
   Professional Registration Page
   Brand Color: #043c83
   RTL / Responsive
   ========================================================== */

.page_register {
    --reg-primary: #043c83;
    --reg-primary-dark: #032f67;
    --reg-primary-soft: #eef4fb;
    --reg-text: #1f2937;
    --reg-muted: #64748b;
    --reg-border: #dbe3ec;
    --reg-input: #f8fafc;
    --reg-white: #ffffff;

    direction: rtl;

    width: min(900px, calc(100% - 32px)) !important;
    margin: 40px auto !important;
    padding: 0 !important;

    background: #fff !important;
    border: 1px solid #e5ebf1 !important;
    border-radius: 16px !important;

    box-shadow:
        0 5px 14px rgba(15, 23, 42, .04),
        0 18px 45px rgba(15, 23, 42, .07) !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* ----------------------------------------------------------
   Breadcrumb
   ---------------------------------------------------------- */

.page_register .breadcrumbs {
    padding: 20px 32px 0 !important;
    margin: 0 !important;

    color: #7b8794 !important;
    font-size: 12px !important;
}

.page_register .breadcrumbs a {
    color: var(--reg-primary) !important;
}

/* ----------------------------------------------------------
   Page title
   ---------------------------------------------------------- */

.page_register > h1 {
    margin: 0 !important;
    padding: 22px 32px 0 !important;

    color: var(--reg-primary) !important;

    text-align: center !important;

    font-size: 28px !important;
    line-height: 1.5 !important;
    font-weight: 800 !important;
}

.page_register > p {
    margin: 7px 32px 0 !important;

    color: var(--reg-muted) !important;

    text-align: center !important;

    font-size: 13px !important;
    line-height: 1.8 !important;
}

/* ----------------------------------------------------------
   Main registration form
   ---------------------------------------------------------- */

.page_register form#register {
    width: min(760px, 100%) !important;
    max-width: 760px !important;

    margin: 28px auto 0 !important;
    padding: 0 34px 38px !important;

    box-sizing: border-box !important;

    background: transparent !important;
    border: 0 !important;
}

/* ----------------------------------------------------------
   Fieldsets
   ---------------------------------------------------------- */

.page_register form#register fieldset {
    margin: 0 0 26px !important;
    padding: 22px !important;

    border: 1px solid #e4eaf0 !important;
    border-radius: 12px !important;

    background: #fff !important;
    box-sizing: border-box !important;
}

/* Section titles */

.page_register form#register fieldset > legend {
    display: block !important;

    margin: 0 0 18px !important;
    padding: 0 10px !important;

    color: var(--reg-primary) !important;

    font-size: 16px !important;
    line-height: 1.6 !important;
    font-weight: 800 !important;
}

/* ----------------------------------------------------------
   Fields
   ---------------------------------------------------------- */

.page_register form#register .fields {
    display: grid !important;

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 20px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* Individual fields */

.page_register form#register .fields > div {
    min-width: 0 !important;
}

/* Full-width fields */

.page_register form#register .affiliation,
.page_register form#register .email,
.page_register form#register .password {
    grid-column: span 2 !important;
}

/* Password confirmation */

.page_register form#register .login .password + .password {
    grid-column: span 1 !important;
}

/* ----------------------------------------------------------
   Labels
   ---------------------------------------------------------- */

.page_register form#register label {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

.page_register form#register .label {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;

    margin: 0 0 8px !important;

    color: var(--reg-text) !important;

    font-size: 13px !important;
    line-height: 1.7 !important;
    font-weight: 700 !important;
}

/* Required marker */

.page_register form#register .required {
    color: #c24141 !important;
    margin-right: 3px !important;
}

/* ----------------------------------------------------------
   Input icons
   ---------------------------------------------------------- */

.page_register .given_name .label::before,
.page_register .family_name .label::before,
.page_register .affiliation .label::before,
.page_register .country .label::before,
.page_register .email .label::before,
.page_register .username .label::before,
.page_register .password .label::before {
    content: "" !important;

    display: inline-block !important;

    width: 17px !important;
    height: 17px !important;

    flex: 0 0 17px !important;

    margin-left: 7px !important;

    background-color: var(--reg-primary) !important;

    -webkit-mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-size: contain !important;

    mask-position: center !important;
    mask-repeat: no-repeat !important;
    mask-size: contain !important;
}

/* Person icon */

.page_register .given_name .label::before,
.page_register .family_name .label::before {

    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0 0-10a5 5 0 0 0 0 10Zm0 2c-5.1 0-9 2.7-9 6v2h18v-2c0-3.3-3.9-6-9-6Z'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0 0-10a5 5 0 0 0 0 10Zm0 2c-5.1 0-9 2.7-9 6v2h18v-2c0-3.3-3.9-6-9-6Z'/%3E%3C/svg%3E");
}

/* Organization */

.page_register .affiliation .label::before {

    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 21h18v-2h-2V5a2 2 0 0 0-2-2h-4V1h-2v2H7a2 2 0 0 0-2 2v14H3v2Zm4-2V5h10v14H7Zm2-10h2V7H9v2Zm4 0h2V7h-2v2Zm-4 4h2v-2H9v2Zm4 0h2v-2h-2v2Z'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 21h18v-2h-2V5a2 2 0 0 0-2-2h-4V1h-2v2H7a2 2 0 0 0-2 2v14H3v2Zm4-2V5h10v14H7Zm2-10h2V7H9v2Zm4 0h2V7h-2v2Zm-4 4h2v-2H9v2Zm4 0h2v-2h-2v2Z'/%3E%3C/svg%3E");
}

/* Country */

.page_register .country .label::before {

    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a8 8 0 0 0-8 8c0 5.5 8 12 8 12s8-6.5 8-12a8 8 0 0 0-8-8Zm0 18.7C9.8 18.8 6 14.6 6 10a6 6 0 1 1 12 0c0 4.6-3.8 8.8-6 10.7ZM12 7a3 3 0 1 0 0 6a3 3 0 0 0 0-6Z'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a8 8 0 0 0-8 8c0 5.5 8 12 8 12s8-6.5 8-12a8 8 0 0 0-8-8Zm0 18.7C9.8 18.8 6 14.6 6 10a6 6 0 1 1 12 0c0 4.6-3.8 8.8-6 10.7ZM12 7a3 3 0 1 0 0 6a3 3 0 0 0 0-6Z'/%3E%3C/svg%3E");
}

/* Email */

.page_register .email .label::before {

    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 2v.3l9 5.2 9-5.2V7H3Zm18 10V9.6l-8.5 4.9a1 1 0 0 1-1 0L3 9.6V17h18Z'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 2v.3l9 5.2 9-5.2V7H3Zm18 10V9.6l-8.5 4.9a1 1 0 0 1-1 0L3 9.6V17h18Z'/%3E%3C/svg%3E");
}

/* Username */

.page_register .username .label::before {

    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0 0-10a5 5 0 0 0 0 10Zm0 2c-5 0-9 2.7-9 6v2h18v-2c0-3.3-4-6-9-6Z'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0 0-10a5 5 0 0 0 0 10Zm0 2c-5 0-9 2.7-9 6v2h18v-2c0-3.3-4-6-9-6Z'/%3E%3C/svg%3E");
}

/* Password */

.page_register .password .label::before {

    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 8h-1V6a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2ZM10 6a2 2 0 0 1 4 0v2h-4V6Zm2 6a2 2 0 1 1 0 4a2 2 0 0 1 0-4Z'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 8h-1V6a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2ZM10 6a2 2 0 1 1 4 0v2h-4V6Zm2 6a2 2 0 1 1 0 4a2 2 0 0 1 0-4Z'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------
   Inputs / Select
   ---------------------------------------------------------- */

.page_register form#register input[type="text"],
.page_register form#register input[type="email"],
.page_register form#register input[type="password"],
.page_register form#register select {
    display: block !important;

    width: 100% !important;
    height: 48px !important;

    margin: 0 !important;
    padding: 0 13px !important;

    box-sizing: border-box !important;

    border: 1px solid var(--reg-border) !important;
    border-radius: 9px !important;

    background: var(--reg-input) !important;

    color: var(--reg-text) !important;

    font-family: inherit !important;
    font-size: 14px !important;

    outline: none !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease !important;
}

.page_register form#register select {
    cursor: pointer !important;
}

/* Hover */

.page_register form#register input:hover,
.page_register form#register select:hover {
    border-color: #b9c7d6 !important;
}

/* Focus */

.page_register form#register input:focus,
.page_register form#register select:focus {
    border-color: var(--reg-primary) !important;

    background: #fff !important;

    box-shadow:
        0 0 0 3px rgba(4,60,131,.09) !important;
}

/* ----------------------------------------------------------
   Consent / reviewer sections
   ---------------------------------------------------------- */

.page_register form#register fieldset.consent,
.page_register form#register fieldset.reviewer {
    background: #f9fbfd !important;
}

.page_register form#register .optin {
    padding: 11px 13px !important;

    border: 1px solid #e5ebf2 !important;
    border-radius: 9px !important;

    background: #fff !important;
}

.page_register form#register .optin label {
    display: flex !important;

    align-items: flex-start !important;

    gap: 9px !important;

    color: #536273 !important;

    font-size: 12px !important;
    line-height: 1.9 !important;

    cursor: pointer !important;
}

.page_register form#register .optin input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;

    flex: 0 0 16px !important;

    margin: 3px 0 0 0 !important;

    accent-color: var(--reg-primary) !important;
}

/* Reviewer interests */

.page_register form#register .reviewer_interests {
    margin-top: 16px !important;
}

/* ----------------------------------------------------------
   Error messages
   ---------------------------------------------------------- */

.page_register form#register .pkp_form_error,
.page_register form#register .form_error {
    margin-bottom: 18px !important;

    padding: 12px 14px !important;

    border-radius: 9px !important;

    font-size: 13px !important;
}

/* ----------------------------------------------------------
   CAPTCHA / ALTCHA
   ---------------------------------------------------------- */

.page_register form#register .recaptcha_wrapper,
.page_register form#register .altcha_wrapper {
    margin: 0 0 24px !important;
    padding: 0 !important;

    border: 0 !important;
}

/* ----------------------------------------------------------
   Buttons
   ---------------------------------------------------------- */

.page_register form#register > .buttons {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 18px !important;

    width: 100% !important;

    margin: 5px 0 0 !important;
    padding: 0 !important;
}

.page_register form#register button.submit {
    position: relative !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 155px !important;
    height: 48px !important;

    padding: 0 18px 0 42px !important;

    border: 0 !important;
    border-radius: 9px !important;

    background: var(--reg-primary) !important;

    color: #fff !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;

    cursor: pointer !important;

    box-shadow: 0 5px 14px rgba(4,60,131,.18) !important;

    transition: .18s ease !important;
}

/* Register icon */

.page_register form#register button.submit::before {
    content: "" !important;

    position: absolute !important;

    left: 17px !important;
    top: 50% !important;

    width: 17px !important;
    height: 17px !important;

    transform: translateY(-50%) !important;

    background: #fff !important;

    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm1 15h-2v-4H7v-2h4V7h2v4h4v2h-4v4Z'/%3E%3C/svg%3E")
        center / contain no-repeat !important;

    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm1 15h-2v-4H7v-2h4V7h2v4h4v2h-4v4Z'/%3E%3C/svg%3E")
        center / contain no-repeat !important;
}

.page_register form#register button.submit:hover {
    background: var(--reg-primary-dark) !important;

    transform: translateY(-1px) !important;

    box-shadow: 0 8px 18px rgba(4,60,131,.24) !important;
}

/* Login link */

.page_register form#register a.login {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-height: 48px !important;

    color: var(--reg-primary) !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    text-decoration: none !important;
}

.page_register form#register a.login:hover {
    color: var(--reg-primary-dark) !important;
    text-decoration: underline !important;
}

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    .page_register {
        width: calc(100% - 20px) !important;

        margin: 20px auto !important;

        border-radius: 14px !important;
    }

    .page_register .breadcrumbs {
        padding: 16px 20px 0 !important;
    }

    .page_register > h1 {
        padding: 20px 20px 0 !important;

        font-size: 24px !important;
    }

    .page_register > p {
        margin-left: 20px !important;
        margin-right: 20px !important;
    }

    .page_register form#register {
        width: 100% !important;

        padding: 0 18px 28px !important;
    }

    .page_register form#register fieldset {
        padding: 17px !important;

        margin-bottom: 18px !important;
    }

    .page_register form#register .fields {
        grid-template-columns: 1fr !important;

        gap: 17px !important;
    }

    .page_register form#register .affiliation,
    .page_register form#register .email,
    .page_register form#register .password,
    .page_register form#register .password + .password {
        grid-column: span 1 !important;
    }

    .page_register form#register > .buttons {
        flex-direction: column !important;

        align-items: stretch !important;
    }

    .page_register form#register button.submit {
        width: 100% !important;
    }

    .page_register form#register a.login {
        width: 100% !important;
    }
}

/* Small phones */

@media (max-width: 380px) {

    .page_register {
        width: calc(100% - 12px) !important;

        margin: 12px auto !important;
    }

    .page_register form#register {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .page_register form#register fieldset {
        padding: 14px !important;
    }

    .page_register > h1 {
        font-size: 22px !important;
    }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

    .page_register * {
        transition: none !important;
    }
}