/*
 Theme Name:   Superio Child
 Theme URI:    https://domempleos.com
 Description:  Child theme para DomEmpleos.com - Portal de empleos RD
 Author:       DomEmpleos AG
 Author URI:   https://domempleos.com
 Template:     superio
 Version:      3.0.0
 Text Domain:  superio-child
*/

/* ============================================
   DOMEMPLEOS - ESTILOS GLOBALES
   Mejoras sutiles al tema padre.
   La homepage usa template-homepage.php
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ============================================
   HEADER - Moderno y limpio (TODAS las páginas)
   ============================================ */

/* Desktop header - OCULTAR HEADER ORIGINAL DEL TEMA */
#apus-header,
#apus-header.header-default,
#apus-header.visible-lg,
.apus-header,
header.site-header,
.site-header,
.header-default,
#apus-header-mobile {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* ============================================
   DOMEMPLEOS CUSTOM HEADER (independiente)
   ============================================ */
.de-main-header {
    display: block !important;
    visibility: visible !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #E8EBF0 !important;
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.04) !important;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
}

.de-header-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    height: 68px !important;
}

/* Logo */
.de-header-logo a {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

.de-header-logo img {
    max-height: 38px !important;
    width: auto !important;
}

.de-logo-text {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #1B4F8A !important;
    letter-spacing: -0.02em !important;
}

/* Navegación desktop */
.de-header-nav {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
}

.de-nav-list {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 4px !important;
}

.de-nav-list li {
    position: relative !important;
}

.de-nav-list li a {
    display: block !important;
    color: #3D3D5C !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.de-nav-list li a:hover,
.de-nav-list li.current-menu-item>a {
    color: #1B4F8A !important;
    background: rgba(27, 79, 138, 0.06) !important;
}

/* Sub-menus */
.de-nav-list li .sub-menu {
    display: none;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: #fff !important;
    border: 1px solid #E8EBF0 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    padding: 8px !important;
    min-width: 200px !important;
    z-index: 100000 !important;
    list-style: none !important;
}

.de-nav-list li:hover>.sub-menu {
    display: block !important;
}

.de-nav-list .sub-menu li a {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    padding: 10px 16px !important;
}

/* Acciones */
.de-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Mobile toggle */
.de-mobile-toggle {
    display: none !important;
    background: none !important;
    border: none !important;
    padding: 8px !important;
    cursor: pointer !important;
    color: #3D3D5C !important;
    border-radius: 8px !important;
}

.de-mobile-toggle:hover {
    background: #F3F6FC !important;
}

/* Mobile menu */
.de-mobile-menu {
    display: none;
    background: #fff !important;
    border-top: 1px solid #E8EBF0 !important;
    padding: 16px 24px !important;
}

.de-mobile-menu.active {
    display: block !important;
}

.de-mobile-nav-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
}

.de-mobile-nav-list li a {
    display: block !important;
    padding: 12px 16px !important;
    color: #3D3D5C !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: background 0.15s ease !important;
}

.de-mobile-nav-list li a:hover {
    background: #F3F6FC !important;
    color: #1B4F8A !important;
}

.de-mobile-nav-list .sub-menu {
    list-style: none !important;
    padding-left: 16px !important;
}

.de-mobile-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding-top: 16px !important;
    border-top: 1px solid #E8EBF0 !important;
}

.de-mobile-actions .de-auth-buttons {
    flex-direction: column !important;
}

.de-mobile-actions .de-btn-post-job {
    width: 100% !important;
    justify-content: center !important;
}

/* Responsive */
@media (max-width: 991px) {
    .de-header-nav {
        display: none !important;
    }

    .de-header-actions {
        display: none !important;
    }

    .de-mobile-toggle {
        display: flex !important;
        align-items: center !important;
    }
}



/* Logo */
.logo-in-theme img,
.site-branding img,
.navbar-brand img,
.header-logo img,
#apus-header .logo img {
    max-height: 38px !important;
    transition: all 0.2s ease !important;
}

/* === NAV LINKS Desktop === */
#apus-header .nav.navbar-nav>li>a,
.apus-header .nav.navbar-nav>li>a,
.main-menu .nav.navbar-nav>li>a,
.megamenu>.navbar-collapse>.navbar-nav>li>a {
    color: #3D3D5C !important;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    padding: 12px 16px !important;
    text-transform: none !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    border-radius: 8px !important;
}

