/**
 * VAD Custom Register Page Styles
 * Matches login page design
 */

/* ==========================================================================
   CSS Variables (same as login)
   ========================================================================== */

:root {
    --vad-primary: #2a4b6d;
    --vad-accent: #c96858;
    --vad-radius: 8px;
    --vad-gray-100: #f7f8fa;
    --vad-gray-200: #e9ecef;
    --vad-gray-300: #dee2e6;
    --vad-gray-400: #ced4da;
    --vad-gray-500: #adb5bd;
    --vad-gray-600: #6c757d;
    --vad-gray-700: #495057;
    --vad-gray-800: #343a40;
    --vad-gray-900: #212529;
    --vad-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --vad-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --vad-transition: all 0.3s ease;
}

/* ==========================================================================
   Hide Site Header/Footer on Register Page
   ========================================================================== */

body.register #masthead,
body.register .tm-header,
body.register .tm-header-mobile,
body.register header.bb-rl-header,
body.register .site-header,
body.register #colophon,
body.register .tm-footer,
body.register footer.site-footer,
body.register .footer-widget-area,
body.register .site-footer-bottom,
body.register .tm-section-footer,
body.register footer,
body.register .site-footer,
body.registration #masthead,
body.registration .tm-header,
body.registration header.bb-rl-header,
body.registration #colophon,
body.registration .tm-footer,
body.registration footer.site-footer,
body.registration .tm-section-footer,
body.registration footer,
body.registration .site-footer,
body.bp-register #masthead,
body.bp-register .tm-header,
body.bp-register header.bb-rl-header,
body.bp-register #colophon,
body.bp-register .tm-footer,
body.bp-register footer.site-footer,
body.bp-register .tm-section-footer,
body.bp-register footer,
body.bp-register .site-footer {
    display: none !important;
}

/* ==========================================================================
   Page Layout
   ========================================================================== */

body.register,
body.registration,
body.bp-register {
    background: linear-gradient(135deg, var(--vad-gray-100) 0%, var(--vad-gray-200) 100%) !important;
    min-height: 100vh;
}

body.register #page,
body.register .site,
body.register #content,
body.register main,
body.registration #page,
body.registration .site,
body.registration #content,
body.registration main,
body.bp-register #page,
body.bp-register .site,
body.bp-register #content,
body.bp-register main {
    background: transparent !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ==========================================================================
   Registration Container
   ========================================================================== */

#buddypress.buddypress-wrap,
.bb-register,
.register-section,
.bp-register-page,
.register #primary,
.registration #primary,
body.register main > *,
body.register .tm-main > *,
body.registration main > *,
body.registration .tm-main > *,
.buddypress-wrap.extended-default-reg,
.bs-bp-container-reg,
body.register .uk-container,
body.registration .uk-container,
body.register article,
body.registration article,
body.register .content-area,
body.registration .content-area {
    max-width: 700px !important;
    width: 100% !important;
    margin: 40px auto !important;
    padding: 0 20px !important;
    background: transparent !important;
}

/* Override BuddyPress specific width constraints */
body.register .buddypress-wrap,
body.registration .buddypress-wrap,
body.register .page.register-page,
body.registration .page.register-page {
    max-width: 100% !important;
    width: 100% !important;
}

/* ==========================================================================
   Registration Form Card
   ========================================================================== */

#signup-form,
#register-page form,
.register-section form,
.standard-form,
#buddypress .standard-form,
.bb-register-form,
form#signup_form {
    background: white !important;
    border-radius: var(--vad-radius) !important;
    padding: 35px 40px !important;
    box-shadow: var(--vad-shadow) !important;
    border: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Make sure submit area stays inside */
#signup-form .submit,
form#signup_form .submit,
.standard-form .submit,
#buddypress .submit {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

/* ==========================================================================
   Form Heading
   ========================================================================== */

.register-section h1,
.register-section h2,
#buddypress h2,
#signup-form h2,
.bb-register-form h2,
.register h1,
.register h2,
form#signup_form > h2,
.bp-register-page h1 {
    color: var(--vad-primary) !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    text-align: center !important;
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* ==========================================================================
   Form Labels
   ========================================================================== */

#signup-form label,
.register-section label,
#buddypress label,
.standard-form label,
form#signup_form label {
    display: block !important;
    color: var(--vad-gray-700) !important;
    font-weight: 500 !important;
    margin-bottom: 2px !important;
    padding-bottom: 0 !important;
    font-size: 14px !important;
}

/* ==========================================================================
   Form Inputs
   ========================================================================== */

#signup-form input[type="text"],
#signup-form input[type="email"],
#signup-form input[type="password"],
#signup-form select,
.register-section input[type="text"],
.register-section input[type="email"],
.register-section input[type="password"],
.register-section select,
#buddypress input[type="text"],
#buddypress input[type="email"],
#buddypress input[type="password"],
#buddypress select,
.standard-form input[type="text"],
.standard-form input[type="email"],
.standard-form input[type="password"],
.standard-form select,
form#signup_form input[type="text"],
form#signup_form input[type="email"],
form#signup_form input[type="password"],
form#signup_form select {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1px solid var(--vad-gray-300) !important;
    border-radius: var(--vad-radius) !important;
    font-size: 14px !important;
    transition: var(--vad-transition) !important;
    background: white !important;
    color: var(--vad-gray-900) !important;
    box-sizing: border-box !important;
    margin-bottom: 5px !important;
    height: auto !important;
    line-height: 1.5 !important;
}

