/* Ella Tasks client theme overrides for WHMCS twenty-one */
   Ella Tasks – WHMCS Custom Theme Override
   Paleta de marca: Lavanda (#A78BFA), Púrpura (#8B5CF6), Índigo (#6D28D9)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables CSS / Design Tokens
   -------------------------------------------------------------------------- */
:root {
    --accent-1: #A78BFA;
    --accent-2: #8B5CF6;
    --accent-dark: #6D28D9;
    --bg-main: #F0EEFF;
    --bg-secondary: #F5F3FF;
    --text-main: #1E1B4B;
    --text-muted: #6B7280;
    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-border: rgba(167, 139, 250, 0.2);
    --radius-card: 20px;
    --radius-pill: 100px;
    --shadow-soft: 0 8px 32px rgba(109, 40, 217, 0.08);
    --shadow-hover: 0 12px 40px rgba(109, 40, 217, 0.15);
    --font-main: 'Inter', 'Outfit', sans-serif;
}

/* --------------------------------------------------------------------------
   2. Fuente global y fondo de página
   -------------------------------------------------------------------------- */

body {
    font-family: var(--font-main) !important;
    background: linear-gradient(160deg, #F0EEFF 0%, #F5F3FF 50%, #EDE9FE 100%) !important;
    background-attachment: fixed !important;
    color: var(--text-main) !important;
    min-height: 100vh;
}

/* --------------------------------------------------------------------------
   3. Header / Navegación
   -------------------------------------------------------------------------- */
.navbar,
.navbar-default,
nav.navbar {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    box-shadow: 0 2px 24px rgba(109, 40, 217, 0.06) !important;
    padding: 10px 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1050 !important;
}

.navbar-brand,
.navbar-brand:hover {
    padding: 0 !important;
}

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

/* Ocultar hamburguesa en desktop */
@media (min-width: 992px) {
    .navbar-toggler,
    .navbar-toggle,
    button.navbar-toggler {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* Hamburguesa visible solo en móvil */
@media (max-width: 991px) {
    .navbar-toggler {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* Nav links */
.navbar-nav .nav-link,
.navbar-nav > li > a {
    font-weight: 600 !important;
    color: var(--text-main) !important;
    font-size: 0.92rem !important;
    transition: color 0.2s ease !important;
    padding: 8px 14px !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav > li > a:hover {
    color: var(--accent-2) !important;
}

/* Carrito button */
.cart-link,
a[href*="cart"],
.nav-link.cart-link {
    background: rgba(167, 139, 250, 0.1) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-pill) !important;
    padding: 8px 18px !important;
    color: var(--accent-2) !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}

.cart-link:hover {
    background: var(--accent-2) !important;
    color: white !important;
}

/* --------------------------------------------------------------------------
   Dropdowns del Menu (Corregido alineación Tienda)
   -------------------------------------------------------------------------- */
.navbar .dropdown-menu {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-hover) !important;
    padding: 8px !important;
    z-index: 9999 !important;
    margin-top: 8px !important;
    min-width: 200px !important;
    
    /* Por defecto alinear a la izquierda para evitar problemas en menú central */
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
}

/* Alineación a la DERECHA explícita SOLO para "Mi Cuenta" y menús derechos */
.navbar-nav.justify-content-end .dropdown-menu,
.navbar-nav.ml-auto .dropdown-menu,
.navbar-right .dropdown-menu,
li.dropdown-account .dropdown-menu {
    left: auto !important;
    right: 0 !important;
}

.navbar .dropdown-menu .dropdown-item,
.navbar .dropdown-menu > li > a {
    border-radius: 10px !important;
    padding: 10px 16px !important;
    font-weight: 500 !important;
    color: var(--text-main) !important;
    transition: background 0.2s ease !important;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu > li > a:hover {
    background: rgba(167, 139, 250, 0.12) !important;
    color: var(--accent-2) !important;
}

.navbar .dropdown {
    position: static !important;
}

.navbar .nav-item.dropdown {
    position: relative !important;
}

/* --------------------------------------------------------------------------
   4. Contenedores y Cards principales
   -------------------------------------------------------------------------- */
.container,
.container-fluid {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.panel,
.card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-soft) !important;
}

.panel-heading,
.card-header {
    background: rgba(167, 139, 250, 0.08) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
}

/* --------------------------------------------------------------------------
   5. Botones globales
   -------------------------------------------------------------------------- */
.btn-primary,
.btn-info {
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2)) !important;
    border: none !important;
    color: white !important;
    font-weight: 600 !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: 0 4px 15px rgba(167, 139, 250, 0.3) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.btn-primary:hover,
.btn-info:hover {
    box-shadow: 0 6px 20px rgba(167, 139, 250, 0.5) !important;
    transform: translateY(-1px) !important;
    color: white !important;
}

.btn-success {
    background: linear-gradient(135deg, #34D399, #10B981) !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 600 !important;
}

.btn-danger {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid #FED7D7 !important;
    color: #C53030 !important;
    border-radius: var(--radius-pill) !important;
}

.btn-warning {
    background: linear-gradient(135deg, var(--accent-1), var(--accent-dark)) !important;
    border: none !important;
    color: white !important;
    font-weight: 700 !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3) !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background: linear-gradient(135deg, var(--accent-2), var(--accent-dark)) !important;
    border-color: transparent !important;
    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.35) !important;
    color: white !important;
}

/* --------------------------------------------------------------------------
   6. Sidebar del carrito
   -------------------------------------------------------------------------- */
.sidebar,
.cart-sidebar {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-card) !important;
    overflow: hidden;
    margin-bottom: 20px !important;
}

.sidebar .list-group {
    padding: 10px !important;
}

.sidebar .list-group-item,
.cart-sidebar .list-group-item {
    background: transparent !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    color: var(--text-main) !important;
    padding: 12px 16px !important;
    transition: background 0.2s ease !important;
}

.sidebar .list-group-item:hover,
.cart-sidebar .list-group-item:hover {
    background: rgba(167, 139, 250, 0.1) !important;
    color: var(--accent-2) !important;
}

.sidebar .list-group-item.active,
.cart-sidebar .list-group-item.active {
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2)) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
}

