/* CRITICAL FIX: Match Liquid Glass specificity */

/* Override Liquid Glass white text with visible colors */
html[data-layout='liquid-glass-layout'] .auth-wrapper h1,
html[data-layout='liquid-glass-layout'] .auth-wrapper h2,
html[data-layout='liquid-glass-layout'] .auth-wrapper h3,
html[data-layout='liquid-glass-layout'] .auth-wrapper h4,
html[data-layout='liquid-glass-layout'] .auth-wrapper h5,
html[data-layout='liquid-glass-layout'] .auth-wrapper h6,
html[data-layout='liquid-glass-layout'] .auth-wrapper p,
html[data-layout='liquid-glass-layout'] .auth-wrapper span,
html[data-layout='liquid-glass-layout'] .auth-wrapper label,
html[data-layout='liquid-glass-layout'] .auth-wrapper .form-label,
html[data-layout='liquid-glass-layout'] .auth-wrapper a,
html[data-layout='liquid-glass-layout'] .auth-wrapper div,
html[data-layout='liquid-glass-layout'] .auth-wrapper .bs-stepper-title,
html[data-layout='liquid-glass-layout'] .auth-wrapper .bs-stepper-subtitle,
html[data-layout='liquid-glass-layout'] .auth-wrapper .content-header {
    color: rgba(34, 41, 47, 0.9) !important;
}

html[data-layout='liquid-glass-layout'] .auth-wrapper input.form-control,
html[data-layout='liquid-glass-layout'] .auth-wrapper select.form-control,
html[data-layout='liquid-glass-layout'] .auth-wrapper textarea.form-control {
    color: rgba(34, 41, 47, 0.9) !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(34, 41, 47, 0.2) !important;
}

html[data-layout='liquid-glass-layout'] .auth-wrapper input.form-control::placeholder {
    color: rgba(34, 41, 47, 0.5) !important;
}

html[data-layout='liquid-glass-layout'] .auth-wrapper .btn {
    color: white !important;
}

html[data-layout='liquid-glass-layout'] .auth-wrapper .input-group-text {
    color: rgba(34, 41, 47, 0.9) !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(34, 41, 47, 0.2) !important;
}

html[data-layout='liquid-glass-layout'] .select2-selection,
html[data-layout='liquid-glass-layout'] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: rgba(34, 41, 47, 0.9) !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
}

html[data-layout='liquid-glass-layout'] .custom-option-item {
    background-color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(115, 103, 240, 0.3) !important;
    color: rgba(34, 41, 47, 0.9) !important;
}

html[data-layout='liquid-glass-layout'] .custom-option-item * {
    color: rgba(34, 41, 47, 0.9) !important;
}

html[data-layout='liquid-glass-layout'] .custom-option-item-check:checked ~ .custom-option-item {
    background-color: rgba(115, 103, 240, 0.15) !important;
    border-color: rgb(115, 103, 240) !important;
}

html[data-layout='liquid-glass-layout'] .form-check-label {
    color: rgba(34, 41, 47, 0.9) !important;
}

html[data-layout='liquid-glass-layout'] .auth-wrapper small,
html[data-layout='liquid-glass-layout'] .auth-wrapper .form-text {
    color: rgba(34, 41, 47, 0.7) !important;
}

html[data-layout='liquid-glass-layout'] .alert {
    color: rgba(34, 41, 47, 0.9) !important;
}
/* Fix the white background issue */
.auth-wrapper .auth-bg,
.auth-wrapper .width-700,
.auth-wrapper .bs-stepper,
.auth-wrapper .bs-stepper-content {
    background-color: transparent !important;
}

/* Make the main card have a dark semi-transparent background */
.auth-wrapper .bs-stepper.register-multi-steps-wizard {
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 1rem !important;
    padding: 2rem !important;
}

/* Ensure content areas are transparent */
.content.get_form_data {
    background: transparent !important;
}