/*
 * Auth pages (login / sign-up) stylesheet
 * ----------------------------------------
 * Loaded ONLY on /login/ and /sign-up/ via dc_enqueue_auth_page_styles() in inc/assets.php.
 * Pages share the compass chrome (app-header + app-sidebar + app-main) from style.css.
 * This file ONLY:
 *   - hides the user icon in .header-left
 *   - leaves the sidebar empty (no rules needed; templates render empty <nav>)
 *   - styles the two-column auth-split inside .app-main
 *   - styles the form fields to match the illustrated mocks
 * Edit freely here; nothing else styles these auth-specific pieces.
 */

/* -----------------------------------------------------------
   1. Chrome tweaks (hide user icon; keep everything else)
   ----------------------------------------------------------- */
body.page-login .header-user-icon,
body.page-sign-up .header-user-icon {
    display: none !important;
}

/* Empty sidebar column still shows, no extra rules needed. */

/* -----------------------------------------------------------
   1b. Unlock #content-div width for auth pages.
   Compass pages hard-cap #content-div at 40% (compass widget takes 60%).
   Auth pages have no compass, so reclaim the full width of app-main.
   Mirrors the .page-account override in style.css.
   ----------------------------------------------------------- */
.page-login .app-layout .layout-container #content-div,
.page-sign-up .app-layout .layout-container #content-div {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    overflow: visible;
    background-color: transparent;

    padding-top: 0;
    padding-bottom: 0;
    gap: 0;
}

.page-login .app-layout .layout-container,
.page-sign-up .app-layout .layout-container {
    flex: 1;
    width: 100%;
}

/* -----------------------------------------------------------
   2. Two-column split inside app-main
   ----------------------------------------------------------- */
.auth-content {
    width: 100%;
    height: 100%;
    display: block;
}

.auth-content .auth-split {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 0;
    width: 100%;
    min-height: calc(100vh - 160px);
    align-items: start;
        height: 100%;
}

.auth-content .auth-split-primary {
    padding: 32px 48px 48px 0;
}

.auth-content .auth-split-divider {
        background: #fff;
    width: 0.5px;
    align-self: stretch;
}

.auth-content .auth-split-secondary {
    padding: 32px 0 48px 48px;
    max-width: 420px;
}

/* -----------------------------------------------------------
   3. Typography
   ----------------------------------------------------------- */
.auth-content .auth-title {
    color: #f5a623;
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    margin: 0 0 24px 0;
    letter-spacing: -0.01em;
}

.auth-content .auth-switch-title {
    color: #f5a623;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    margin: 0 0 12px 0;
}

.auth-content .auth-lede,
.auth-content .auth-switch-copy {
    color: inherit;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 24px 0;
}

/* -----------------------------------------------------------
   4. Buttons
   ----------------------------------------------------------- */
.auth-content .auth-btn,
.auth-content .auth-form button[type="submit"],
.auth-content .auth-form input[type="submit"] {
    display: inline-block;
    padding: 12px 24px;
    background: #f5a623;
    color: #ffffff !important;
    border: none;
    border-radius: 0;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
}

.auth-content .auth-btn:hover,
.auth-content .auth-form button[type="submit"]:hover,
.auth-content .auth-form input[type="submit"]:hover {
    background: #e69612;
    color: #ffffff !important;
}

.auth-content .auth-btn-secondary {
    background: #8a8a8a;
}

.auth-content .auth-btn-secondary:hover {
    background: #707070;
}

/* -----------------------------------------------------------
   5. Form fields (shared by [pms-login] and [wppb-register])
   ----------------------------------------------------------- */
.auth-content .auth-form input[type="text"],
.auth-content .auth-form input[type="email"],
.auth-content .auth-form input[type="password"],
.auth-content .auth-form input[type="url"],
.auth-content .auth-form input[type="tel"],
.auth-content .auth-form select,
.auth-content .auth-form textarea {
    width: 40%!important;
    max-width: 560px;
    padding: 14px 16px;
    background: #e9e9e9;
    border: none;
    border-radius: 0;
    color: #333333;
    font-size: 15px;
    font-family: inherit;
    box-sizing: border-box;
    margin-bottom: 2px;
min-width: 40%;
    border-radius: 0;
  border: none !important;
  color: #fff !important;
  background-color: #58595B !important;
  width: 40% !important;
  margin-right: 20px !important;
      font-size: 1rem;
    line-height: 1.5;
    padding: .5rem 1rem !important;
    transition: all .3s !important;
    height:43px!important;
    min-width: 40%;
}
.auth-content .toggle-password {
  position: absolute;
  right: 12px;
  top: 44%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 2;
}


