/* ================================================================
   Solution Web 2026 New — WHMCS Child Theme (parent: nexus)
   Ajustes de integración entre el diseño SWM 2026 y el portal WHMCS
   ================================================================ */

/* Preloader: logo SWM centrado dentro del anillo giratorio (sin texto) */
.preloader .animation-preloader .spinner {
    position: relative;
}
.preloader .animation-preloader .spinner .preloader-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 45%;
    max-width: 70px;
    height: auto;
    /* Contra-rotación: el anillo (.spinner) gira, esta animación cancela
       ese giro para que el logo se vea fijo y solo el anillo se mueva. */
    animation: preloaderLogoCounterSpin 1s infinite linear;
}
@keyframes preloaderLogoCounterSpin {
    from {
        transform: translate(-50%, -50%) rotateZ(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotateZ(-360deg);
    }
}

/* ---------------------------------------------------------------
   0. CORRECCIÓN CRÍTICA — posición del header
   ---------------------------------------------------------------
   main.css pone .header-section-1 con position:absolute para que
   el hero del sitio principal quede visualmente debajo. En WHMCS
   no hay hero, por lo que el header se encima con el contenido.
   Lo convertimos a position:relative para que fluya normalmente.
   --------------------------------------------------------------- */
.header-section-1 {
    position: relative !important;
    top: auto !important;
}

/* Reducir margen entre items del menú para que quepan en el portal */
.header-section-1 .header-main .main-menu ul li {
    margin-inline-end: 22px !important;
}

.header-section-1 .header-main .main-menu ul li a {
    font-size: 14px !important;
}

/* ---------------------------------------------------------------
   0b. CORRECCIÓN CRÍTICA — menú invisible antes del scroll
   ---------------------------------------------------------------
   main.css pinta el texto del menú en blanco (var(--white)) porque
   en el sitio principal el header flota sobre una imagen de fondo.
   Sin esa imagen detrás (header relative), el texto blanco queda
   sobre fondo blanco. Le damos fondo oscuro a la barra de nav
   mientras no está en estado .sticky, igual que el resto del header.
   --------------------------------------------------------------- */
#header-sticky.header-1 {
    background-color: #002BAE;
}

#header-sticky.header-1.sticky {
    background-color: var(--white, #fff);
}

/* ---------------------------------------------------------------
   0c. CORRECCIÓN — barra superior (header-top) en dos filas
   ---------------------------------------------------------------
   El contenido del topbar logueado (notificaciones + bienvenida +
   cuenta) es más largo que el del sitio público y se envolvía.
   Forzamos una sola fila con elementos que se acomodan/truncan.
   --------------------------------------------------------------- */
.header-top-wrapper {
    flex-wrap: nowrap !important;
    gap: 16px;
}

.header-top-wrapper .contact-list,
.header-top-wrapper .list {
    flex: 0 0 auto;
    white-space: nowrap;
    gap: 18px !important;
}

.header-top-wrapper p {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    margin: 0 10px;
}

.header-top-wrapper .swm-notif-btn {
    white-space: nowrap;
}

/* Asegurar que el header sticky no duplique el header */
.sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    width: 100%;
    z-index: 9998;
}

/* Cuando el sticky está activo (clase .sticky añadida por JS al hacer scroll),
   el #header-sticky sale del flujo normal (position:fixed). El encabezado
   original ya no ocupa espacio, así que el contenido sube. Para evitar ese
   salto añadimos padding al body desde JS en main.js (ya lo hace) — no se
   necesita regla adicional aquí. */

/* ---------------------------------------------------------------
   1. CORRECCIONES GLOBALES — evitar que main.css rompa la UI WHMCS
   --------------------------------------------------------------- */

/* main.css pone text-transform:capitalize en todos los headings;
   en el portal WHMCS las cadenas son lowercase/sentence-case     */