.sidebar h4,
.sidebar .panel-title,
.cart-sidebar h4 {
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--text-muted) !important;
    padding: 16px 16px 8px !important;
}

.cart-sidebar .btn,
.sidebar .btn {
    height: auto !important;
    min-height: 48px !important;
    padding: 10px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    overflow: visible !important;
    white-space: normal !important;
    width: 100% !important;
    margin-bottom: 8px !important;
}

/* --------------------------------------------------------------------------
   7. Carrito – cuerpo principal
   -------------------------------------------------------------------------- */
#order-standard_cart {
    padding: 30px 0 !important;
}

.view-cart-items-header {
    background: rgba(167, 139, 250, 0.1) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px 12px 0 0 !important;
    color: var(--text-main) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

#order-standard_cart .cart-item {
    border-bottom: 1px solid rgba(167, 139, 250, 0.1) !important;
    transition: background 0.2s ease;
}

#order-standard_cart .cart-item:hover {
    background: rgba(167, 139, 250, 0.02) !important;
}

.order-summary {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-card) !important;
    padding: 24px !important;
}

/* --------------------------------------------------------------------------
   8. Inputs y selects del carrito – sin corte de texto
   -------------------------------------------------------------------------- */
#order-standard_cart input,
#order-standard_cart select,
#order-standard_cart .form-control {
    height: 48px !important;
    line-height: 1.4 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    overflow: visible !important;
    border-radius: 10px !important;
    border: 1px solid rgba(167, 139, 250, 0.3) !important;
}

#order-standard_cart .form-control:focus {
    border-color: var(--accent-2) !important;
    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.25) !important;
}

/* --------------------------------------------------------------------------
   9. Botón "Vaciar Carrito"
   -------------------------------------------------------------------------- */
#order-standard_cart .btn-danger,
.btn-vaciar-carro {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1.5px solid #FCA5A5 !important;
    color: #B91C1C !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 600 !important;
}

#order-standard_cart .btn-danger:hover {
    background: rgba(254, 215, 215, 0.5) !important;
}

/* --------------------------------------------------------------------------
   10. Página de REGISTRO DE DOMINIOS – Eliminar amarillo definitivamente
   -------------------------------------------------------------------------- */
#order-standard_cart .domain-checker-container,
#order-standard_cart .domain-checker-bg,
#order-standard_cart .domain-intro-container,
#order-standard_cart .domain-banner-container,
#order-standard_cart .bg-warning {
    background: linear-gradient(135deg, #7C3AED 0%, #A78BFA 60%, #C4B5FD 100%) !important;
    background-image: none !important;
    border-radius: var(--radius-card) !important;
    padding: 50px 40px !important;
    position: relative !important;
    overflow: hidden !important;
    border: none !important;
    color: white !important;
}

#order-standard_cart .domain-checker-container::after,
#order-standard_cart .domain-checker-bg::after {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

#order-standard_cart .domain-checker-container .form-control,
#order-standard_cart .domain-checker-bg .form-control,
#order-standard_cart .domain-checker-bg input,
#order-standard_cart .domain-checker-container input {
    background: rgba(255, 255, 255, 0.95) !important;
    border: none !important;
    border-radius: 100px 0 0 100px !important;
    height: 56px !important;
    padding-left: 28px !important;
    font-size: 1rem !important;
    color: var(--text-main) !important;
}