.auth-content .auth-form .login-submit input[type="submit"],
.auth-content .auth-btn-secondary {
    width: 220px;
    height: 43px;
}
.auth-content .auth-form input[type="password"] {
    width: 100%!important;
}
.auth-content .auth-form input::placeholder {
    color: #8a8a8a;
}
.auth-content #pms_login .password-wrapper {
    display: inline-block;
    width: 40%!important;
    max-width: 560px;
    min-width: 40%;
}
.auth-content .auth-form select {
    background: #4a4a4a;
    color: #ffffff;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="8" viewBox="0 0 14 8"><path fill="%23ffffff" d="M7 8L0 0h14z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.auth-content .auth-form label {
    color: inherit;
    font-size: 14px;
    display: inline-block;
    margin-right: 0;
        vertical-align: unset!important;
}

.auth-content .auth-form input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle;
    accent-color: #f5a623;
}

.auth-content .auth-form p {
    margin: 0 0 2px 0;
}

.auth-content .auth-form .wppb-description-delimiter,
.auth-content .auth-form .wppb-description {
    color: #bdbdbd;
    font-size: 10px;
    margin: 8px 0 16px;
}

.auth-content .auth-form .wppb-form-label > strong,
.auth-content .auth-form .wppb-heading {
    display: none;
}

.auth-content .auth-form .pms-remember-me-wrapper,
.auth-content .auth-form .pms-submit-wrapper {
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px;
    margin-top: 16px;
}

.auth-content .auth-form-extras {
       margin-top: 3px;
}

/* -----------------------------------------------------------
   6. Responsive
   ----------------------------------------------------------- */
@media (max-width: 1100px) {
    .auth-content .auth-split {
        grid-template-columns: 1fr;
    }
    .auth-content .auth-split-divider {
        width: 100%;
        height: 1px;
        margin: 24px 0;
    }
    .auth-content .auth-split-primary {
        padding: 24px 0;
    }
    .auth-content .auth-split-secondary {
        padding: 0;
        max-width: none;
    }
    .auth-content .auth-title {
        font-size: 48px;
    }
    .auth-content .auth-switch-title {
        font-size: 32px;
    }
}
.auth-content .wppb-password-field-container {
        position: relative;
    border-radius: 0;
    border: none !important;
    color: #fff !important;
    background-color: #58595B !important;
    width: 40% !important;
    margin-right: 20px !important;
    min-width: 40%;
}
.auth-content #wppb-register-user-register input[type="password"]{

margin-right:0!important;
}
/* Password row: WPPB nests the field in extra wrappers (.wppb-password-group >
   .wppb-password-subfield) that the other rows do not have, which collapsed the box
   to half width and scattered the strength meter and description. Flatten the
   wrappers so label + box lay out like the other fields, then seat the strength
   meter inside the box, just left of the show/hide eye (the meter is a sibling of
   the box in the markup, so auth-password-fix.js moves it inside). */
.auth-content .auth-form .wppb-default-password .wppb-password-group,
.auth-content .auth-form .wppb-default-password .wppb-password-subfield {
    display: contents;
}
.auth-content .wppb-default-password .password-wrapper {
    display: block;
    width: 100%;
}
.auth-content .wppb-default-password #passw1 {
    padding-right: 116px !important;
    box-sizing: border-box;
}
.auth-content .wppb-default-password #pass-strength-result {
    position: absolute;
    right: 40px;
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    margin: 0;
    font-size: 11px;
    white-space: nowrap;
    color: #cfcfcf;
}
.wppb-form-field label, #pms_login label {
    width: 220px;
    height: 43px;
    background-color: var(--label-grey);
    line-height: 43px;
    padding-left: 10px;
    font-size: 18px;
    margin-top: 0;
    vertical-align: baseline;
    min-width: 220px;
}
.wppb-form-field .wppb-checkboxes label {
    min-width: unset;
}
.auth-content .auth-form .wppb-checkbox .wppb-description-delimiter {
    font-size:14px!important;
    height: 43px;
  
    line-height: 43px;
    padding-left: 3px;
   
    margin: 0;
}
.auth-content .wppb-description-delimiter a {
  margin: 0 3px;
}
.page-sign-up main#content {
  height: unset;
  min-height: calc(100vh - 35px);
  border-bottom: 0.5px solid white;
  overflow: auto;
}
.page-sign-up .dcf-footer-bar {display: none !important;}
.page-sign-up .app-layout {
  display: flex;
  min-height: calc(100vh - 143px);
  width: 100%;
  position: relative;
  max-height: unset;
  height: unset;
}