#signup-form input[type="text"]:focus,
#signup-form input[type="email"]:focus,
#signup-form input[type="password"]:focus,
#signup-form select:focus,
.register-section input:focus,
.register-section select:focus,
#buddypress input:focus,
#buddypress select:focus,
.standard-form input:focus,
.standard-form select:focus,
form#signup_form input:focus,
form#signup_form select:focus {
    outline: none !important;
    border-color: var(--vad-primary) !important;
    box-shadow: 0 0 0 3px rgba(42, 75, 109, 0.1) !important;
}

/* Tighter input spacing */
#signup-form input[type="text"],
#signup-form input[type="email"],
#signup-form input[type="password"],
#signup-form select,
.register-section input[type="text"],
.register-section input[type="email"],
.register-section input[type="password"],
.register-section select,
#buddypress input[type="text"],
#buddypress input[type="email"],
#buddypress input[type="password"],
#buddypress select,
.standard-form input[type="text"],
.standard-form input[type="email"],
.standard-form input[type="password"],
.standard-form select,
form#signup_form input[type="text"],
form#signup_form input[type="email"],
form#signup_form input[type="password"],
form#signup_form select {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   Form Groups / Rows
   ========================================================================== */

#signup-form .editfield,
#signup-form .register-section,
#buddypress .editfield,
.standard-form .editfield,
.standard-form > div,
form#signup_form > div,
form#signup_form .editfield,
.register-section > div,
.bb-signup-field,
body.register .bb-signup-field,
body.registration .bb-signup-field,
#buddypress .bb-signup-field,
.buddypress-wrap .bb-signup-field,
.standard-form .bb-signup-field {
    margin-bottom: 8px !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

/* Force tighter spacing on signup fields */
body.registration .register-section .bb-signup-field,
body.register .register-section .bb-signup-field,
.register-section.default-profile .bb-signup-field,
.page.register-page .bb-signup-field,
#buddypress .register-section .bb-signup-field {
    margin-bottom: 8px !important;
    margin-top: 0 !important;
}

/* Reduce spacing between label and input */
#signup-form label,
.register-section label,
#buddypress label,
.standard-form label,
form#signup_form label,
.bb-signup-field label {
    margin-bottom: 2px !important;
    padding-bottom: 0 !important;
}

/* Fix legend spacing */
body.register .register-section legend,
body.register .register-section legend,
body.registration .register-section legend,
.register-section legend,
#buddypress legend,
.standard-form legend {
    margin-bottom: 2px !important;
    padding-bottom: 0 !important;
}

/* ==========================================================================
   Checkbox Styling
   ========================================================================== */

/* Reset BuddyBoss styled checkbox */
.bp-checkbox-wrap {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 5px !important;
}

/* Show the actual checkbox, hide BuddyBoss custom styling */
.bp-checkbox-wrap input[type="checkbox"],
.bs-styled-checkbox {
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: checkbox !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Hide BuddyBoss custom checkbox pseudo-elements */
.bp-checkbox-wrap input[type="checkbox"] + label::before,
.bp-checkbox-wrap input[type="checkbox"] + label::after,
.bs-styled-checkbox + label::before,
.bs-styled-checkbox + label::after,
.checkbox-options input[type="checkbox"] + label::before,
.checkbox-options input[type="checkbox"] + label::after {
    display: none !important;
    content: none !important;
}

/* Checkbox label */
.bp-checkbox-wrap label,
.bp-checkbox-wrap .option-label {
    display: inline !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--vad-gray-700) !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Checkbox options container */
.checkbox-options,
.input-options.checkbox-options {
    margin-bottom: 20px !important;
}

/* ==========================================================================
   Submit Button
   ========================================================================== */

#signup-form input[type="submit"],
#signup-form button[type="submit"],
.register-section input[type="submit"],
.register-section button[type="submit"],
#buddypress input[type="submit"],
#buddypress button[type="submit"],
.standard-form input[type="submit"],
.standard-form button[type="submit"],
form#signup_form input[type="submit"],
form#signup_form button[type="submit"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 20px !important;
    background: var(--vad-accent) !important;
    color: white !important;
    border: none !important;
    border-radius: calc(var(--vad-radius) * 3) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: var(--vad-transition) !important;
    box-shadow: var(--vad-shadow-sm) !important;
    margin-top: 15px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: auto !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
    display: block !important;
    float: none !important;
    position: relative !important;
}

#signup-form input[type="submit"]:hover,
#signup-form button[type="submit"]:hover,
.register-section input[type="submit"]:hover,
.register-section button[type="submit"]:hover,
#buddypress input[type="submit"]:hover,
#buddypress button[type="submit"]:hover,
.standard-form input[type="submit"]:hover,
.standard-form button[type="submit"]:hover,
form#signup_form input[type="submit"]:hover,
form#signup_form button[type="submit"]:hover {
    background: var(--vad-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--vad-shadow) !important;
}