#order-standard_cart .domain-checker-container .btn,
#order-standard_cart .domain-checker-bg .btn {
    border-radius: 0 100px 100px 0 !important;
    height: 56px !important;
    padding: 0 36px !important;
    background: var(--accent-dark) !important;
    border: none !important;
    color: white !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

#order-standard_cart .domain-checker-container *,
#order-standard_cart .domain-checker-bg * {
    color: white;
}

#order-standard_cart .domain-checker-container .form-control,
#order-standard_cart .domain-checker-bg .form-control,
#order-standard_cart .domain-checker-container input,
#order-standard_cart .domain-checker-bg input {
    color: var(--text-main) !important;
}

#order-standard_cart .text-warning,
#order-standard_cart p.text-warning {
    color: var(--accent-2) !important;
}

/* --------------------------------------------------------------------------
   11. Tarjetas promo (Hosting / Transferencia de dominios)
   -------------------------------------------------------------------------- */
#order-standard_cart .domain-promo-box {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) !important;
    border-radius: var(--radius-card) !important;
    border: 1px solid var(--glass-border) !important;
    padding: 30px !important;
    height: 100%;
    box-shadow: var(--shadow-soft) !important;
}

#order-standard_cart .domain-promo-box .btn-warning {
    background: linear-gradient(135deg, #7C3AED, #6D28D9) !important;
    border: none !important;
    color: white !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35) !important;
}

#order-standard_cart .domain-promo-box .btn-primary,
#order-standard_cart .domain-promo-box .btn-info {
    background: white !important;
    border: 2px solid var(--accent-2) !important;
    color: var(--accent-2) !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

#order-standard_cart .domain-promo-box .btn-primary:hover,
#order-standard_cart .domain-promo-box .btn-info:hover {
    background: var(--accent-2) !important;
    color: white !important;
}

/* --------------------------------------------------------------------------
   12. Pestañas (TLD filters / nav-tabs)
   -------------------------------------------------------------------------- */
#order-standard_cart .nav-tabs-custom {
    border-bottom: none !important;
    margin-bottom: 20px;
}

#order-standard_cart .nav-tabs-custom > li > a {
    border: 1px solid rgba(167, 139, 250, 0.3) !important;
    border-radius: var(--radius-pill) !important;
    margin-right: 8px;
    padding: 8px 22px !important;
    font-weight: 600;
    color: var(--text-main) !important;
    transition: all 0.2s ease;
}

#order-standard_cart .nav-tabs-custom > li.active > a {
    background: var(--accent-2) !important;
    color: white !important;
    border-color: var(--accent-2) !important;
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
footer,
#footer {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(16px) !important;
    border-top: 1px solid var(--glass-border) !important;
    color: var(--text-muted) !important;
    padding: 30px 0 !important;
    font-size: 0.88rem !important;
}

footer a,
#footer a {
    color: var(--accent-2) !important;
    font-weight: 500;
    text-decoration: none !important;
}

footer a:hover,
#footer a:hover {
    color: var(--accent-dark) !important;
}

/* --------------------------------------------------------------------------
   14. Tablas
   -------------------------------------------------------------------------- */
.table > thead > tr > th {
    background: rgba(167, 139, 250, 0.08) !important;
    border-bottom: 2px solid var(--glass-border) !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.table-hover > tbody > tr:hover {
    background: rgba(167, 139, 250, 0.04) !important;
}

/* --------------------------------------------------------------------------
   15. Alertas
   -------------------------------------------------------------------------- */
.alert-success {
    background: rgba(52, 211, 153, 0.12) !important;
    border: 1px solid rgba(52, 211, 153, 0.3) !important;
    color: #065F46 !important;
    border-radius: 12px !important;
}

.alert-danger, .alert-error {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    color: #7F1D1D !important;
    border-radius: 12px !important;
}

.alert-info {
    background: rgba(167, 139, 250, 0.1) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--accent-dark) !important;
    border-radius: 12px !important;
}

.alert-warning {
    background: rgba(251, 191, 36, 0.1) !important;
    border: 1px solid rgba(251, 191, 36, 0.25) !important;
    border-radius: 12px !important;
}

/* --------------------------------------------------------------------------
   16. Progress bar (checkout steps)
   -------------------------------------------------------------------------- */
.progress {
    background: rgba(167, 139, 250, 0.15) !important;
    border-radius: var(--radius-pill) !important;
}

.progress-bar {
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2)) !important;
}

/* --------------------------------------------------------------------------
   17. Badges y Labels
   -------------------------------------------------------------------------- */
.badge-primary, .label-primary {
    background: var(--accent-2) !important;
    border-radius: 100px !important;
}

.badge-success, .label-success {
    background: #10B981 !important;
    border-radius: 100px !important;
}

