/* css/custom-common-form-styles.css */

/* ==========================================================================
   Initial Style/Placeholder for Select2 Native Elements
   ========================================================================== */

.custom-form-container-base select.use-select2:not(.select2-hidden-accessible) {
    display: block;
    width: 100%;
    height: 48px;
    margin-bottom: 15px;
    padding: 11px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
    color: #333;
    font-size: 16px;
    line-height: 1.5;
    opacity: 0.01;
    pointer-events: none;
    position: relative;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}


/* ==========================================================================
   Form Container, Labels, Inputs, Buttons
   ========================================================================== */

#mobile-add-channel-popup .popup-content.custom-form-container-base,
.custom-form-container-base {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 60px 50px 45px 50px;
    border: 1px solid #ddd;
    border-radius: 28px;
    background-color: #F8F7F7; /* Form Background */
    box-sizing: border-box;
    transition: box-shadow 0.5s ease-in-out,
                border-color 0.5s ease-in-out;
    position: relative;
    /*box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.05);  Optional - but I don't want it right now */
}

/* MODIFIED: All .daluna-floating-label-group input styles have been moved to daluna-styles.css */

/* Password input with show/hide toggle specific padding */
.custom-form-container-base .daluna-floating-label-group input.input-with-validation-icon,
.custom-form-container-base .daluna-floating-label-group .password-field-container input.show-hide-password {
    padding-right: 48px !important;
}

/* MODIFIED: All label and disabled input rules are now global */

/* Container for the validation icon (e.g., for username availability) */
.custom-form-container-base .daluna-floating-label-group .validation-icon-area {
    position: absolute;
    right: 15px; 
    top: 50%;
    transform: translateY(-50%);
    z-index: 3; 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px; 
    height: 24px; 
    font-size: 16px; 
    line-height: 1;
}

.custom-form-container-base .daluna-floating-label-group .validation-icon-area i.fa-check {
    color: #28a745; 
}

.custom-form-container-base .daluna-floating-label-group .validation-icon-area i.fa-times {
    color: red; 
}

.custom-form-container-base .daluna-floating-label-group .validation-icon-area i.fa-spinner {
    color: #757575; 
}

/* MODIFICATION: Removed transition and outline properties to centralize them */
.custom-form-container-base select:not(.use-select2) {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px;
    padding: 11px 12px;
    height: 48px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.5;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23757575'%3E%3Cpath fill-rule='evenodd' d='M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 35px;
}

/* ==========================================================================
   Password Field Specific Styling
   ========================================================================== */

.custom-form-container-base .password-field-container {
    position: relative;
}

/* This rule targets password inputs that have the show/hide toggle */
.custom-form-container-base .daluna-floating-label-group .password-field-container input.show-hide-password {
    padding-right: 48px !important; 
}
/* This rule seems more general, possibly for password inputs that might not always have the class but are in the container */
.custom-form-container-base .password-field-container input.show-hide-password:not([id*="reg-password"]):not([id*="new-password"]):not([id*="current-password"]) {
    padding-right: 48px !important;
}


.custom-form-container-base .password-field-container .toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 3;
    padding: 6px;
    line-height: 1;
}

.custom-form-container-base .password-field-container .toggle-password i {
    font-size: 18px;
    color: #AAAAAA;
    display: block;
}


/* ==========================================================================
   Button Styling
   ========================================================================== */

#mobile-add-channel-form button,
.custom-form-container-base button[type="submit"],
.custom-form-container-base button.button-primary-action {
    width: 100%;
    padding: 16px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #b05cfd;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center;
    display: inline-block;
    line-height: normal;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.custom-form-container-base button[type="submit"]:hover,
.custom-form-container-base button.button-primary-action:hover:not(:disabled) {
    background-color: #8341bf;
}

.custom-form-container-base button.button-primary-action:disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    opacity: 0.7;
}


/* ==========================================================================
   Feedback Messages & Expandable Elements Styling
   ========================================================================== */

/* --- MODIFICATION START: All feedback message, animation helper, and spinner styles have been removed. --- */
/* They are now self-contained in css/common-feedback-message.css */

.password-requirements-list-container {
    margin-bottom: 15px;
}

.password-strength-feedback {
    font-size: 15px;
    text-align: left;
    margin-bottom: 5px;
    font-weight: bold;
}

.custom-form-container-base .password-strength-feedback.form-feedback-success {
    color: green !important;
}

.custom-form-container-base .password-strength-feedback.form-feedback-warning {
    color: #ffa500 !important;
}

.custom-form-container-base .password-strength-feedback.form-feedback-weak {
    color: #6c757d !important;
}
/* --- MODIFICATION END --- */


.password-requirements-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.password-check {
    font-size: 15px;
    margin-bottom: 4px;
    line-height: 1.4;
    color: #6c757d;
}

.password-check i {
    margin-right: 6px;
    width: 16px;
    text-align: center;
    display: inline-block;
    color: #6c757d;
}

.password-check.success {
    color: #28a745;
}

.password-check.success i {
    color: #28a745;
}


.form-honeypot-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
    pointer-events: none;
}

/* --- NEW UTILITY CLASS START --- */
/* A more forceful class to hide a form field while ensuring its value is submitted. */
.form-field-hidden-submitted {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border: none !important;
}
/* --- NEW UTILITY CLASS END --- */

.form-field-small-text {
    font-size: 14px;
    color: #555;
    margin-top: 5px;
    margin-bottom: 10px;
    text-align: justify;
}

/* --- MODIFICATION START: Added style override for use inside flexbox layouts --- */
.daluna-checkbox-group .form-field-small-text {
    margin: 0;
    padding: 0;
}
/* --- MODIFICATION END --- */

.form-field-small-text a {
    color: #007bff;
    text-decoration: underline;
    cursor: pointer;
}

.form-field-small-text a:hover {
    text-decoration: none;
}