#apus-header .nav.navbar-nav>li>a:hover,
.main-menu .nav.navbar-nav>li>a:hover {
    color: #1B4F8A !important;
    background: rgba(27, 79, 138, 0.05) !important;
}

/* Active menu item */
#apus-header .nav.navbar-nav>li.active>a,
#apus-header .nav.navbar-nav>li.current-menu-item>a,
.main-menu .nav.navbar-nav>li.active>a {
    color: #1B4F8A !important;
}

#apus-header .nav.navbar-nav>li.active>a::after,
#apus-header .nav.navbar-nav>li.current-menu-item>a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 2px !important;
    left: 16px !important;
    right: 16px !important;
    height: 2.5px !important;
    background: linear-gradient(90deg, #1B4F8A, #2D6BBF) !important;
    border-radius: 2px !important;
}

/* Dropdown menus */
#apus-header .nav.navbar-nav .dropdown-menu,
.megamenu .dropdown-menu,
.apus-megamenu .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid #E8EBF0 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    padding: 8px !important;
    margin-top: 4px !important;
    animation: deDropIn 0.2s ease !important;
}

@keyframes deDropIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#apus-header .nav.navbar-nav .dropdown-menu>li>a,
.megamenu .dropdown-menu>li>a {
    color: #3D3D5C !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
}

#apus-header .nav.navbar-nav .dropdown-menu>li>a:hover,
.megamenu .dropdown-menu>li>a:hover {
    background: #F3F6FC !important;
    color: #1B4F8A !important;
}

/* === HEADER RIGHT BUTTONS === */

/* Login/User button */
.top-wrapper-menu .btn-menu-account,
#apus-header .btn-menu-account,
.header-right .btn-menu-account {
    color: #3D3D5C !important;
    font-size: 16px !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
}

.top-wrapper-menu .btn-menu-account:hover,
#apus-header .btn-menu-account:hover {
    background: #F3F6FC !important;
    color: #1B4F8A !important;
}