/* --------------------------------------------------------------------------
   18. Responsive – Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .navbar {
        padding: 8px 0 !important;
    }

    .logo-img {
        height: 32px !important;
    }

    #order-standard_cart .cart-sidebar .btn,
    #order-standard_cart .sidebar .btn,
    .cart-sidebar .btn,
    .sidebar .btn {
        height: 54px !important;
        min-height: 54px !important;
        padding: 0 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        font-size: 0.95rem !important;
        overflow: visible !important;
    }

    #order-standard_cart .domain-checker-bg,
    #order-standard_cart .domain-checker-container {
        padding: 30px 20px !important;
    }

    #order-standard_cart .domain-checker-bg .input-group,
    #order-standard_cart .domain-checker-container .input-group {
        flex-direction: column !important;
    }

    #order-standard_cart .domain-checker-bg .form-control,
    #order-standard_cart .domain-checker-container .form-control,
    #order-standard_cart .domain-checker-bg input,
    #order-standard_cart .domain-checker-container input {
        border-radius: var(--radius-pill) !important;
        margin-bottom: 10px !important;
    }

    #order-standard_cart .domain-checker-bg .btn,
    #order-standard_cart .domain-checker-container .btn {
        border-radius: var(--radius-pill) !important;
        width: 100% !important;
    }

    #order-standard_cart input,
    #order-standard_cart select,
    #order-standard_cart .form-control {
        height: 52px !important;
        font-size: 1rem !important;
    }

    .input-group-wrapper-home .input-group-append {
        width: 100% !important;
        display: flex !important;
        gap: 8px;
    }

    .input-group-wrapper-home .btn {
        flex: 1 !important;
        margin: 0 !important;
        padding: 12px !important;
    }
}

/* ==========================================================================
   Ella Tasks Final Brand Layer
   Consolidated override layer to normalize earlier partial customizations
   ========================================================================== */
:root {
    --ella-bg-1: #f4f2fa;
    --ella-bg-2: #eef3ff;
    --ella-glass-1: rgba(255, 255, 255, 0.58);
    --ella-glass-2: rgba(255, 255, 255, 0.45);
    --ella-border: rgba(255, 255, 255, 0.42);
    --ella-primary: #a78bfa;
    --ella-accent: #8fd3ff;
    --ella-accent-2: #bdf3ff;
    --ella-accent-3: #f6c7e7;
    --ella-heading: #1e2235;
    --ella-body: #5e647a;
    --ella-muted: #8b90a7;
    --ella-gradient-bg: linear-gradient(135deg, #eef3ff 0%, #f4f2fa 35%, #f8efff 100%);
    --ella-gradient-primary: linear-gradient(135deg, #8fd3ff 0%, #a78bfa 55%, #f6c7e7 100%);
    --ella-shadow-lg: 0 10px 40px rgba(167, 139, 250, 0.1);
    --ella-shadow-soft: 0 6px 24px rgba(94, 100, 122, 0.12);
    --ella-radius-card: 28px;
    --ella-radius-input: 16px;
    --ella-radius-btn: 18px;
}

body.primary-bg-color {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    color: var(--ella-body) !important;
    background: var(--ella-gradient-bg) !important;
    background-attachment: fixed !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.card-title,
.panel-title {
    font-family: "Sora", "Inter", sans-serif !important;
    color: var(--ella-heading) !important;
}

.bg-glow {
    position: fixed;
    pointer-events: none;
    z-index: 0;
    border-radius: 999px;
    filter: blur(70px);
    opacity: 0.55;
}

.bg-glow-1 {
    width: 380px;
    height: 380px;
    top: -80px;
    left: -70px;
    background: rgba(143, 211, 255, 0.5);
}

.bg-glow-2 {
    width: 460px;
    height: 460px;
    top: 25%;
    right: -110px;
    background: rgba(167, 139, 250, 0.38);
}

.bg-glow-3 {
    width: 430px;
    height: 430px;
    bottom: -150px;
    left: 24%;
    background: rgba(246, 199, 231, 0.34);
}

#header,
#main-body,
#footer {
    position: relative;
    z-index: 1;
}

#header {
    z-index: 2000;
}

#main-body,
#footer {
    z-index: 1;
}

