#sp-header {
    background-color: #ffffff !important;
}

#sp-header.header-sticky #sp-logo .logo .logo-image {
    filter: none !important;
}

/* Customization for Community Builder Login Form (Joomla 6) */

/* Title "Acceso al Área Privada" */
.cbLoginForm:before {
    content: "Acceso al Área Privada";
    display: block;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 25px;
    color: var(--sppb-text-primary);
    border-left: 4px solid var(--sppb-color-secondary);
    padding-left: 15px;
}

/* Hide Passkey and Forgot Username options */
.cbLoginForm .plg_system_webauthn_login_button,
.cbLoginForm .mod-login__submit:has(.plg_system_webauthn_login_button),
.cbLoginForm .form-login-options-forgot-username {
    display: none !important;
}

/* Input sizes: 50% on desktop, 100% on mobile */
@media (min-width: 992px) {
    .cbLoginForm .mod-login__userdata .form-group {
        max-width: 50%;
    }
}

/* Style login links as horizontal buttons */
.cbLoginForm .mod-login__options.list-unstyled {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
    padding: 0;
    margin-top: 15px;
    list-style: none;
}

.cbLoginForm .mod-login__options li {
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 250px;
    /* Adjust for responsiveness */
}

.cbLoginForm .mod-login__options li a {
    display: block;
    width: 100%;
    padding: 12px 20px;
    background-color: var(--sppb-color-secondary);
    color: #ffffff !important;
    text-align: center;
    border-radius: 4px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.1s ease;
}

.cbLoginForm .mod-login__options li a:hover {
    background-color: var(--sppb-color-primary);
    text-decoration: none;
}

.cbLoginForm .mod-login__options li a:active {
    transform: translateY(1px);
}

/* Fix Icons (User and Password Eye) */
.cbLoginForm .icon-user:before {
    content: "\f007";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.cbLoginForm .icon-eye:before {
    content: "\f06e";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* Style icon containers: transparent background and theme colors */
.cbLoginForm .input-group-text,
.cbLoginForm .input-password-toggle {
    background-color: transparent !important;
    border-color: #dedede !important;
    color: var(--sppb-color-secondary) !important;
    padding: 0 15px;
}

.cbLoginForm .input-password-toggle:hover {
    background-color: #f5f5f5 !important;
}



#sp-header.header-sticky #sp-menu .sp-megamenu-parent>li.active>a {
    color: #ef3340;
}

.sp-megamenu-parent>li.active>a,
.sp-megamenu-parent>li.active>a {
    color: #ef3340;
}

.sp-megamenu-parent>li.active>a,
.sp-megamenu-parent>li.active:hover>a {
    color: #ef3340;
}

.home-article-listing .sppb-row>.sppb-addon-article-layout:first-child {
    max-width: initial;
}

.home-article-listing .sppb-row>.sppb-addon-article-layout:last-child {
    max-width: initial;
}

.burger-icon>span {
    background-color: var(--sppb-color-secondary) !important;
}

.create {
    color: #ffffff !important;
}

.view-article .article-header-container .article-header-info .article-header {
    color: #ffffff !important;
}

.offcanvas-menu .logo .logo-image {
    filter: initial !important;
}

/* Replace long user name in header with a shorter text to avoid layout issues */
.sp-profile-wrapper .sp-sign-in .user-text {
    font-size: 0 !important;
    /* Hide original name */
    color: transparent !important;
}

.sp-profile-wrapper .sp-sign-in .user-text:before {
    content: "Mis Datos";
    font-size: 14px !important;
    /* Force visible size */
    font-weight: 600;
    color: #252525 !important;
    /* Specific dark color to be visible on white header */
    display: inline-block;
    visibility: visible;
    margin-right: 5px;
}


.sp-profile-wrapper .sp-profile-dropdown {
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 3px;
    padding: 10px 5px !important;
    list-style: none !important;
    font-size: 14px;
    position: absolute;
    min-width: 300px;
    /* right: 0; */
    top: 100%;
    display: none !important;
}

    
input.cbLoginForm {
    margin:5px !important;
}