.primary-content h1, .primary-content h2, .primary-content h3,
.primary-content h4, .primary-content h5, .primary-content h6,
.sidebar h1, .sidebar h2, .sidebar h3, .sidebar h4,
.sidebar h5, .sidebar h6,
.modal h1, .modal h2, .modal h3, .modal h4, .modal h5, .modal h6,
.panel-heading h1, .panel-heading h2, .panel-heading h3,
.panel-heading h4, .panel-heading h5, .panel-heading h6 {
    text-transform: none;
}

/* Restaurar font-size de párrafos dentro del portal */
.primary-content p, .sidebar p {
    line-height: 1.6;
}

/* ---------------------------------------------------------------
   2. BREADCRUMB — estilo para la barra de ruta dentro del portal
   --------------------------------------------------------------- */
.swm-breadcrumb {
    background-color: var(--bg, #F8F5FC);
    padding: 10px 0;
    border-bottom: 1px solid var(--border, #E4D6FF);
    margin-bottom: 0;
}

.swm-breadcrumb .breadcrumb {
    margin: 0;
    background: transparent;
    padding: 4px 0;
    font-size: 14px;
}

.swm-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--theme, #7200FF);
}

.swm-breadcrumb .breadcrumb-item a {
    color: var(--theme, #7200FF);
}

.swm-breadcrumb .breadcrumb-item.active {
    color: var(--text, #445375);
}

/* ---------------------------------------------------------------
   3. ÁREA PRINCIPAL DEL PORTAL (main-body)
   --------------------------------------------------------------- */
.swm-main-body {
    padding: 40px 0 60px;
    min-height: 60vh;
    background-color: var(--white, #fff);
}

/* ---------------------------------------------------------------
   4. BOTONES WHMCS — adaptar al estilo SWM 2026
   --------------------------------------------------------------- */
.btn-primary,
.btn.btn-primary {
    background-color: var(--theme, #7200FF);
    border-color: var(--theme, #7200FF);
    border-radius: 30px;
    font-family: "Jost", sans-serif;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:hover {
    background-color: var(--header, #0F0D1D);
    border-color: var(--header, #0F0D1D);
}

.btn-default,
.btn.btn-default {
    border-radius: 30px;
    font-family: "Jost", sans-serif;
    font-weight: 500;
    border: 1px solid var(--border, #E4D6FF);
    color: var(--header, #0F0D1D);
    transition: all 0.3s ease;
}

.btn-default:hover,
.btn.btn-default:hover {
    background-color: var(--theme, #7200FF);
    border-color: var(--theme, #7200FF);
    color: #fff;
}

/* ---------------------------------------------------------------
   5. CARRITO EN EL HEADER
   --------------------------------------------------------------- */
.swm-header-cart {
    margin-right: 12px;
    position: relative;
}

.swm-cart-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 18px;
    position: relative;
    transition: all 0.3s;
}

.swm-cart-link:hover {
    background-color: var(--theme, #7200FF);
    border-color: var(--theme, #7200FF);
    color: #fff;
}

.swm-cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background-color: var(--theme2, #4E00BE);
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1;
}

/* Cuando el header está sticky, el carrito sobre fondo claro */
.sticky .swm-cart-link {
    color: var(--header, #0F0D1D);
    border-color: var(--border, #E4D6FF);
}

.sticky .swm-cart-link:hover {
    color: #fff;
}

/* ---------------------------------------------------------------
   6. LOGO: tamaño consistente con el sitio principal
   --------------------------------------------------------------- */
.header-logo img,
.header-logo-2 img {
    height: 48px;
    width: auto;
    max-width: 180px;
}

/* ---------------------------------------------------------------
   7. SIDEBAR DEL PORTAL WHMCS
   --------------------------------------------------------------- */
.sidebar .panel {
    border: 1px solid var(--border, #E4D6FF);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.05);
    margin-bottom: 24px;
}

.sidebar .panel-heading {
    background-color: var(--theme, #7200FF);
    color: #fff;
    padding: 14px 20px;
    font-family: "Jost", sans-serif;
    font-weight: 600;
    font-size: 15px;
}

.sidebar .panel-body {
    padding: 0;
}

.sidebar .list-group-item {
    border-left: none;
    border-right: none;
    font-family: "Jost", sans-serif;
    font-size: 14px;
    padding: 10px 20px;
    color: var(--header, #0F0D1D);
    transition: all 0.2s;
}

.sidebar .list-group-item:hover,
.sidebar .list-group-item.active {
    background-color: var(--bg, #F8F5FC);
    color: var(--theme, #7200FF);
    border-color: var(--border, #E4D6FF);
}

.sidebar .list-group-item.active {
    font-weight: 600;
}

/* ---------------------------------------------------------------
   8. FORMULARIOS DEL PORTAL
   --------------------------------------------------------------- */
.form-control {
    border-color: var(--border, #E4D6FF);
    border-radius: 8px;
    font-family: "Jost", sans-serif;
    color: var(--header, #0F0D1D);
    transition: border-color 0.3s;
}

.form-control:focus {
    border-color: var(--theme, #7200FF);
    box-shadow: 0 0 0 0.2rem rgba(114, 0, 255, 0.15);
    color: var(--header, #0F0D1D);
    outline: none;
}

/* ---------------------------------------------------------------
   9. TABLAS WHMCS
   --------------------------------------------------------------- */
.table thead th {
    background-color: var(--bg, #F8F5FC);
    color: var(--header, #0F0D1D);
    font-family: "Jost", sans-serif;
    font-weight: 600;
    border-color: var(--border, #E4D6FF);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.table td, .table th {
    border-color: var(--border-2, #E6DCF7);
    font-family: "Jost", sans-serif;
    vertical-align: middle;
}

/* ---------------------------------------------------------------
   10. BADGES Y ETIQUETAS DE ESTADO
   --------------------------------------------------------------- */
.badge-success, .label-success, .status-active {
    background-color: #28a745;
}

.badge-warning, .label-warning {
    background-color: var(--theme2, #4E00BE);
    color: #fff;
}

.badge-danger, .label-danger, .status-suspended {
    background-color: #dc3545;
}

.badge-info, .label-info {
    background-color: var(--theme, #7200FF);
}

/* ---------------------------------------------------------------
   11. PANEL DE PRODUCTOS/SERVICIOS (clientareahome)
   --------------------------------------------------------------- */
.panel.panel-default {
    border: 1px solid var(--border, #E4D6FF);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(114, 0, 255, 0.06);
}

.panel-default > .panel-heading {
    background-color: var(--bg, #F8F5FC);
    border-bottom-color: var(--border, #E4D6FF);
    color: var(--header, #0F0D1D);
    font-family: "Jost", sans-serif;
    font-weight: 600;
}

/* ---------------------------------------------------------------
   12. ALERTS WHMCS
   --------------------------------------------------------------- */
.alert-info {
    background-color: rgba(114, 0, 255, 0.05);
    border-color: rgba(114, 0, 255, 0.2);
    color: var(--header, #0F0D1D);
    border-radius: 10px;
    font-family: "Jost", sans-serif;
}

.alert-success {
    background-color: rgba(40, 167, 69, 0.08);
    border-color: rgba(40, 167, 69, 0.3);
    border-radius: 10px;
    font-family: "Jost", sans-serif;
}

.alert-danger, .alert-error {
    background-color: rgba(220, 53, 69, 0.08);
    border-color: rgba(220, 53, 69, 0.3);
    border-radius: 10px;
    font-family: "Jost", sans-serif;
}

.alert-warning {
    background-color: rgba(78, 0, 190, 0.06);
    border-color: rgba(78, 0, 190, 0.2);
    border-radius: 10px;
    font-family: "Jost", sans-serif;
}

/* ---------------------------------------------------------------
   13. TOPBAR (barra superior del header)
   --------------------------------------------------------------- */
.swm-notif-btn {
    font-family: "Jost", sans-serif;
}

/* ---------------------------------------------------------------
   14. FOOTER — íconos de método de pago (FA icons junto a imágenes)
   --------------------------------------------------------------- */
.footer-bottom .footer-wrapper .brand-logo li i {
    font-size: 26px;
    color: rgba(255,255,255,.8);
    line-height: 1;
    vertical-align: middle;
}

.footer-bottom .footer-wrapper .brand-logo li img {
    max-height: 24px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: .8;
}

/* ---------------------------------------------------------------
   15. BOTÓN "REGRESAR AL ADMIN" WHMCS
   El theme de Nexus pone este botón como una pestaña lateral girada
   90° con transform:rotate(90deg) !important — lo anulamos todo
   para mostrarlo como un pequeño botón fijo en la esquina inferior.
   --------------------------------------------------------------- */
.btn-return-to-admin,
a.btn-return-to-admin {
    position: fixed !important;
    top: auto !important;
    bottom: 20px !important;
    right: auto !important;
    left: 20px !important;
    transform: none !important;
    transform-origin: unset !important;
    z-index: 9999 !important;
    background-color: var(--theme, #7200FF) !important;
    color: #fff !important;
    border-radius: 30px !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-family: "Jost", sans-serif !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 20px rgba(114, 0, 255, 0.4) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    max-width: 240px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    width: auto !important;
    height: auto !important;
    transition: background-color 0.3s !important;
}

.btn-return-to-admin:hover,
a.btn-return-to-admin:hover {
    background-color: var(--header, #0F0D1D) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Ocultar el sub-elemento .floating que Nexus inyecta dentro del botón */
.btn-return-to-admin .floating {
    display: none !important;
}

/* ---------------------------------------------------------------
   16. DYNAMIC STORE — mantener ancho completo
   --------------------------------------------------------------- */
section#main-body.swm-main-body:has(.dynamic-landing-page) > .container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

section#main-body.swm-main-body:has(.dynamic-landing-page) > .container > div,
section#main-body.swm-main-body:has(.dynamic-landing-page) > .container .primary-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ---------------------------------------------------------------
   17. HEADER — ajuste del logo SWM (icono cuadrado, no wordmark)
   --------------------------------------------------------------- */
.swm-offcanvas-user-info strong {
    font-family: "Jost", sans-serif;
    font-size: 15px;
    color: var(--header, #0F0D1D);
}

/* ---------------------------------------------------------------
   18. MODAL WHMCS — adaptar bordes y tipografía
   --------------------------------------------------------------- */
.modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 20px 60px rgba(0,0,0,.15);
    font-family: "Jost", sans-serif;
}

.modal-header {
    border-bottom-color: var(--border, #E4D6FF);
}

.modal-footer {
    border-top-color: var(--border, #E4D6FF);
}

/* ---------------------------------------------------------------
   19. PAGINACIÓN
   --------------------------------------------------------------- */
.pagination .page-item.active .page-link {
    background-color: var(--theme, #7200FF);
    border-color: var(--theme, #7200FF);
}

.pagination .page-link {
    color: var(--theme, #7200FF);
    border-color: var(--border, #E4D6FF);
    font-family: "Jost", sans-serif;
}

.pagination .page-link:hover {
    background-color: var(--bg, #F8F5FC);
    color: var(--theme, #7200FF);
}

/* ---------------------------------------------------------------
   20. RESPONSIVE — ajustes móvil
   --------------------------------------------------------------- */
@media (max-width: 991px) {
    .swm-main-body {
        padding: 24px 0 40px;
    }
}

@media (max-width: 575px) {
    .swm-main-body {
        padding: 16px 0 32px;
    }
    .footer-bottom .footer-wrapper {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    .footer-bottom .brand-logo {
        justify-content: center;
    }
}

/* ---------------------------------------------------------------
   21. VARIABLES DE COLOR FALTANTES DEL TEMA NEXUS
   ---------------------------------------------------------------
   theme.css usa variables como var(--bg-inverted), var(--border-muted),
   var(--rounding-sm), etc. en varias secciones (p.ej. la tabla de
   precios de dominios) pero NUNCA las define en ningún archivo CSS
   cargado (all.min.css / theme.min.css). Esto deja varias reglas con
   valores inválidos (bordes y fondos invisibles, filtros activos sin
   color, etc.) Las definimos aquí con la paleta SWM para que esas
   reglas — y cualquier otra parte del portal que las use — se vean
   correctamente.
   --------------------------------------------------------------- */
:root {
    --rounding-sm: 10px;
    --rounding-md: 14px;
    --bg-inverted: var(--theme, #7200FF);
    --bg-accented: var(--bg, #F8F5FC);
    --border-muted: var(--border, #E4D6FF);
    --border-lifted: var(--border-2, #E6DCED);
    --text-muted: #8b87a8;
    --grayscale: #ded8f0;
}

/* ---------------------------------------------------------------
   22. TABLA DE PRECIOS DE DOMINIOS (cart.php?a=add&domain=register
   y /domain-pricing) — branding SWM 2026 sobre el componente nativo
   de WHMCS (#order-standard_cart .domain-pricing)
   --------------------------------------------------------------- */
#order-standard_cart .domain-pricing,
.domain-pricing {
    font-family: "Jost", sans-serif;
}

/* Tarjetas de TLD destacados (.com, .net, etc.) */
#order-standard_cart .domain-pricing .featured-tld,
.domain-pricing .featured-tld {
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(114, 0, 255, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#order-standard_cart .domain-pricing .featured-tld:hover,
.domain-pricing .featured-tld:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(114, 0, 255, 0.16);
}

#order-standard_cart .domain-pricing .featured-tld .price,
.domain-pricing .featured-tld .price {
    font-family: "Jost", sans-serif;
    font-weight: 600;
}

/* Filtros de categoría (badges) */
#order-standard_cart .domain-pricing .tld-filters .badge,
.domain-pricing .tld-filters .badge,
.domain-pricing .tld-filters a.badge-secondary {
    background: #fff !important;
    color: var(--header, #0F0D1D) !important;
    border: 1px solid var(--border, #E4D6FF) !important;
    border-radius: 30px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.25s ease;
}

#order-standard_cart .domain-pricing .tld-filters .badge:hover,
.domain-pricing .tld-filters .badge:hover {
    background: var(--bg, #F8F5FC) !important;
    border-color: var(--theme, #7200FF) !important;
    color: var(--theme, #7200FF) !important;
}

#order-standard_cart .domain-pricing .tld-filters .badge.badge-success,
.domain-pricing .tld-filters .badge.badge-success {
    background: var(--theme, #7200FF) !important;
    border-color: var(--theme, #7200FF) !important;
    color: #fff !important;
}

/* Contenedor de la tabla de precios */
#order-standard_cart .domain-pricing .bg-white,
.domain-pricing .bg-white {
    border-radius: 14px;
    border: 1px solid var(--border, #E4D6FF);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

/* Encabezado de la tabla (Dominio / Nuevo precio / Transferir / Renovación) */
#order-standard_cart .domain-pricing .tld-pricing-header,
.domain-pricing .tld-pricing-header {
    background-color: var(--theme, #7200FF) !important;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .5px;
    padding: 14px 0;
}

#order-standard_cart .domain-pricing .tld-pricing-header div,
.domain-pricing .tld-pricing-header div,
#order-standard_cart .domain-pricing .tld-pricing-header .tld-column,
.domain-pricing .tld-pricing-header .tld-column {
    background: transparent !important;
    color: #fff !important;
    border: none !important;
}

/* Filas de cada extensión */
#order-standard_cart .domain-pricing .tld-row,
.domain-pricing .tld-row {
    border-bottom: 1px solid var(--border, #E4D6FF) !important;
    padding: 10px 0;
    transition: background-color 0.2s;
}

#order-standard_cart .domain-pricing .tld-row:hover,
.domain-pricing .tld-row:hover {
    background-color: var(--bg, #F8F5FC);
}

#order-standard_cart .domain-pricing .tld-row.highlighted,
.domain-pricing .tld-row.highlighted {
    background: var(--bg, #F8F5FC) !important;
}

#order-standard_cart .domain-pricing .two-row-center,
.domain-pricing .two-row-center {
    border-right-color: var(--border, #E4D6FF) !important;
    font-weight: 600;
    color: var(--header, #0F0D1D);
}

/* Caja de búsqueda del dominio (input + botón) */
#order-standard_cart .domain-checker-container .form-control {
    border-radius: 30px 0 0 30px !important;
    border-color: var(--border, #E4D6FF);
    font-family: "Jost", sans-serif;
}

#order-standard_cart .domain-checker-container .btn-primary,
#order-standard_cart .domain-checker-container .btn-success {
    border-radius: 0 30px 30px 0 !important;
}

/* ---------------------------------------------------------------
   23. CAJAS DE PRECIOS DEL ORDER FORM "HOSTIFY CART"
   (https://solutionweb.mx/my/store/hospedaje y grupos de producto
   similares). Estas clases (.pricing-box, .ybtn, .billing-cycle...)
   no tienen NINGÚN CSS propio en el template de orden de WHMCS ni en
   el sitio principal — se ven completamente sin estilo. Se diseñan
   aquí desde cero con la identidad SWM 2026.
   --------------------------------------------------------------- */
#order-hostify_cart {
    font-family: "Jost", sans-serif;
}

#order-hostify_cart #headline {
    text-align: center;
    color: var(--header, #0F0D1D);
    font-weight: 700;
    margin-bottom: 8px;
}

#order-hostify_cart #tagline {
    text-align: center;
    color: var(--text, #445375);
    font-weight: 400;
    margin-bottom: 30px;
}

#order-hostify_cart #sub-pricing {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px;
    list-style: none;
}

#order-hostify_cart #sub-pricing > li {
    padding: 0 12px;
    margin-bottom: 30px;
    display: flex;
}

/* Tarjeta de precio */
#order-hostify_cart .pricing-box {
    background: #fff;
    border: 1px solid var(--border, #E4D6FF);
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(114, 0, 255, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100% !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#order-hostify_cart .pricing-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(114, 0, 255, 0.14);
}

/* Plan destacado (isFeatured) */
#order-hostify_cart .pricing-box.bestbuy {
    border: 2px solid var(--theme, #7200FF);
    position: relative;
}

#order-hostify_cart .pricing-box.bestbuy::before {
    content: "Más popular";
    position: absolute;
    top: 14px;
    right: -34px;
    background: var(--theme, #7200FF);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 4px 38px;
    transform: rotate(45deg);
    z-index: 5;
    box-shadow: 0 2px 8px rgba(114, 0, 255, 0.3);
}

#order-hostify_cart .pricing-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0;
}

/* Cabecera: nombre del plan + precio */
#order-hostify_cart .pricing-head {
    background: var(--bg, #F8F5FC);
    padding: 30px 24px 24px;
    text-align: center;
    border-bottom: 1px solid var(--border, #E4D6FF);
}

#order-hostify_cart .pricing-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--header, #0F0D1D);
    margin-bottom: 14px;
    text-transform: none;
}

#order-hostify_cart .pricing-price {
    font-size: 38px;
    font-weight: 700;
    color: var(--theme, #7200FF);
    line-height: 1.1;
}

#order-hostify_cart .billing-cycle {
    font-size: 13px;
    color: var(--text, #445375);
    text-transform: lowercase;
    margin-top: 4px;
}

#order-hostify_cart .setup-fee {
    font-size: 12px;
    color: var(--text, #445375);
    margin-top: 6px;
}

#order-hostify_cart .free-plan,
#order-hostify_cart .one-time,
#order-hostify_cart .display-price {
    font-size: 28px;
    font-weight: 700;
    color: var(--theme, #7200FF);
}

/* Selector de ciclo de facturación (tabs) cuando hay varios periodos */
#order-hostify_cart .pricing-options .nav-tabs {
    justify-content: center;
    border-bottom: none;
    gap: 6px;
    margin-top: 10px;
}

#order-hostify_cart .pricing-options .nav-tabs li a {
    border-radius: 30px;
    border: 1px solid var(--border, #E4D6FF);
    padding: 4px 14px;
    font-size: 12px;
    color: var(--header, #0F0D1D);
}

#order-hostify_cart .pricing-options .nav-tabs li a.active,
#order-hostify_cart .pricing-options .nav-tabs li a:hover {
    background-color: var(--theme, #7200FF);
    border-color: var(--theme, #7200FF);
    color: #fff;
}

/* Lista de características */
#order-hostify_cart .pricing-details {
    padding: 24px;
    flex: 1;
}

#order-hostify_cart .pricing-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#order-hostify_cart .pricing-details ul li {
    padding: 9px 0;
    border-bottom: 1px solid var(--border-2, #E6DCED);
    font-size: 14px;
    color: var(--text, #445375);
    display: flex;
    align-items: baseline;
    gap: 6px;
}

#order-hostify_cart .pricing-details ul li:last-child {
    border-bottom: none;
}

#order-hostify_cart .pricing-details ul li span {
    font-weight: 700;
    color: var(--header, #0F0D1D);
}

/* Bloque de descripción .pricing-features (insertado por JS dentro del head) */
#order-hostify_cart .pricing-head .pricing-features {
    text-align: left;
    margin-top: 16px;
}

#order-hostify_cart .pricing-head .pricing-features ul {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
}

#order-hostify_cart .pricing-head .pricing-features ul li {
    font-size: 13px;
    color: var(--text, #445375);
    padding: 4px 0;
}

#order-hostify_cart .pricing-head .pricing-features ul li strong {
    color: var(--header, #0F0D1D);
}

/* Botón de orden (.ybtn) */
#order-hostify_cart .pricing-link {
    padding: 0 24px 24px;
    margin-top: auto;
}

#order-hostify_cart .ybtn {
    display: block;
    width: 100%;
    text-align: center;
    background-color: var(--theme, #7200FF);
    color: #fff !important;
    font-weight: 600;
    font-size: 15px;
    padding: 14px 20px;
    border-radius: 30px;
    transition: background-color 0.25s ease;
}

#order-hostify_cart .ybtn:hover {
    background-color: var(--header, #0F0D1D);
    color: #fff !important;
}

#order-hostify_cart .ybtn.unavailable {
    background-color: #ccc;
    color: #666 !important;
    cursor: not-allowed;
}

/* Características incluidas en todos los planes (debajo de las tarjetas) */
#order-hostify_cart .includes-features {
    background: var(--bg, #F8F5FC);
    border-radius: 16px;
    padding: 30px;
    margin-top: 20px;
}

#order-hostify_cart .includes-features .head-area span {
    font-size: 18px;
    font-weight: 700;
    color: var(--header, #0F0D1D);
    display: block;
    margin-bottom: 16px;
}

#order-hostify_cart .includes-features .list-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
}

#order-hostify_cart .includes-features .list-features li {
    font-size: 14px;
    color: var(--text, #445375);
    padding-left: 22px;
    position: relative;
}

#order-hostify_cart .includes-features .list-features li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    color: var(--theme, #7200FF);
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 12px;
}

@media (max-width: 767px) {
    #order-hostify_cart .pricing-box.bestbuy::before {
        right: -38px;
        top: 12px;
    }
}