header.header .topbar {
    background: rgba(30, 34, 53, 0.88) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.main-navbar-top,
.main-navbar-wrapper {
    background: rgba(255, 255, 255, 0.65) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
    border-bottom: 1px solid var(--ella-border) !important;
}

.main-navbar-top {
    box-shadow: var(--ella-shadow-soft) !important;
    position: relative !important;
    z-index: 2200 !important;
}

.main-navbar-wrapper {
    border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
    position: relative !important;
    z-index: 2100 !important;
    overflow: visible !important;
}

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

.search-header-wrapper {
    width: min(560px, 42vw);
}

.search-header {
    width: 100%;
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid var(--ella-border) !important;
    border-radius: 999px !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

.toolbar-ella .nav-link,
.toolbar-ella .btn-menu-ella {
    border-radius: 999px !important;
    border: 1px solid var(--ella-border) !important;
    color: var(--ella-heading) !important;
    background: rgba(255, 255, 255, 0.56) !important;
    padding: 0.5rem 0.95rem !important;
}

.toolbar-ella .nav-link:hover,
.toolbar-ella .btn-menu-ella:hover,
.toolbar-ella .nav-link:focus,
.toolbar-ella .btn-menu-ella:focus {
    background: rgba(255, 255, 255, 0.8) !important;
    box-shadow: var(--ella-shadow-soft) !important;
}

.badge-ella {
    margin-left: 0.5rem;
    background: var(--ella-gradient-primary) !important;
    color: #1e2235 !important;
    border-radius: 999px;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
}

.dropdown-menu {
    border-radius: 18px !important;
    border: 1px solid var(--ella-border) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
    box-shadow: var(--ella-shadow-soft) !important;
}

.dropdown-item {
    border-radius: 12px !important;
    color: var(--ella-heading) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(143, 211, 255, 0.25) !important;
}

/* Navbar dropdown anchoring fix (e.g. "Tienda") */
.main-navbar-wrapper .navbar-nav > li.dropdown,
.main-navbar-wrapper .navbar-nav > li.no-collapse.dropdown {
    position: relative !important;
}

.main-navbar-wrapper .navbar-nav > li.dropdown > .dropdown-menu,
.main-navbar-wrapper .navbar-nav > li.no-collapse.dropdown > .dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: auto !important;
    margin-top: 0 !important;
    z-index: 2300 !important;
}

.main-navbar-wrapper .navbar-nav > li.dropdown > .dropdown-menu.dropdown-menu-right,
.main-navbar-wrapper .navbar-nav > li.no-collapse.dropdown > .dropdown-menu.dropdown-menu-right {
    left: auto !important;
    right: 0 !important;
}

/* Top toolbar dropdown anchoring fix (Mi Cuenta) */
.main-navbar-top .dropdown {
    position: relative !important;
}

.main-navbar-top .dropdown > .dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: auto !important;
    right: 0 !important;
    z-index: 1300 !important;
    margin-top: 0 !important;
}

.primary-content .card,
.panel,
.sidebar,
.order-summary,
.home-domain-search .glass-panel-home,
.domain-promo-box,
.primary-content .mc-promo-login,
.primary-content .mc-promo-manage {
    border-radius: var(--ella-radius-card) !important;
    border: 1px solid var(--ella-border) !important;
    background: var(--ella-glass-1) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: var(--ella-shadow-lg) !important;
}

.panel-heading,
.card-header {
    border-radius: calc(var(--ella-radius-card) - 1px) calc(var(--ella-radius-card) - 1px) 0 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.55) !important;
    background: rgba(255, 255, 255, 0.38) !important;
    color: var(--ella-heading) !important;
}

.btn,
button,
input[type="submit"] {
    border-radius: var(--ella-radius-btn) !important;
    font-weight: 600 !important;
}

.btn-primary,
.btn-info,
.btn-success,
#btnDomainSearch,
#btnDomainSearch2,
#btnTransfer,
#btnTransfer2,
.btn-checkout {
    border: 0 !important;
    color: #1e2235 !important;
    background: var(--ella-gradient-primary) !important;
    box-shadow: 0 8px 24px rgba(167, 139, 250, 0.24) !important;
}

.btn-default,
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary,
.btn-link {
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    background: var(--ella-glass-2) !important;
    color: #4b5274 !important;
}

.btn-danger,
.btn-warning {
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    background: rgba(255, 255, 255, 0.75) !important;
    color: #7c3a57 !important;
}

.form-control,
.custom-select,
select,
textarea,
.form-control:disabled,
.form-control[readonly] {
    border-radius: var(--ella-radius-input) !important;
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    color: var(--ella-heading) !important;
}

.form-control:focus,
.custom-select:focus,
select:focus,
textarea:focus {
    border-color: rgba(143, 211, 255, 0.95) !important;
    box-shadow: 0 0 0 4px rgba(143, 211, 255, 0.2) !important;
}

.alert {
    border-radius: 16px !important;
}

.alert-success {
    background: rgba(164, 242, 223, 0.58) !important;
    border-color: rgba(118, 216, 188, 0.75) !important;
    color: #1e5b55 !important;
}

.alert-info,
.alert-warning {
    background: rgba(180, 223, 255, 0.55) !important;
    border-color: rgba(143, 211, 255, 0.8) !important;
    color: #2f5d7f !important;
}

