/**
 * Filename:      ttsbo-members.css
 * Plugin:        TTSBO Members MU
 * Description:   Professional styles for member forms, including fixed line-height and font-size synchronisation.
 * Version:       1.3.2
 * Author:        André Gansel
 * Text Domain:   ttsbo_lang
 */


/* Removes standard Salient theme bottom padding from paragraphs within all member forms */
.gwr-member-login p,
.gwr-member-registration p,
.ttsbo-lost-password-form p,
.gwr-member-verification p,
.ttsbo-reset-password-form p {
    padding-bottom: 10px !important;
}

/* Override browser autofill background with custom white */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Grouped selectors for font-size and line-height synchronisation */
.ttsbo-auth-actions button,
.ttsbo-auth-actions .ttsbo-primary-button,
.ttsbo-auth-actions .ttsbo-ghost-button,
.ttsbo-auth-actions label,
.gwr-member-registration button {
    font-size: 16px !important;
    line-height: 16px !important;
}

/* Main action container for the login and registration forms */
.ttsbo-auth-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between !important;
    margin-top: 25px;
    gap: 15px;
}

/* Label styling for form checkboxes */
.ttsbo-auth-actions label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    font-size: 13.5px !important;
}

/* Nectar-style primary and ghost buttons with equal width logic */
.ttsbo-auth-actions button,
.ttsbo-auth-actions .ttsbo-primary-button,
.ttsbo-auth-actions .ttsbo-ghost-button,
.gwr-member-registration button {
    flex: 0 0 160px;
    text-align: center;
    border-radius: 50px;
    padding: 10px 25px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-block;
    text-decoration: none;
    box-sizing: border-box;
    white-space: nowrap !important;
}

/* Background and border settings for primary action buttons */
.ttsbo-auth-actions button,
.ttsbo-auth-actions .ttsbo-primary-button,
.gwr-member-registration button {
    background-color: var(--nectar-accent-color);
    color: #ffffff;
    border: none;
}

/* Styling for the secondary ghost (see-through) button */
.ttsbo-ghost-button {
    background-color: transparent;
    color: var(--nectar-accent-color);
    border: 1px solid var(--nectar-accent-color);
    text-decoration: none;
    white-space: nowrap;
}

.ttsbo-ghost-button:hover {
    background-color: var(--nectar-accent-color);
    color: #ffffff;
}

/* --- DOI Verification Specifics --- */

/* Centers only the block containing the activation code label and input */
.ttsbo-centered-block {
    text-align: center !important;
    margin-top: 15px;
}

.ttsbo-centered-block label {
    display: block !important;
    text-align: center !important;
    margin-bottom: 10px;
}

/* Large centered input field for the 6-digit activation code */
#doi_code {
    display: block !important;
    width: 100% !important;
    max-width: 320px !important;
    height: 60px !important;
    margin: 10px auto !important;
    text-align: center !important;
    font-size: 26px !important;
    letter-spacing: 12px !important;
    font-weight: bold !important;
    border: 2px solid #eaeaea;
    border-radius: 8px;
    background-color: #fdfdfd;
}

#doi_code:focus {
    border-color: var(--nectar-accent-color) !important;
    outline: none;
}

/* Ensures dynamic text line follows standard paragraph styling */
.ttsbo-dynamic-email-line {
    margin-bottom: 15px;
    line-height: 1.6;
}

/* --- UI Controls: Password Toggle & Clear Button --- */

/* Relative container to allow absolute positioning of icons inside inputs */
.ttsbo-field-container {
    position: relative;
    width: 100%;
    margin-bottom: 35px;
}

/* Increased right padding to prevent text overlapping with icons */
.ttsbo-field-container input:not(.ttsbo-centered-block .ttsbo-field-container input) {
    padding-right: 45px !important;
}

/* Shared styling for interactive field icons */
.ttsbo-field-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

/* Styling for the clear (X) button */
.ttsbo-field-clear {
    color: #cccccc;
    font-size: 18px;
    display: none; /* Hidden by default, shown via JS on input */
}

.ttsbo-field-clear:hover {
    color: #999999;
}

/* Styling for the password visibility toggle (Eye) */
.ttsbo-field-toggle {
    color: var(--nectar-accent-color);
    opacity: 0.6;
}

.ttsbo-field-toggle:hover {
    opacity: 1;
}

/* Hide native browser icons to prevent visual conflicts */
input::-ms-clear, 
input::-ms-reveal {
    display: none;
}

input::-webkit-search-cancel-button {
    display: none;
}

/* --- Responsive Adjustments for Mobile Devices --- */

@media only screen and (max-width: 767px) {
    /* Reverses the order of action buttons for better thumb accessibility on mobile */
    .ttsbo-auth-actions {
        flex-direction: row-reverse !important;
    }

    .gwr-member-login p,
    .gwr-member-registration p,
    .ttsbo-lost-password-form p,
    .gwr-member-verification p,
    .ttsbo-reset-password-form p {
        padding-bottom: 0 !important;
    }

    #mobile-teachable-hint {

        font-size: 14px;
        line-height: 20px;

    }

}