/* "Publicar vacante" / Post Job button */
#apus-header .btn-theme,
#apus-header .btn-add-listing,
.header-right .btn-theme,
.header-right .btn,
a.btn-add-listing,
.submit-job .btn {
    background: linear-gradient(135deg, #E63946 0%, #C1272D 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 10px 22px !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 2px 8px rgba(230, 57, 70, 0.2) !important;
    transition: all 0.25s ease !important;
    text-transform: none !important;
}

#apus-header .btn-theme:hover,
.header-right .btn-theme:hover,
.header-right .btn:hover,
a.btn-add-listing:hover {
    background: linear-gradient(135deg, #CF2F3C 0%, #A11F26 100%) !important;
    box-shadow: 0 4px 16px rgba(230, 57, 70, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* Notification bell */
.message-top .message-notification,
#apus-header .message-notification {
    color: #6C6C8A !important;
    font-size: 16px !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

.message-top .message-notification:hover {
    color: #1B4F8A !important;
}

.message-top .unread-count,
.message-notification .unread-count {
    background: #E63946 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    min-width: 18px !important;
    height: 18px !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: -4px !important;
    right: -6px !important;
}

/* === TOPBAR (si existe) === */
.apus-topbar,
#apus-header .apus-topbar {
    background: #0F2847 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 12.5px !important;
    padding: 6px 0 !important;
    border-bottom: none !important;
}

.apus-topbar a,
#apus-header .apus-topbar a {
    color: rgba(255, 255, 255, 0.75) !important;
    transition: all 0.2s ease !important;
}

.apus-topbar a:hover {
    color: #ffffff !important;
}

/* === MOBILE HEADER === */
#apus-header-mobile,
.header-mobile {
    background: #ffffff !important;
    border-bottom: 1px solid #E8EBF0 !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
}

/* Mobile logo */
#apus-header-mobile .logo img,
.header-mobile .logo img {
    max-height: 32px !important;
}

/* Hamburger menu button */
.btn-showmenu,
.header-mobile .btn-showmenu {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
}

.btn-showmenu:hover {
    background: #F3F6FC !important;
}

.btn-showmenu span {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: #3D3D5C !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
}

/* Mobile offcanvas menu */
#apus-mobile-menu,
.apus-offcanvas {
    background: #ffffff !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1) !important;
}

#apus-mobile-menu .header-offcanvas {
    border-bottom: 1px solid #E8EBF0 !important;
    padding: 16px 0 !important;
}

/* Mobile nav links */
#apus-mobile-menu .navbar-offcanvas a,
.apus-offcanvas .navbar-offcanvas a {
    color: #3D3D5C !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid #F3F5F8 !important;
    transition: all 0.15s ease !important;
}

#apus-mobile-menu .navbar-offcanvas a:hover,
.apus-offcanvas .navbar-offcanvas a:hover {
    background: #F3F6FC !important;
    color: #1B4F8A !important;
    padding-left: 24px !important;
}

/* Mobile close button */
.btn-toggle-canvas,
.apus-offcanvas .btn-toggle-canvas {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    color: #3D3D5C !important;
    transition: all 0.2s ease !important;
}

.btn-toggle-canvas:hover {
    background: #FEE2E2 !important;
    color: #E63946 !important;
}

/* Mobile "Post Job" button */
#apus-mobile-menu .submit-job .btn,
.apus-offcanvas .submit-job .btn {
    background: linear-gradient(135deg, #E63946 0%, #C1272D 100%) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    padding: 14px 24px !important;
    margin: 16px 20px !important;
    text-align: center !important;
    font-size: 14px !important;
    box-shadow: 0 2px 8px rgba(230, 57, 70, 0.2) !important;
}

/* Overlay */
.over-dark {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(4px) !important;
}

/* ============================================
   FOOTER - Profesional (TODAS las páginas)
   ============================================ */

footer,
.apus-footer,
#apus-footer,
.footer-wrapper {
    background: linear-gradient(180deg, #0A1628 0%, #0F2847 100%) !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

footer h2,
footer h3,
footer h4,
.apus-footer h2,
.apus-footer h3,
.apus-footer h4,
#apus-footer h2,
#apus-footer h3,
#apus-footer h4,
footer .widget-title {
    color: #ffffff !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    margin-bottom: 16px !important;
}

footer a,
.apus-footer a,
#apus-footer a {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 13.5px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

footer a:hover,
.apus-footer a:hover {
    color: #ffffff !important;
    padding-left: 2px !important;
}

.footer-bottom,
.apus-copyright,
.footer-copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 16px 0 !important;
    font-size: 12.5px !important;
    color: rgba(255, 255, 255, 0.35) !important;
}

/* ============================================
   UTILIDADES GLOBALES
   ============================================ */

/* Transiciones suaves */
a,
button,
.btn,
input {
    transition: all 0.2s ease;
}

/* Scroll suave */
html {
    scroll-behavior: smooth;
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f5f5f5;
}

::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* Formularios */
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: #1B4F8A !important;
    box-shadow: 0 0 0 3px rgba(27, 79, 138, 0.08) !important;
    outline: none !important;
}


/* ============================================
   HEADER ACTIONS - Botones personalizados
   ============================================ */

/* Contenedor de acciones */
.de-header-action {
    margin-left: 8px !important;
}

/* Botón Iniciar Sesión */
.de-btn-login {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #3D3D5C !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.de-btn-login:hover {
    background: #F3F6FC !important;
    color: #1B4F8A !important;
}

.de-btn-login i {
    font-size: 15px !important;
}

/* Botón Registrarse */
.de-btn-register {
    display: inline-flex !important;
    align-items: center !important;
    color: #1B4F8A !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding: 8px 20px !important;
    border: 2px solid #1B4F8A !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    margin-left: 4px !important;
}

.de-btn-register:hover {
    background: #1B4F8A !important;
    color: #ffffff !important;
}

/* Botón Publicar Vacante */
.de-btn-post-job {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: linear-gradient(135deg, #E63946 0%, #C1272D 100%) !important;
    color: #ffffff !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(230, 57, 70, 0.2) !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
    letter-spacing: 0.02em !important;
}

.de-btn-post-job:hover {
    background: linear-gradient(135deg, #CF2F3C 0%, #A11F26 100%) !important;
    box-shadow: 0 4px 16px rgba(230, 57, 70, 0.3) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

.de-btn-post-job i {
    font-size: 12px !important;
}

/* Botón de usuario logueado */
.de-user-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 14px 6px 6px !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    color: #3D3D5C !important;
}

.de-user-btn:hover {
    background: #F3F6FC !important;
}

/* Avatar */
.de-user-avatar {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
    border: 2px solid #E8EBF0 !important;
}

.de-user-name {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #3D3D5C !important;
    max-width: 120px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.de-chevron {
    font-size: 10px !important;
    color: #8E8EA0 !important;
    transition: transform 0.2s ease !important;
}

.de-user-btn:hover .de-chevron {
    transform: rotate(180deg) !important;
}

/* Dropdown del usuario */
.top-wrapper-menu .inner-top-menu {
    background: #ffffff !important;
    border: 1px solid #E8EBF0 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    padding: 8px !important;
    min-width: 200px !important;
    animation: deDropIn 0.2s ease !important;
}

.top-wrapper-menu .inner-top-menu .topmenu-menu>li>a {
    display: block !important;
    padding: 10px 16px !important;
    color: #3D3D5C !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
}

.top-wrapper-menu .inner-top-menu .topmenu-menu>li>a:hover {
    background: #F3F6FC !important;
    color: #1B4F8A !important;
}

/* Auth buttons contenedor */
.de-auth-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* Responsive: ocultar texto en pantallas medianas */
@media (max-width: 1200px) {
    .de-user-name {
        display: none !important;
    }

    .de-btn-post-job span {
        display: none !important;
    }

    .de-btn-login span {
        display: none !important;
    }

    .de-btn-register {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }
}

/* ============================================
   USER DROPDOWN - Menú de usuario logueado
   ============================================ */

.top-wrapper-menu {
    position: relative !important;
}

.de-user-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    color: #3D3D5C !important;
    cursor: pointer !important;
}

.de-user-btn:hover {
    background: #F3F6FC !important;
}

.de-user-avatar {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #E8EDF5 !important;
}

.de-user-name {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #3D3D5C !important;
    max-width: 120px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.de-user-dropdown {
    display: none;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    margin-top: 8px !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
    min-width: 180px !important;
    z-index: 9999 !important;
    padding: 8px !important;
    border: 1px solid #E8EDF5 !important;
}

.de-user-dropdown.active {
    display: block !important;
}

.de-user-dropdown a {
    display: block !important;
    padding: 10px 16px !important;
    color: #3D3D5C !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
}

.de-user-dropdown a:hover {
    background: #F3F6FC !important;
    color: #1B4F8A !important;
}

/* ============================================
   LOGIN / REGISTRO - Diseño Premium Moderno
   ============================================ */

/* Page background */
.page-template-default .main-content-inner,
body.page .site-main,
.page .apus-listing-account {
    background: linear-gradient(135deg, #F0F4FF 0%, #E8ECF5 50%, #F5F0FF 100%) !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 20px !important;
}

/* Main form container */
.wp-job-board-pro-login-register-form,
.login-register-form-wrapper,
.box-login-register {
    max-width: 520px !important;
    width: 100% !important;
    margin: 0 auto !important;
    background: #ffffff !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 60px rgba(27, 79, 138, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    padding: 48px 40px !important;
    position: relative !important;
    overflow: hidden !important;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
}

/* Top decorative accent */
.wp-job-board-pro-login-register-form::before,
.login-register-form-wrapper::before,
.box-login-register::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #1B4F8A, #2D7DD2, #E63946) !important;
}

/* Tab navigation (Login / Register) */
.login-register-form-wrapper .nav-tabs,
.box-login-register .nav-tabs,
.wp-job-board-pro-login-register-form .nav-tabs,
.login-register-tabs,
ul.nav-tabs {
    display: flex !important;
    border: none !important;
    background: #F3F6FC !important;
    border-radius: 16px !important;
    padding: 4px !important;
    margin-bottom: 32px !important;
    gap: 4px !important;
    list-style: none !important;
}

.login-register-form-wrapper .nav-tabs>li,
.box-login-register .nav-tabs>li,
ul.nav-tabs>li {
    flex: 1 !important;
    margin: 0 !important;
}

.login-register-form-wrapper .nav-tabs>li>a,
.box-login-register .nav-tabs>li>a,
ul.nav-tabs>li>a {
    display: block !important;
    text-align: center !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: #8E8EA0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
}

.login-register-form-wrapper .nav-tabs>li>a:hover,
.box-login-register .nav-tabs>li>a:hover,
ul.nav-tabs>li>a:hover {
    color: #3D3D5C !important;
}

.login-register-form-wrapper .nav-tabs>li.active>a,
.box-login-register .nav-tabs>li.active>a,
ul.nav-tabs>li.active>a,
.login-register-form-wrapper .nav-tabs>li>a.active,
.box-login-register .nav-tabs>li>a.active {
    background: #ffffff !important;
    color: #1B4F8A !important;
    box-shadow: 0 2px 8px rgba(27, 79, 138, 0.12) !important;
}

/* Form headings */
.wp-job-board-pro-login-register-form h2,
.login-register-form-wrapper h2,
.box-login-register h2,
.box-login h2,
.box-register h2,
.login-form-wrapper h2,
.register-form-wrapper h2 {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #1A1A2E !important;
    margin-bottom: 8px !important;
    text-align: center !important;
}

/* Form subtitle/description */
.wp-job-board-pro-login-register-form p,
.login-form-wrapper>p,
.register-form-wrapper>p {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 14px !important;
    color: #8E8EA0 !important;
    text-align: center !important;
    margin-bottom: 24px !important;
}

/* Form labels */
.wp-job-board-pro-login-register-form label,
.login-form-wrapper label,
.register-form-wrapper label,
.box-login label,
.box-register label {
    display: block !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #3D3D5C !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.02em !important;
}

/* Input fields */
.wp-job-board-pro-login-register-form input[type="text"],
.wp-job-board-pro-login-register-form input[type="email"],
.wp-job-board-pro-login-register-form input[type="password"],
.wp-job-board-pro-login-register-form input[type="tel"],
.wp-job-board-pro-login-register-form select,
.login-form-wrapper input[type="text"],
.login-form-wrapper input[type="email"],
.login-form-wrapper input[type="password"],
.register-form-wrapper input[type="text"],
.register-form-wrapper input[type="email"],
.register-form-wrapper input[type="password"],
.register-form-wrapper input[type="tel"],
.register-form-wrapper select,
.box-login input[type="text"],
.box-login input[type="email"],
.box-login input[type="password"],
.box-register input[type="text"],
.box-register input[type="email"],
.box-register input[type="password"],
.box-register input[type="tel"],
.box-register select {
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 500 !important;
    color: #1A1A2E !important;
    background: #F8F9FC !important;
    border: 2px solid #E8EBF0 !important;
    border-radius: 12px !important;
    outline: none !important;
    transition: all 0.25s ease !important;
    margin-bottom: 16px !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
}

.wp-job-board-pro-login-register-form input:focus,
.login-form-wrapper input:focus,
.register-form-wrapper input:focus,
.box-login input:focus,
.box-register input:focus,
.wp-job-board-pro-login-register-form select:focus {
    background: #ffffff !important;
    border-color: #1B4F8A !important;
    box-shadow: 0 0 0 4px rgba(27, 79, 138, 0.1) !important;
}

.wp-job-board-pro-login-register-form input::placeholder,
.login-form-wrapper input::placeholder,
.register-form-wrapper input::placeholder {
    color: #B0B0C8 !important;
    font-weight: 400 !important;
}

/* Form groups / rows */
.wp-job-board-pro-login-register-form .form-group,
.login-form-wrapper .form-group,
.register-form-wrapper .form-group,
.box-login .form-group,
.box-register .form-group {
    margin-bottom: 20px !important;
}

/* Remember me & forgot password */
.wp-job-board-pro-login-register-form .lost_password,
.login-form-wrapper .lost_password,
.box-login .lost_password {
    text-align: right !important;
    margin-bottom: 20px !important;
}

.wp-job-board-pro-login-register-form .lost_password a,
.login-form-wrapper .lost_password a,
.box-login .lost_password a,
.login-form-wrapper a[href*="forgot"],
a[href*="forgot-password"] {
    color: #1B4F8A !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.wp-job-board-pro-login-register-form .lost_password a:hover,
.login-form-wrapper .lost_password a:hover,
a[href*="forgot-password"]:hover {
    color: #E63946 !important;
}

/* Submit buttons */
.wp-job-board-pro-login-register-form input[type="submit"],
.wp-job-board-pro-login-register-form button[type="submit"],
.wp-job-board-pro-login-register-form .btn-submit,
.login-form-wrapper input[type="submit"],
.login-form-wrapper button[type="submit"],
.register-form-wrapper input[type="submit"],
.register-form-wrapper button[type="submit"],
.box-login input[type="submit"],
.box-login button[type="submit"],
.box-register input[type="submit"],
.box-register button[type="submit"],
.login-form-wrapper .btn,
.register-form-wrapper .btn {
    width: 100% !important;
    padding: 16px 24px !important;
    font-size: 15px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #1B4F8A 0%, #2D7DD2 100%) !important;
    border: none !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 4px 16px rgba(27, 79, 138, 0.25) !important;
    margin-top: 8px !important;
}

.wp-job-board-pro-login-register-form input[type="submit"]:hover,
.wp-job-board-pro-login-register-form button[type="submit"]:hover,
.login-form-wrapper input[type="submit"]:hover,
.register-form-wrapper input[type="submit"]:hover,
.login-form-wrapper .btn:hover,
.register-form-wrapper .btn:hover,
.box-login input[type="submit"]:hover,
.box-register input[type="submit"]:hover {
    background: linear-gradient(135deg, #153F6E 0%, #1B5FAA 100%) !important;
    box-shadow: 0 6px 24px rgba(27, 79, 138, 0.35) !important;
    transform: translateY(-1px) !important;
}

/* Social login (Google) */
.wp-job-board-pro-login-register-form .social-login,
.login-form-wrapper .social-login,
.box-login .social-login,
.social-login-wrapper,
.login-social {
    margin-top: 24px !important;
    padding-top: 24px !important;
    border-top: 1px solid #E8EBF0 !important;
    text-align: center !important;
}

.wp-job-board-pro-login-register-form .social-login a,
.login-form-wrapper .social-login a,
.social-login-wrapper a,
.social-login a,
.login-social a,
a.apus-social-login {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 600 !important;
    color: #3D3D5C !important;
    background: #ffffff !important;
    border: 2px solid #E8EBF0 !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    margin-bottom: 10px !important;
}

.wp-job-board-pro-login-register-form .social-login a:hover,
.social-login a:hover,
a.apus-social-login:hover {
    background: #F8F9FC !important;
    border-color: #CBD0DC !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* OR divider */
.wp-job-board-pro-login-register-form .or-text,
.login-form-wrapper .or-text,
.social-login-wrapper .or-text,
.line-or {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 24px 0 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #B0B0C8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}

.or-text::before,
.or-text::after,
.line-or::before,
.line-or::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: #E8EBF0 !important;
}

/* Role selection (Candidato / Empresa) */
.wp-job-board-pro-login-register-form .role-tabs,
.register-form-wrapper .role-tabs,
.register-form-wrapper .form-register-role,
.box-register .register-tabs,
.register-account-type,
.user-role-selector {
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
}

.register-account-type label,
.user-role-selector label,
.role-tabs label,
.form-register-role label {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #8E8EA0 !important;
    background: #F8F9FC !important;
    border: 2px solid #E8EBF0 !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

.register-account-type label:hover,
.user-role-selector label:hover,
.role-tabs label:hover,
.form-register-role label:hover {
    border-color: #CBD0DC !important;
    background: #ffffff !important;
}

.register-account-type input[type="radio"]:checked+label,
.register-account-type label.active,
.user-role-selector label.active,
.role-tabs label.active,
.form-register-role label.active {
    border-color: #1B4F8A !important;
    background: rgba(27, 79, 138, 0.06) !important;
    color: #1B4F8A !important;
}

/* Checkbox (terms, remember me) */
.wp-job-board-pro-login-register-form input[type="checkbox"],
.login-form-wrapper input[type="checkbox"],
.register-form-wrapper input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #CBD0DC !important;
    border-radius: 4px !important;
    margin-right: 8px !important;
    accent-color: #1B4F8A !important;
    cursor: pointer !important;
}

/* Terms text */
.wp-job-board-pro-login-register-form .terms-and-conditions,
.register-form-wrapper .terms-and-conditions {
    font-size: 12.5px !important;
    color: #8E8EA0 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    line-height: 1.5 !important;
}

.wp-job-board-pro-login-register-form .terms-and-conditions a,
.register-form-wrapper .terms-and-conditions a {
    color: #1B4F8A !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.wp-job-board-pro-login-register-form .terms-and-conditions a:hover,
.register-form-wrapper .terms-and-conditions a:hover {
    color: #E63946 !important;
}

/* Switch form link (¿No tienes cuenta? Regístrate) */
.wp-job-board-pro-login-register-form .switch-form,
.login-form-wrapper .create-account-link,
.register-form-wrapper .have-account-link {
    text-align: center !important;
    margin-top: 24px !important;
    font-size: 13.5px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: #8E8EA0 !important;
}

.wp-job-board-pro-login-register-form .switch-form a,
.login-form-wrapper .create-account-link a,
.register-form-wrapper .have-account-link a {
    color: #1B4F8A !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* Error messages */
.wp-job-board-pro-login-register-form .alert,
.wp-job-board-pro-login-register-form .error,
.login-form-wrapper .alert,
.register-form-wrapper .alert,
.box-login .alert,
.box-register .alert {
    padding: 12px 16px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 500 !important;
    margin-bottom: 16px !important;
}

.wp-job-board-pro-login-register-form .alert-danger,
.login-form-wrapper .alert-danger,
.register-form-wrapper .alert-danger {
    background: #FFF0F0 !important;
    border: 1px solid #FECACA !important;
    color: #C1272D !important;
}

.wp-job-board-pro-login-register-form .alert-success,
.login-form-wrapper .alert-success,
.register-form-wrapper .alert-success {
    background: #F0FFF4 !important;
    border: 1px solid #C6F6D5 !important;
    color: #276749 !important;
}

/* Password reset form */
.forgot-password-form,
[id*="forgot-password"] {
    max-width: 520px !important;
    margin: 0 auto !important;
}

/* Hide unnecessary page title */
.page-template-default .page-title-bar,
.page-template-default .apus-breadscrumb,
.page-template-default .breadcrumb-bar {
    display: none !important;
}

/* Responsive adjustments */
@media (max-width: 576px) {

    .wp-job-board-pro-login-register-form,
    .login-register-form-wrapper,
    .box-login-register {
        padding: 32px 24px !important;
        border-radius: 20px !important;
        margin: 16px !important;
    }

    .wp-job-board-pro-login-register-form h2,
    .login-register-form-wrapper h2,
    .box-login-register h2 {
        font-size: 20px !important;
    }

    .register-account-type,
    .user-role-selector,
    .role-tabs {
        flex-direction: column !important;
    }

    .wp-job-board-pro-login-register-form input[type="text"],
    .wp-job-board-pro-login-register-form input[type="email"],
    .wp-job-board-pro-login-register-form input[type="password"],
    .wp-job-board-pro-login-register-form select {
        padding: 12px 14px !important;
        font-size: 16px !important;
        /* prevent iOS zoom */
    }

    .wp-job-board-pro-login-register-form input[type="submit"],
    .wp-job-board-pro-login-register-form button[type="submit"] {
        padding: 14px 20px !important;
        font-size: 14px !important;
    }
}

/* Tab content panels */
.wp-job-board-pro-login-register-form .tab-content,
.login-register-form-wrapper .tab-content,
.box-login-register .tab-content {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

.wp-job-board-pro-login-register-form .tab-pane,
.login-register-form-wrapper .tab-pane,
.box-login-register .tab-pane {
    padding: 0 !important;
}

/* Fix any Bootstrap overrides */
.wp-job-board-pro-login-register-form .form-control {
    height: auto !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 500 !important;
    color: #1A1A2E !important;
    background: #F8F9FC !important;
    border: 2px solid #E8EBF0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    transition: all 0.25s ease !important;
}

.wp-job-board-pro-login-register-form .form-control:focus {
    background: #ffffff !important;
    border-color: #1B4F8A !important;
    box-shadow: 0 0 0 4px rgba(27, 79, 138, 0.1) !important;
}