.alert-danger,
.alert-error {
    background: rgba(255, 214, 234, 0.62) !important;
    border-color: rgba(246, 199, 231, 0.88) !important;
    color: #6e3f63 !important;
}

.nav-tabs,
.nav-tabs-custom {
    border-bottom: 0 !important;
}

.nav-tabs .nav-link,
.nav-tabs-custom > li > a {
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    color: #545b83 !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nav-tabs-custom > li.active > a {
    border-color: transparent !important;
    background: var(--ella-gradient-primary) !important;
    color: #1e2235 !important;
}

.pagination > li > a,
.pagination > li > span,
.page-link {
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    background: rgba(255, 255, 255, 0.6) !important;
    color: #5f668e !important;
}

.page-item.active .page-link,
.pagination > .active > a,
.pagination > .active > span {
    border-color: transparent !important;
    background: var(--ella-gradient-primary) !important;
    color: #1e2235 !important;
}

.table,
.table-list,
.dataTables_wrapper table.table-list {
    border-radius: 16px !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    background: rgba(255, 255, 255, 0.5) !important;
}

.table > thead > tr > th,
table.table-list thead th {
    border-bottom: 1px solid rgba(255, 255, 255, 0.6) !important;
    background: rgba(255, 255, 255, 0.62) !important;
    color: #4e557c !important;
}

.table-hover > tbody > tr:hover,
.table-list > tbody > tr:hover > td {
    background: rgba(143, 211, 255, 0.18) !important;
}

.modal-content,
.system-modal .modal-content {
    border-radius: 24px !important;
    border: 1px solid var(--ella-border) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: var(--ella-shadow-lg) !important;
}

/* Ensure WHMCS confirmation modals render above elevated nav/dropdowns */
.modal-backdrop {
    z-index: 3200 !important;
}

.modal,
.system-modal,
#modalAjax {
    z-index: 3210 !important;
}

.modal .modal-dialog {
    z-index: 3220 !important;
}

/* Fix stacking-context conflict: header was above cart confirmation modal */
body.modal-open #main-body {
    z-index: 3250 !important;
}

body.modal-open #header {
    z-index: 2100 !important;
}

.text-gradient {
    background: var(--ella-gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.action-icon-btns a {
    display: block;
    min-height: 170px;
    border-radius: 24px !important;
    border: 1px solid var(--ella-border) !important;
    background: rgba(255, 255, 255, 0.62) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
    box-shadow: var(--ella-shadow-soft) !important;
    color: var(--ella-heading) !important;
    padding: 1.2rem;
    font-weight: 600;
    text-align: center;
}

.action-icon-btns a .ico-container {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    margin: 0 auto 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.42rem;
    background: var(--ella-gradient-primary) !important;
    color: #1e2235 !important;
}

/* Global left-sidebar active readability (all client pages) */
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus,
.sidebar .list-group-item.list-group-item-action.active,
.sidebar .list-group-item.list-group-item-action.active:hover,
.sidebar .list-group-item.list-group-item-action.active:focus,
.cart-sidebar .list-group-item.active,
.cart-sidebar .list-group-item.active:hover,
.cart-sidebar .list-group-item.active:focus {
    color: #2f3553 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(167, 139, 250, 0.35) !important;
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.2);
}

.sidebar .list-group-item.active *,
.cart-sidebar .list-group-item.active * {
    color: #2f3553 !important;
}

.sidebar .list-group-item.active .badge,
.cart-sidebar .list-group-item.active .badge {
    background: rgba(167, 139, 250, 0.2) !important;
    color: #2f3553 !important;
}

/* Premium domain hero */
.home-domain-search {
    margin-top: 1.6rem;
    margin-bottom: 1rem;
}

.home-domain-search .domain-hero-card {
    position: relative;
    overflow: hidden;
    text-align: center !important;
    padding: clamp(1.9rem, 3.7vw, 2.9rem) !important;
    border-radius: 42px !important;
    border: 1px solid rgba(255, 255, 255, 0.66) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.36)) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 16px 46px rgba(167, 139, 250, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
}

.home-domain-search .domain-hero-card::before {
    content: "";
    position: absolute;
    width: 410px;
    height: 410px;
    top: -210px;
    right: -130px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(143, 211, 255, 0.22), rgba(143, 211, 255, 0));
    pointer-events: none;
}

.home-domain-search .domain-hero-card::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    bottom: -170px;
    left: -110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(246, 199, 231, 0.23), rgba(246, 199, 231, 0));
    pointer-events: none;
}

.domain-hero-kicker {
    position: relative;
    z-index: 1;
}

.domain-hero-kicker span {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-family: "Sora", "Inter", sans-serif;
    font-weight: 600;
    letter-spacing: 0.16em;
    font-size: 0.86rem;
    color: #7f73b8;
}