#signup-form input[type="submit"]:disabled,
#signup-form button[type="submit"]:disabled,
form#signup_form input[type="submit"]:disabled,
form#signup_form button[type="submit"]:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* ==========================================================================
   Password Toggle Button
   ========================================================================== */

.bb-password-toggle,
.password-toggle,
.show-hide-password,
.wp-pwd button {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    color: var(--vad-gray-500) !important;
    cursor: pointer !important;
    padding: 5px !important;
}

/* ==========================================================================
   Login Link Section
   ========================================================================== */

.register-section .login-link,
#signup-form .login-link,
.already-member,
.bb-register-form .login-link,
form#signup_form + p,
form#signup_form ~ p {
    text-align: center !important;
    margin-top: 25px !important;
    padding-top: 20px !important;
    border-top: 1px solid var(--vad-gray-200) !important;
    color: var(--vad-gray-600) !important;
    font-size: 14px !important;
}

.register-section .login-link a,
#signup-form .login-link a,
.already-member a,
.bb-register-form .login-link a,
form#signup_form + p a,
form#signup_form ~ p a {
    color: var(--vad-primary) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

.register-section .login-link a:hover,
#signup-form .login-link a:hover,
.already-member a:hover,
.bb-register-form .login-link a:hover,
form#signup_form + p a:hover,
form#signup_form ~ p a:hover {
    text-decoration: underline !important;
}

/* ==========================================================================
   Error Messages
   ========================================================================== */

#signup-form .error,
.register-section .error,
#buddypress .error,
.standard-form .error,
.bp-messages.bp-feedback,
form#signup_form .error {
    background: #fee !important;
    border-left: 4px solid #dc3545 !important;
    padding: 12px 15px !important;
    margin-bottom: 20px !important;
    border-radius: var(--vad-radius) !important;
    color: #dc3545 !important;
    font-size: 14px !important;
}

/* ==========================================================================
   Success / Completed Registration Messages
   ========================================================================== */

/* Ensure success/info messages are visible */
.bp-template-notice,
.bp-feedback,
.bp-messages,
#buddypress .bp-feedback,
#buddypress .info,
#buddypress .success,
#buddypress .bp-template-notice,
.register-section .info,
.register-section .success,
.registration-complete,
.completed-registration,
.activation-message,
[class*="success"],
[class*="complete"] p,
[class*="notice"],
#buddypress #template-notices,
.template-message,
.bp-registration-complete {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #e8f5e9 !important;
    border-left: 4px solid #28a745 !important;
    padding: 20px !important;
    margin: 20px 0 !important;
    border-radius: var(--vad-radius) !important;
    color: #2e7d32 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

/* Completed registration page content */
body.registration #buddypress > p,
body.register #buddypress > p,
.register-page > p,
.page.register-page p:not(label p),
#buddypress.buddypress-wrap > p,
.buddypress-wrap p.registration-message,
.entry-content > p {
    display: block !important;
    visibility: visible !important;
    color: var(--vad-gray-700) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 15px 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   Required Field Indicator
   ========================================================================== */

.required,
.bp-required-field-label,
label .required {
    color: var(--vad-accent) !important;
}

/* ==========================================================================
   Terms/Privacy Links
   ========================================================================== */

.register-section a,
#signup-form a:not(.button),
form#signup_form a:not([type="submit"]) {
    color: var(--vad-primary) !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   Hide Unwanted Elements
   ========================================================================== */

.register #secondary,
.register aside,
.register .sidebar,
.registration #secondary,
.registration aside,
.bp-register #secondary,
.bp-register aside,
#buddypress .dir-search,
#buddypress .item-list-tabs,
.register-section .privacy-policy-link:empty {
    display: none !important;
}

/* ==========================================================================
   Description/Help Text
   ========================================================================== */

#signup-form .description,
.register-section .description,
#buddypress .description,
.standard-form .description,
form#signup_form .description,
form#signup_form small {
    color: var(--vad-gray-600) !important;
    font-size: 12px !important;
    margin-top: 5px !important;
    display: block !important;
}

/* ==========================================================================
   Select Dropdown Styling
   ========================================================================== */

#signup-form select,
.register-section select,
#buddypress select,
.standard-form select,
form#signup_form select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c757d' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    padding-right: 40px !important;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 480px) {
    #buddypress.buddypress-wrap,
    .bb-register,
    .register-section,
    .bp-register-page,
    .register #primary,
    body.register main > * {
        margin: 20px auto !important;
        padding: 0 10px !important;
    }

    #signup-form,
    #register-page form,
    .register-section form,
    .standard-form,
    form#signup_form {
        padding: 30px 20px !important;
    }

    .register-section h1,
    .register-section h2,
    #signup-form h2,
    form#signup_form > h2 {
        font-size: 24px !important;
    }
}

/* ==========================================================================
   Focus States for Accessibility
   ========================================================================== */

*:focus-visible {
    outline: 2px solid var(--vad-primary) !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}