.domain-hero-kicker span::before,
.domain-hero-kicker span::after {
    content: "";
    width: clamp(56px, 9vw, 96px);
    height: 1px;
    background: linear-gradient(90deg, rgba(167, 139, 250, 0), rgba(167, 139, 250, 0.42), rgba(167, 139, 250, 0));
}

.domain-hero-title {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 860px;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    text-wrap: balance;
    font-family: "Sora", "Inter", sans-serif;
    font-size: clamp(1.85rem, 3.2vw, 3.02rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
    font-weight: 600;
    color: #2a2f56 !important;
    margin-bottom: 0.62rem !important;
}

.domain-hero-subtitle {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 760px;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    color: #636b8a !important;
    font-size: clamp(1rem, 1.55vw, 1.04rem);
    font-weight: 450;
}

.domain-hero-search {
    position: relative;
    z-index: 1;
    max-width: 1020px;
    margin: 0 auto;
}

.domain-hero-input-group {
    align-items: stretch;
    border-radius: 34px !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 18px 42px rgba(126, 116, 186, 0.2), 0 8px 20px rgba(143, 211, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    padding: 0.42rem;
}

.domain-hero-input-group .input-group-text {
    padding-left: 1.15rem;
    padding-right: 0.55rem;
}

.domain-hero-input-group .input-group-text i {
    color: #8f96b4 !important;
    font-size: 1.5rem;
}

.domain-hero-input {
    min-height: 62px;
    font-size: clamp(1.24rem, 2vw, 1.76rem) !important;
    font-weight: 500;
    letter-spacing: -0.012em;
    color: #283152 !important;
    background: transparent !important;
}

.domain-hero-input::placeholder {
    color: #8c93af !important;
}

.domain-hero-actions {
    gap: 0.48rem;
    padding-left: 0.4rem;
}

.domain-hero-btn {
    min-height: 58px;
    border-radius: 24px !important;
    font-family: "Sora", "Inter", sans-serif;
    font-size: clamp(1.16rem, 1.8vw, 1.7rem);
    letter-spacing: -0.012em;
    font-weight: 600 !important;
    padding-left: 2.2rem !important;
    padding-right: 2.2rem !important;
    box-shadow: 0 10px 24px rgba(167, 139, 250, 0.22) !important;
}

.domain-hero-btn-secondary {
    border: 1px solid rgba(255, 255, 255, 0.82) !important;
    background: linear-gradient(135deg, rgba(225, 235, 255, 0.9), rgba(216, 200, 250, 0.7)) !important;
    color: #4f5682 !important;
    box-shadow: 0 7px 18px rgba(126, 140, 177, 0.1) !important;
}

.domain-hero-btn-secondary:hover,
.domain-hero-btn-secondary:focus {
    background: linear-gradient(135deg, rgba(234, 242, 255, 0.96), rgba(223, 209, 252, 0.8)) !important;
    color: #434a74 !important;
}

.domain-hero-tlds {
    position: relative;
    z-index: 1;
    margin-top: 1.28rem !important;
    margin-bottom: 0.82rem !important;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.76rem;
    list-style: none;
    padding-left: 0;
}

.domain-hero-tld {
    margin: 0 !important;
    padding: 0.86rem 1rem !important;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.56);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 6px 16px rgba(152, 139, 212, 0.08);
    color: #616988 !important;
    font-weight: 500;
    font-size: clamp(1rem, 1.5vw, 1.22rem);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.76rem;
    text-align: center;
}

.domain-hero-tld img {
    max-height: 40px !important;
    width: auto;
    opacity: 0.95;
}

.domain-hero-footer {
    position: relative;
    z-index: 1;
    margin-top: 0.26rem;
}

.domain-pricing-link {
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    background: rgba(255, 255, 255, 0.52) !important;
    color: #5a6290 !important;
    font-family: "Sora", "Inter", sans-serif;
    font-weight: 550 !important;
    font-size: clamp(1.02rem, 1.35vw, 1.3rem);
    letter-spacing: 0;
    padding: 0.66rem 1.62rem !important;
    min-width: 290px;
}

.domain-pricing-link:hover,
.domain-pricing-link:focus {
    background: rgba(255, 255, 255, 0.74) !important;
    color: #3c456f !important;
}

/* Contact form clarity */
form[action="contact.php"] .form-group {
    margin-bottom: 1rem;
}

form[action="contact.php"] .col-form-label {
    color: #3d4466 !important;
    font-weight: 600 !important;
}

form[action="contact.php"] .form-control {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(167, 139, 250, 0.28) !important;
    min-height: 50px;
    color: #2c3250 !important;
}

form[action="contact.php"] textarea.form-control {
    min-height: 220px;
    resize: vertical;
}

form[action="contact.php"] .form-control:focus {
    background: #fff !important;
    border-color: rgba(143, 211, 255, 0.95) !important;
    box-shadow: 0 0 0 4px rgba(143, 211, 255, 0.2) !important;
}

form[action="contact.php"] button[type="submit"] {
    min-width: 190px;
    padding: 0.72rem 1.4rem;
}

#order-standard_cart .domain-checker-bg,
#order-standard_cart .domain-checker-container,
#order-standard_cart .domain-intro-container,
#order-standard_cart .domain-banner-container,
#order-standard_cart .featured-tlds-container,
#order-standard_cart .domain-promo-box,
#order-standard_cart .summary-container,
#order-standard_cart .cart-body,
#order-standard_cart .panel,
#order-standard_cart .sub-heading,
#order-standard_cart .view-cart-items,
#order-standard_cart .view-cart-tabs,
#order-standard_cart .categories-collapsed,
#order-standard_cart .cart-sidebar {
    border-radius: var(--ella-radius-card) !important;
    border: 1px solid var(--ella-border) !important;
    background: var(--ella-glass-1) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: var(--ella-shadow-lg) !important;
}

#order-standard_cart .domain-checker-container,
#order-standard_cart .domain-checker-bg {
    background: var(--ella-gradient-bg) !important;
}

footer.footer,
#footer {
    margin-top: 2rem !important;
    padding: 3rem 0 4rem !important;
    border-top: 1px solid var(--ella-border) !important;
    background: rgba(255, 255, 255, 0.58) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
    color: var(--ella-body) !important;
}

footer.footer .nav-link,
footer.footer .btn,
#footer .nav-link,
#footer .btn {
    color: #525983 !important;
}

footer.footer .btn,
#footer .btn {
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    background: rgba(255, 255, 255, 0.5) !important;
}

@media (max-width: 991.98px) {
    header.header .logo-img {
        height: 36px !important;
    }

    .main-navbar-wrapper .navbar-collapse {
        padding: 0.75rem !important;
        border-radius: 18px !important;
        border: 1px solid var(--ella-border) !important;
        background: rgba(255, 255, 255, 0.8) !important;
    }

    .mobile-search-form {
        margin-bottom: 0.75rem;
    }

    .action-icon-btns a {
        min-height: 150px;
    }

    form[action="contact.php"] .col-form-label {
        text-align: left !important;
        margin-bottom: 0.35rem;
    }

    .home-domain-search .domain-hero-card {
        padding: 1.55rem !important;
        border-radius: 30px !important;
    }

    .domain-hero-search {
        max-width: 100%;
    }

    .domain-hero-input {
        min-height: 50px;
        font-size: 1.22rem !important;
    }

    .domain-hero-actions {
        flex-wrap: nowrap;
    }

    .domain-hero-btn {
        min-height: 48px;
        font-size: 1.05rem;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
}

@media (max-width: 767.98px) {
    .bg-glow {
        opacity: 0.4;
        filter: blur(52px);
    }

    .glass-panel-home {
        padding: 1.45rem !important;
    }

    .input-group-wrapper-home .input-group {
        border-radius: 20px !important;
    }

    .input-group-wrapper-home .input-group-append {
        width: 100% !important;
        display: flex !important;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }

    .input-group-wrapper-home .input-group-append .btn {
        width: 100% !important;
    }

    .home-domain-search {
        margin-top: 1.1rem;
    }

    .home-domain-search .domain-hero-card {
        padding: 1.22rem !important;
        border-radius: 22px !important;
    }

    .domain-hero-kicker span {
        font-size: 0.72rem;
        letter-spacing: 0.12em;
        gap: 0.52rem;
    }

    .domain-hero-title {
        font-size: 1.36rem;
        line-height: 1.2;
    }

    .domain-hero-subtitle {
        font-size: 0.9rem;
        margin-bottom: 0.85rem !important;
    }

    .domain-hero-input-group {
        border-radius: 18px !important;
        padding: 0.25rem;
    }

    .domain-hero-input {
        min-height: 46px;
        font-size: 1rem !important;
    }

    .domain-hero-mobile-actions {
        margin-top: 0.8rem;
    }

    .domain-hero-mobile-actions .btn {
        min-height: 44px;
        font-size: 0.94rem;
        border-radius: 16px !important;
    }

    .domain-hero-tlds {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        margin-top: 0.85rem !important;
    }

    .domain-hero-tld {
        justify-content: flex-start;
        text-align: left;
        font-size: 0.93rem;
        border-radius: 16px;
        padding: 0.66rem 0.82rem !important;
    }

    .domain-pricing-link {
        display: inline-flex;
        justify-content: center;
        width: 100%;
        min-width: 0;
        font-size: 0.98rem;
        padding: 0.56rem 1rem !important;
    }
}