/* ==========================================================
   PERUSERVERWEB - CUSTOM CSS LIMPIO
   WHMCS + Standard Cart + Premium Comparison
   ========================================================== */


/* ==========================================================
   1. VARIABLES
   ========================================================== */

:root {
    --ps-bg: #08111f;
    --ps-surface: #0d1b30;
    --ps-surface-soft: #11223d;
    --ps-input: #0b182b;

    --ps-border: #294363;
    --ps-border-light: #365474;

    --ps-text: #ffffff;
    --ps-text-soft: #e8f2ff;
    --ps-muted: #a9bbd3;

    --ps-primary: #356cff;
    --ps-accent: #2cc8ff;

    --ps-hover: #17345d;
}


/* ==========================================================
   2. BASE GENERAL
   ========================================================== */

body {
    background: var(--ps-bg);
    color: var(--ps-text);
}

a {
    color: var(--ps-accent);
}

a:hover,
a:focus {
    color: #72e3ff;
}


/* ==========================================================
   3. HEADER
   ========================================================== */

.header {
    background: var(--ps-surface);
    border-bottom: 1px solid var(--ps-border);
}

.header .logo-img {
    max-height: 48px;
}

.header .topbar .btn,
.header .topbar a {
    color: var(--ps-text);
}


/* ==========================================================
   4. MENÚ PRINCIPAL
   ========================================================== */

.main-navbar-wrapper,
.navbar-main {
    background: var(--ps-surface);
    border: 0;
    border-bottom: 1px solid var(--ps-border);
}

.main-navbar-wrapper .navbar-nav .nav-link,
.main-navbar-wrapper .navbar-nav > li > a,
.main-navbar-wrapper .dropdown-toggle,
#primary-nav .nav-link,
#primary-nav .dropdown-toggle,
.navbar-main .nav-link,
.navbar-main .navbar-nav > li > a,
.navbar-light .navbar-nav .nav-link,
header .navbar-nav > li > a {
    color: var(--ps-text-soft) !important;
    opacity: 1 !important;
}

.main-navbar-wrapper .navbar-nav .nav-link:hover,
.main-navbar-wrapper .navbar-nav .nav-link:focus,
.main-navbar-wrapper .navbar-nav .active > .nav-link,
.main-navbar-wrapper .navbar-nav > li > a:hover,
#primary-nav .nav-link:hover,
#primary-nav .nav-link:focus,
.navbar-main .nav-link:hover,
.navbar-main .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    background: var(--ps-hover) !important;
    color: var(--ps-accent) !important;
}


/* Dropdown */

.main-navbar-wrapper .dropdown-menu,
.navbar-main .dropdown-menu,
.navbar .dropdown-menu {
    background: #122441 !important;
    border: 1px solid #2d4b70 !important;
}

.main-navbar-wrapper .dropdown-menu a,
.navbar-main .dropdown-menu a,
.navbar .dropdown-menu a,
.dropdown-menu .dropdown-item {
    background: transparent !important;
    color: var(--ps-text-soft) !important;
    opacity: 1 !important;
}

.main-navbar-wrapper .dropdown-menu a:hover,
.navbar-main .dropdown-menu a:hover,
.navbar .dropdown-menu a:hover,
.dropdown-menu .dropdown-item:hover {
    background: #1d3b61 !important;
    color: #ffffff !important;
}


/* Menú móvil */

.navbar-light .navbar-toggler {
    border-color: var(--ps-border) !important;
    color: var(--ps-text-soft) !important;
}


/* ==========================================================
   5. CUERPO PRINCIPAL
   ========================================================== */

section#main-body {
    min-height: 520px;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(44, 200, 255, .08),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 18%,
            rgba(53, 108, 255, .10),
            transparent 34%
        ),
        var(--ps-bg);
}


/* ==========================================================
   6. TARJETAS / PANELES
   ========================================================== */

.card,
.panel,
.list-group-item,
.modal-content {
    background: var(--ps-surface-soft);
    border-color: var(--ps-border);
    color: var(--ps-text);
}

.card {
    border-radius: 16px;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .28);
}

.card-header,
.card-footer,
.panel-heading,
.modal-header,
.modal-footer {
    background: var(--ps-surface);
    border-color: var(--ps-border);
    color: var(--ps-text);
}

.card-body h1,
.card-body h2,
.card-body h3,
.card-body h4,
.card-body h5,
.card-body h6,
.card-title,
label {
    color: var(--ps-text);
}

.text-muted,
.card-body p,
.card-body small {
    color: var(--ps-muted) !important;
}


/* ==========================================================
   7. FORMULARIOS GENERALES
   ========================================================== */

.form-control,
.custom-select,
.input-group-text {
    background: var(--ps-input);
    border-color: var(--ps-border);
    color: var(--ps-text);
}

.form-control:focus,
.custom-select:focus {
    background: var(--ps-input);
    border-color: var(--ps-accent);
    color: var(--ps-text);

    box-shadow:
        0 0 0 .2rem rgba(44, 200, 255, .15);
}

.form-control::placeholder {
    color: #8fa4be;
    opacity: 1;
}


/* ==========================================================
   8. BOTONES GENERALES
   ========================================================== */

.btn-primary,
.btn-success {
    background:
        linear-gradient(
            135deg,
            var(--ps-primary),
            #1a9ee8
        );

    border-color: var(--ps-primary);

    color: #ffffff;
    font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
    background:
        linear-gradient(
            135deg,
            #4779ff,
            #22afea
        );

    border-color: #4ea4ff;

    color: #ffffff;

    box-shadow:
        0 10px 24px rgba(53, 108, 255, .25);
}

.btn-default,
.btn-secondary {
    background: var(--ps-surface);
    border-color: var(--ps-border);
    color: var(--ps-text);
}

.btn-default:hover,
.btn-secondary:hover {
    background: var(--ps-hover);
    border-color: #4f6f98;
    color: #ffffff;
}


/* ==========================================================
   9. TABLAS
   ========================================================== */

.table {
    color: var(--ps-text);
}

.table td,
.table th {
    border-color: var(--ps-border);
}

.table thead th {
    background: var(--ps-surface);
    border-color: var(--ps-border);
}


/* ==========================================================
   10. PAGINACIÓN
   ========================================================== */

.page-link {
    background: var(--ps-surface);
    border-color: var(--ps-border);
    color: var(--ps-accent);
}

.page-item.active .page-link {
    background: var(--ps-primary);
    border-color: var(--ps-primary);
}


/* ==========================================================
   11. ALERTAS
   ========================================================== */

.alert-info {
    background: #102d43;
    border-color: #236d8f;
    color: #dff8ff;
}

.alert-success {
    background: #103b31;
    border-color: #28795c;
    color: #dcfff3;
}

.alert-danger {
    background: #431923;
    border-color: #9a4052;
    color: #ffe3e9;
}


/* ==========================================================
  /* ==========================================================
   12. FOOTER - PERUSERVERWEB
   ========================================================== */

.footer,
footer.footer {
    background: #07101d !important;
    border-top: 1px solid #294363 !important;
    color: #a9bbd3 !important;
}

.footer *,
footer.footer * {
    color: #a9bbd3 !important;
}

.footer a,
footer.footer a {
    color: #2cc8ff !important;
    text-decoration: none !important;
}

.footer a:hover,
.footer a:focus,
footer.footer a:hover,
footer.footer a:focus {
    color: #72e3ff !important;
}


/* ==========================================================
   13. PREMIUM COMPARISON
   ========================================================== */

#order-premium_comparison #headline {
    color: #ffffff !important;

    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;

    margin-top: 0 !important;
    margin-bottom: 58px !important;

    opacity: 1 !important;
    text-shadow: none !important;
}

#order-premium_comparison #products {
    margin-top: 0 !important;
}


/* ==========================================================
   14. PLAN PRO DESTACADO
   ========================================================== */

#order-premium_comparison #product2 {
    position: relative !important;
}

#order-premium_comparison #product2::before {
    content: "★ MÁS POPULAR";

    position: absolute !important;

    top: -20px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    background:
        linear-gradient(
            135deg,
            var(--ps-primary),
            var(--ps-accent)
        ) !important;

    color: #ffffff !important;

    padding: 5px 14px !important;

    border-radius: 7px 7px 0 0 !important;

    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 16px !important;
    letter-spacing: .5px !important;

    white-space: nowrap !important;

    box-shadow:
        0 5px 15px rgba(53, 108, 255, .28) !important;

    z-index: 50 !important;
}

#order-premium_comparison #product2 .price-table {
    box-shadow:
        0 0 0 2px rgba(53, 108, 255, .85),
        0 16px 38px rgba(53, 108, 255, .20) !important;
}


/* ==========================================================
   15. SE INCLUYE CON CADA PLAN
   ========================================================== */

#order-premium_comparison
.includes-features
.head-area
> span.primary-bg-color {
    display: inline-block !important;

    background: var(--ps-surface-soft) !important;
    color: #ffffff !important;

    border: 1px solid var(--ps-border) !important;
    border-radius: 6px !important;

    padding: 7px 18px !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    opacity: 1 !important;
}

#order-premium_comparison .includes-features,
#order-premium_comparison .includes-features *,
#order-premium_comparison .features,
#order-premium_comparison .features *,
#order-premium_comparison .product-features,
#order-premium_comparison .product-features * {
    color: var(--ps-text-soft) !important;
    opacity: 1 !important;
}

#order-premium_comparison .includes-features i,
#order-premium_comparison .features i,
#order-premium_comparison .product-features i,
#order-premium_comparison .fa-check,
#order-premium_comparison .fas.fa-check {
    color: var(--ps-accent) !important;
}


/* ==========================================================
   16. STANDARD CART - BASE
   ========================================================== */

#order-standard_cart .header-lined h1,
#order-standard_cart .cart-body > h2,
#order-standard_cart .cart-body > h3 {
    color: #ffffff !important;
    font-weight: 700 !important;
}

#order-standard_cart .cart-body .header-lined p,
#order-standard_cart .cart-body > p {
    color: var(--ps-text-soft) !important;
}


/* ==========================================================
   17. STANDARD CART - CAMPOS
   ========================================================== */

#order-standard_cart .field,
#order-standard_cart input.field,
#order-standard_cart .form-control,
#order-standard_cart input.form-control,
#order-standard_cart select.form-control,
#order-standard_cart textarea.form-control {
    background: var(--ps-input) !important;
    background-color: var(--ps-input) !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    border: 1px solid var(--ps-border-light) !important;
    border-radius: 6px !important;

    opacity: 1 !important;
}

#order-standard_cart .field::placeholder,
#order-standard_cart .form-control::placeholder,
#order-standard_cart input::placeholder,
#order-standard_cart textarea::placeholder {
    color: #b8c9df !important;
    -webkit-text-fill-color: #b8c9df !important;

    opacity: 1 !important;
}

#order-standard_cart .field:focus,
#order-standard_cart .form-control:focus {
    background: #0e1e34 !important;

    border-color: var(--ps-accent) !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    box-shadow:
        0 0 0 3px rgba(44, 200, 255, .12) !important;

    outline: none !important;
}


/* Autofill Chrome */

#order-standard_cart input:-webkit-autofill,
#order-standard_cart input:-webkit-autofill:hover,
#order-standard_cart input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;

    -webkit-box-shadow:
        0 0 0 1000px var(--ps-input) inset !important;

    box-shadow:
        0 0 0 1000px var(--ps-input) inset !important;

    caret-color: #ffffff !important;

    border: 1px solid var(--ps-border-light) !important;
}


/* Iconos */

#order-standard_cart .prepend-icon .field-icon {
    color: #8fa9c7 !important;
}


/* Select */

#order-standard_cart select,
#order-standard_cart select.form-control {
    background-color: var(--ps-input) !important;
    color: #ffffff !important;
    border-color: var(--ps-border-light) !important;
}

#order-standard_cart select option {
    background: var(--ps-input) !important;
    color: #ffffff !important;
}


/* ==========================================================
   18. SUBTÍTULOS DEL CARRITO
   ========================================================== */

#order-standard_cart .sub-heading {
    border-color: var(--ps-border-light) !important;
}

#order-standard_cart .sub-heading span {
    background: var(--ps-surface) !important;
    color: #ffffff !important;

    padding: 3px 12px !important;

    border-radius: 5px !important;

    font-weight: 600 !important;
}


/* ==========================================================
   19. SELECCIÓN DE DOMINIO
   ========================================================== */

#order-standard_cart .domain-selection-options .option {
    margin-bottom: 8px !important;

    padding: 12px 18px !important;

    background: var(--ps-surface-soft) !important;

    border: 1px solid var(--ps-border) !important;
    border-radius: 10px !important;

    color: #ffffff !important;

    font-size: 13px !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease !important;
}

#order-standard_cart .domain-selection-options .option:first-child {
    padding-top: 16px !important;
    padding-bottom: 16px !important;

    border-color: #356080 !important;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, .15) !important;
}

#order-standard_cart
.domain-selection-options
.option > label {
    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 500 !important;

    opacity: 1 !important;
}

#order-standard_cart
.domain-selection-options
.option span,

#order-standard_cart
.domain-selection-options
.option p {
    color: var(--ps-text-soft) !important;
}


/* Radios */

#order-standard_cart
.domain-selection-options
input[type="radio"] {
    accent-color: var(--ps-accent) !important;
}


/* ==========================================================
   20. BUSCADOR DE DOMINIO
   ========================================================== */

#order-standard_cart #domainregister {
    background: transparent !important;
    color: var(--ps-text-soft) !important;
}

#order-standard_cart #domainregister #message {
    width: 100% !important;
    min-height: 105px !important;

    padding: 12px 14px !important;

    background: var(--ps-input) !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    border: 1px solid var(--ps-border-light) !important;
    border-radius: 7px !important;

    font-size: 13px !important;
    line-height: 1.5 !important;

    opacity: 1 !important;

    resize: vertical !important;
}

#order-standard_cart #domainregister #message:focus {
    border-color: var(--ps-accent) !important;

    box-shadow:
        0 0 0 3px rgba(44, 200, 255, .12) !important;
}

#order-standard_cart #domainregister #message::placeholder {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    opacity: .95 !important;
}


/* Opciones avanzadas */

#order-standard_cart #domainregister .domains-row,
#order-standard_cart #domainregister .domains-row label,
#order-standard_cart #domainregister .domains-row button,
#order-standard_cart #domainregister .domains-row .multiselect {
    color: #ffffff !important;
    font-size: 12px !important;
    opacity: 1 !important;
}


/* Botón comprobar */

#order-standard_cart #domainregister .btn-primary {
    min-height: 42px !important;

    padding-left: 18px !important;
    padding-right: 18px !important;

    border-radius: 7px !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    box-shadow:
        0 7px 18px rgba(53, 108, 255, .22) !important;
}


/* ==========================================================
   21. SIDEBAR DEL CARRITO
   ========================================================== */

#order-standard_cart .cart-sidebar a {
    color: #f2f7ff !important;
    opacity: 1 !important;
}

#order-standard_cart .cart-sidebar a:hover,
#order-standard_cart .cart-sidebar a:focus {
    color: var(--ps-accent) !important;
}


/* ==========================================================
   22. CONFIGURACIÓN DEL PRODUCTO
   ========================================================== */

#order-standard_cart .product-info {
    background: var(--ps-surface-soft) !important;

    border: 1px solid var(--ps-border) !important;
    border-radius: 10px !important;

    color: #ffffff !important;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, .18) !important;
}

#order-standard_cart .product-info,
#order-standard_cart .product-info p,
#order-standard_cart .product-info span,
#order-standard_cart .product-info div,
#order-standard_cart .product-info li {
    color: var(--ps-text-soft) !important;
}

#order-standard_cart .product-info .product-title,
#order-standard_cart .product-info h2,
#order-standard_cart .product-info h3,
#order-standard_cart .product-info h4 {
    color: #ffffff !important;
    font-weight: 700 !important;
}


/* ==========================================================
   23. RESUMEN DEL PEDIDO
   ========================================================== */

#order-standard_cart .order-summary {
    background: var(--ps-surface-soft) !important;

    border: 1px solid var(--ps-border) !important;
    border-radius: 10px !important;

    color: #ffffff !important;

    overflow: hidden !important;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .20) !important;
}

#order-standard_cart .order-summary .summary-container {
    background: var(--ps-surface-soft) !important;
}

#order-standard_cart .order-summary *,
#order-standard_cart .order-summary .product-name,
#order-standard_cart .order-summary .product-group,
#order-standard_cart .order-summary .summary-totals,
#order-standard_cart .order-summary .subtotal,
#order-standard_cart .order-summary .total-due {
    color: #ffffff !important;
}

#order-standard_cart .order-summary hr {
    border-color: var(--ps-border) !important;
}


/* ==========================================================
   24. REVISAR Y PAGAR
   ========================================================== */

#order-standard_cart .view-cart-items {
    background: var(--ps-surface-soft) !important;

    border: 1px solid var(--ps-border) !important;
    border-radius: 9px !important;

    overflow: hidden !important;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, .18) !important;
}

#order-standard_cart .view-cart-items-header {
    background: #0876ad !important;
    border: 0 !important;
    color: #ffffff !important;
}

#order-standard_cart .view-cart-items-header > div,
#order-standard_cart .view-cart-items-header span {
    color: #ffffff !important;
    font-weight: 700 !important;
}

#order-standard_cart .view-cart-items .item {
    background: var(--ps-surface-soft) !important;
    border-color: var(--ps-border) !important;
    color: var(--ps-text-soft) !important;
}

#order-standard_cart .view-cart-items .item,
#order-standard_cart .view-cart-items .item div,
#order-standard_cart .view-cart-items .item span,
#order-standard_cart .view-cart-items .item p,
#order-standard_cart .view-cart-items .item strong {
    color: var(--ps-text-soft) !important;
}

#order-standard_cart .view-cart-items .item .item-title,
#order-standard_cart .view-cart-items .item .product-name {
    color: #ffffff !important;
    font-weight: 700 !important;
}

#order-standard_cart .view-cart-items .item a {
    color: var(--ps-accent) !important;
}

#order-standard_cart .view-cart-items .item .btn-remove-from-cart {
    color: #ff8090 !important;
}


/* ==========================================================
   25. CUPÓN / CÓDIGO PROMOCIONAL
   ========================================================== */

#order-standard_cart .view-cart-tabs {
    background: transparent !important;
}

#order-standard_cart .view-cart-tabs .tab-content {
    background: var(--ps-surface-soft) !important;

    border: 1px solid var(--ps-border) !important;

    color: #ffffff !important;
}

#order-standard_cart .view-cart-tabs .nav-tabs > li > a,
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link {
    background: var(--ps-surface) !important;

    border-color: var(--ps-border) !important;

    color: var(--ps-text-soft) !important;
}

#order-standard_cart .view-cart-tabs .nav-tabs > li.active > a,
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active {
    background: var(--ps-surface-soft) !important;

    border-color: var(--ps-border) !important;

    color: #ffffff !important;
}

#order-standard_cart .view-cart-tabs .btn {
    border-radius: 6px !important;
    font-weight: 700 !important;
}


/* ==========================================================
   26. CHECKOUT - LABELS / TEXTOS
   ========================================================== */

#order-standard_cart .form-group label,
#order-standard_cart .field-container label {
    color: var(--ps-text-soft) !important;
}

#order-standard_cart small,
#order-standard_cart .help-block,
#order-standard_cart .text-muted {
    color: var(--ps-muted) !important;
}


/* ==========================================================
   27. SEGURIDAD DE LA CUENTA
   ========================================================== */

#order-standard_cart .password-strength-meter,
#order-standard_cart .progress {
    background: #13243b !important;

    border: 1px solid var(--ps-border) !important;
    border-radius: 6px !important;

    overflow: hidden !important;
}

#order-standard_cart .password-strength-meter p,
#order-standard_cart .password-strength-meter small {
    color: var(--ps-muted) !important;
}


/* ==========================================================
   28. TOTAL A ABONAR
   ========================================================== */

#order-standard_cart #totalDueToday {
    background:
        linear-gradient(
            135deg,
            rgba(53, 108, 255, .16),
            rgba(44, 200, 255, .10)
        ) !important;

    border: 1px solid #356080 !important;
    border-radius: 7px !important;

    color: #ffffff !important;

    padding: 12px 16px !important;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, .12) !important;
}

#order-standard_cart #totalDueToday * {
    color: #ffffff !important;
}


/* ==========================================================
   29. MÉTODO DE PAGO
   ========================================================== */

#order-standard_cart #paymentGatewaysContainer,
#order-standard_cart #paymentGatewaysContainer label {
    color: var(--ps-text-soft) !important;
}

#order-standard_cart input[type="radio"],
#order-standard_cart input[type="checkbox"] {
    accent-color: var(--ps-accent);
}


/* ==========================================================
   30. NOTAS ADICIONALES
   ========================================================== */

#order-standard_cart textarea[name="notes"] {
    background: var(--ps-input) !important;

    color: #ffffff !important;

    border: 1px solid var(--ps-border-light) !important;
    border-radius: 7px !important;

    padding: 12px 14px !important;
}

#order-standard_cart textarea[name="notes"]::placeholder {
    color: #b8c9df !important;
    opacity: 1 !important;
}


/* ==========================================================
   31. MARKETING / NEWSLETTER
   ========================================================== */

#order-standard_cart .marketing-email-optin {
    margin-top: 16px !important;
    margin-bottom: 18px !important;

    color: var(--ps-text-soft) !important;
}

#order-standard_cart .marketing-email-optin h4 {
    color: #ffffff !important;
}

#order-standard_cart .marketing-email-optin p {
    color: var(--ps-text-soft) !important;
    opacity: 1 !important;
}


/* ==========================================================
   32. SWITCH MARKETING WHMCS
   ========================================================== */

/*
   IMPORTANTE:
   Aquí NO ocultamos Bootstrap Switch.
   Tampoco modificamos directamente el checkbox.
   Estilizamos el componente que genera WHMCS.
*/

#order-standard_cart
.marketing-email-optin
.bootstrap-switch {
    width: 54px !important;
    min-width: 54px !important;
    height: 28px !important;

    margin-top: 8px !important;

    background: #203651 !important;

    border: 1px solid var(--ps-border-light) !important;
    border-radius: 30px !important;

    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, .25) !important;

    overflow: hidden !important;

    cursor: pointer !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease !important;
}

#order-standard_cart
.marketing-email-optin
.bootstrap-switch-container {
    height: 26px !important;

    transition:
        margin-left .20s ease !important;
}

#order-standard_cart
.marketing-email-optin
.bootstrap-switch-handle-on,

#order-standard_cart
.marketing-email-optin
.bootstrap-switch-handle-off {
    width: 27px !important;
    min-width: 27px !important;
    height: 26px !important;

    padding: 0 !important;

    border: 0 !important;

    font-size: 0 !important;
    line-height: 26px !important;
}

#order-standard_cart
.marketing-email-optin
.bootstrap-switch-handle-on {
    background:
        linear-gradient(
            135deg,
            var(--ps-primary),
            var(--ps-accent)
        ) !important;
}

#order-standard_cart
.marketing-email-optin
.bootstrap-switch-handle-off {
    background: #203651 !important;
}

#order-standard_cart
.marketing-email-optin
.bootstrap-switch-label {
    position: relative !important;

    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;

    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
}

#order-standard_cart
.marketing-email-optin
.bootstrap-switch-label::before {
    content: "" !important;

    position: absolute !important;

    top: 4px !important;
    left: 4px !important;

    width: 18px !important;
    height: 18px !important;

    background: #ffffff !important;

    border-radius: 50% !important;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, .35) !important;
}

#order-standard_cart
.marketing-email-optin
.bootstrap-switch.bootstrap-switch-on {
    background:
        linear-gradient(
            135deg,
            var(--ps-primary),
            var(--ps-accent)
        ) !important;

    border-color: var(--ps-accent) !important;

    box-shadow:
        0 0 0 3px rgba(44, 200, 255, .10) !important;
}

#order-standard_cart
.marketing-email-optin
.bootstrap-switch.bootstrap-switch-off {
    background: #203651 !important;
    border-color: var(--ps-border-light) !important;
}

#order-standard_cart
.marketing-email-optin
.bootstrap-switch:hover {
    border-color: var(--ps-accent) !important;

    box-shadow:
        0 0 0 3px rgba(44, 200, 255, .08) !important;
}


/* ==========================================================
   33. BOTÓN COMPLETAR PEDIDO
   ========================================================== */

#order-standard_cart #btnCompleteOrder {
    background:
        linear-gradient(
            135deg,
            var(--ps-primary),
            #1aaee8
        ) !important;

    border: 1px solid rgba(255, 255, 255, .15) !important;
    border-radius: 7px !important;

    color: #ffffff !important;

    font-weight: 700 !important;

    padding: 11px 22px !important;

    box-shadow:
        0 8px 22px rgba(53, 108, 255, .25) !important;

    transition:
        transform .15s ease,
        box-shadow .15s ease !important;
}

#order-standard_cart #btnCompleteOrder:hover,
#order-standard_cart #btnCompleteOrder:focus {
    background:
        linear-gradient(
            135deg,
            #4779ff,
            var(--ps-accent)
        ) !important;

    transform: translateY(-1px) !important;

    box-shadow:
        0 12px 28px rgba(53, 108, 255, .32) !important;
}


/* ==========================================================
   /* ==========================================================
   AVISO DE SEGURIDAD - ESTILO PREMIUM
   ========================================================== */

#order-standard_cart .checkout-security-msg {
    background: rgba(180, 130, 20, .12) !important;
    border: 1px solid rgba(218, 169, 55, .45) !important;
    border-radius: 8px !important;

    color: #ffe9a8 !important;

    padding: 14px 16px !important;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, .14) !important;
}

#order-standard_cart .checkout-security-msg,
#order-standard_cart .checkout-security-msg * {
    color: #ffe9a8 !important;
}

#order-standard_cart .checkout-security-msg .fa-lock {
    color: #ffd66b !important;
}


/* ==========================================================
   35. RESPONSIVE
   ========================================================== */

@media (max-width: 767px) {

    .header .logo-img {
        max-width: 220px;
        max-height: 42px;
    }

    section#main-body {
        min-height: 430px;
    }


    /* Premium Comparison */

    #order-premium_comparison #headline {
        font-size: 25px !important;
        margin-bottom: 35px !important;
    }

    #order-premium_comparison #product2::before {
        top: -15px !important;

        font-size: 9px !important;

        padding: 4px 11px !important;
    }

    #order-premium_comparison #product2 .price-table {
        box-shadow:
            0 0 0 2px rgba(53, 108, 255, .65),
            0 10px 25px rgba(53, 108, 255, .16) !important;
    }


    /* Dominio */

    #order-standard_cart .domain-selection-options .option {
        padding: 12px 14px !important;
        border-radius: 9px !important;
    }

    #order-standard_cart #domainregister #message {
        min-height: 118px !important;
        font-size: 14px !important;
    }

    #order-standard_cart #domainregister .btn-primary {
        width: 100% !important;

        min-height: 42px !important;

        margin-top: 7px !important;

        font-size: 16px !important;
    }


    /* Tarjetas */

    #order-standard_cart .product-info,
    #order-standard_cart .order-summary,
    #order-standard_cart .view-cart-items {
        border-radius: 8px !important;
    }


    /* Campos checkout */

    #order-standard_cart .field,
    #order-standard_cart .form-control {
        min-height: 42px;
    }


    /* Switch */

    #order-standard_cart
    .marketing-email-optin
    .bootstrap-switch {
        margin-top: 10px !important;
    }
}

/* ==========================================================
   FIX DEFINITIVO - CANDADO AVISO DE SEGURIDAD
   ========================================================== */

#order-standard_cart .checkout-security-msg {
    position: relative !important;

    padding: 12px 16px 12px 48px !important;

    background: rgba(180, 130, 20, .12) !important;
    border: 1px solid rgba(218, 169, 55, .45) !important;
    border-radius: 8px !important;

    color: #ffe9a8 !important;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, .14) !important;
}


/* Candado generado por WHMCS */
#order-standard_cart .checkout-security-msg::before {
    position: absolute !important;

    left: 15px !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    margin: 0 !important;

    color: #ffd65a !important;

    font-size: 22px !important;
    line-height: 1 !important;
}


/* Texto */
#order-standard_cart .checkout-security-msg,
#order-standard_cart .checkout-security-msg * {
    color: #ffe9a8 !important;
}

#order-standard_cart .checkout-security-msg {
    font-size: 12px !important;
    line-height: 1.5 !important;
}

#order-standard_cart .checkout-security-msg strong {
    font-weight: 700 !important;
}
/* ==========================================================
  /* ==========================================================
   SELECTOR IDIOMA / MONEDA - FOOTER
   ========================================================== */

footer#footer .btn[data-target="#modalChooseLanguage"] {
    background: #0d1b30 !important;
    border: 1px solid #294363 !important;
    border-radius: 7px !important;

    color: #e8f2ff !important;

    padding: 7px 12px !important;

    font-size: 13px !important;
    font-weight: 500 !important;

    box-shadow: none !important;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease !important;
}

footer#footer .btn[data-target="#modalChooseLanguage"]:hover,
footer#footer .btn[data-target="#modalChooseLanguage"]:focus {
    background: #17345d !important;

    border-color: #2cc8ff !important;

    color: #ffffff !important;

    box-shadow:
        0 0 0 3px rgba(44, 200, 255, .10) !important;

    outline: none !important;
}
/* ==========================================================
   AJUSTE SUPERIOR - HEADER + BREADCRUMB + NAV
   ========================================================== */

/* Header superior */
header#header,
.header {
    background: #0b1628 !important;
    border-bottom: 1px solid #294363 !important;
}

/* Logo / zona superior */
header#header .container,
.header .container {
    background: transparent !important;
}

/* Buscador superior */
header#header .form-control,
.header .form-control {
    background: #0b182b !important;
    border: 1px solid #294363 !important;
    color: #ffffff !important;
}

header#header .form-control::placeholder,
.header .form-control::placeholder {
    color: #8fa4be !important;
}

/* Iconos superiores */
header#header i,
.header i {
    color: #8fa4be !important;
}

/* Navbar */
.main-navbar-wrapper,
.navbar-main {
    background: #0d1b30 !important;
    border-bottom: 1px solid #294363 !important;
}

.main-navbar-wrapper .nav-link,
.navbar-main .nav-link {
    color: #e8f2ff !important;
}

.main-navbar-wrapper .nav-link:hover,
.navbar-main .nav-link:hover {
    background: #17345d !important;
    color: #2cc8ff !important;
}

/* Franja "Carrito" / breadcrumb */
.master-breadcrumb,
.breadcrumb,
nav[aria-label="breadcrumb"] {
    background: #0b1628 !important;
    border-bottom: 1px solid #294363 !important;
    color: #a9bbd3 !important;
}

.master-breadcrumb a,
.breadcrumb a {
    color: #a9bbd3 !important;
}

.master-breadcrumb a:hover,
.breadcrumb a:hover {
    color: #2cc8ff !important;
}
/* ==========================================================
   /* ==========================================================
   LOGO HEADER
   ========================================================== */

header.header .navbar-brand img.logo-img {
    display: block !important;
    width: 145px !important;
    height: auto !important;
    max-width: 145px !important;
    max-height: none !important;
    object-fit: contain !important;
}

@media (max-width: 767px) {
    header.header .navbar-brand img.logo-img {
        width: 135px !important;
        max-width: 135px !important;
    }
}
.logo img,
.navbar-brand img,
header img[src*="logo"] {
    width: auto !important;
    height: 56px !important;
    max-height: 56px !important;
    max-width: 240px !important;
}
.logo-img {
    width: 300px !important;
    height: auto !important;
    max-width: none !important;
    max-height: 80px !important;
}
/* Selector de país del formulario de compra */
select.form-control {
    background-color: #07182a !important;
    color: #ffffff !important;
    border: 1px solid #3876a8 !important;
}

/* Opciones desplegables */
select.form-control option {
    background-color: #07182a !important;
    color: #ffffff !important;
}

/* Compatibilidad con Select2 */
.select2-container .select2-selection--single {
    background-color: #07182a !important;
    border: 1px solid #3876a8 !important;
}

.select2-container .select2-selection__rendered {
    color: #ffffff !important;
}

/* Fondo únicamente para el logo dentro de las facturas */
.invoice-container img[src*="logo.png"] {
    background-color: #07182a !important;
    padding: 10px 14px !important;
    border-radius: 5px !important;
    width: 300px !important;
    height: auto !important;
}

/* Tarjetas del configurador de productos */
#order-standard_cart .product-info,
#order-standard_cart .summary-container {
    background: #0b1b2f !important;
    color: #ffffff !important;
    border: 1px solid #31577a !important;
}

/* Texto dentro de las tarjetas */
#order-standard_cart .product-info *,
#order-standard_cart .summary-container * {
    color: #ffffff !important;
}

/* Líneas del resumen */
#order-standard_cart .summary-container .subtotal,
#order-standard_cart .summary-container .total-due-today {
    border-color: #31577a !important;
}

/* Encabezado del resumen */
#order-standard_cart .summary-container .product-name {
    background: #17314d !important;
    color: #ffffff !important;
}
/* ==========================================================
   RESTAURAR FONDO OSCURO - PORTAL PERUSERVERWEB
   ========================================================== */

/* Cabecera superior */
header#header,
header.header,
.header {
    background: #0d1b30 !important;
    border-bottom: 1px solid #294363 !important;
}

/* Contenido principal */
body,
section#main-body,
#main-body,
.main-body {
    background-color: #08111f !important;
    color: #ffffff !important;
}

/* Buscador de dominios de la página de inicio */
section#home-banner,
#home-banner,
.home-domain-search,
.domain-checker-container {
    background-color: #08111f !important;
    color: #ffffff !important;
}

/* Franja de navegación secundaria */
.master-breadcrumb,
.breadcrumb {
    background-color: #0b1628 !important;
    border-color: #294363 !important;
    color: #a9bbd3 !important;
}

/* Evitar contenedores blancos en el inicio */
section#main-body > .container,
section#main-body > .container-fluid {
    background-color: transparent !important;
}
/* ==========================================================
  /* ==========================================================
   OCULTAR ACCESOS RÁPIDOS INFERIORES DEL INICIO
   ========================================================== */

/* Títulos: “¿Cómo podemos ayudarle?” y “Su cuenta” */
.primary-content > h2:nth-of-type(n+2) {
    display: none !important;
}

/* Cuadros situados debajo de esos títulos */
.primary-content > h2:nth-of-type(n+2) + .action-icon-btns {
    display: none !important;
}
/* ==========================================================
   PORTADA LIMPIA - OCULTAR PRECIOS DE DOMINIOS
   ========================================================== */

.home-domain-search .tld-logos,
.home-domain-search a[href*="/domain/pricing"] {
    display: none !important;
}

/* Reducir el espacio que queda debajo del CAPTCHA */
.home-domain-search .p-5.clearfix {
    padding-bottom: 1.5rem !important;
}
/* ==========================================================
   BUSCADOR DE DOMINIOS OSCURO - SELECTORES REALES
   ========================================================== */

#frmDomainHomepage .input-group-wrapper,
#frmDomainHomepage .input-group.advanced-input {
    background: #0b182b !important;
    background-color: #0b182b !important;

    border-color: #365474 !important;
    box-shadow: none !important;
}

#frmDomainHomepage textarea[name="message"] {
    background: #0b182b !important;
    background-color: #0b182b !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    border: 1px solid #365474 !important;
    box-shadow: none !important;
    outline: none !important;
}

#frmDomainHomepage textarea[name="message"]::placeholder {
    color: #a9bbd3 !important;
    -webkit-text-fill-color: #a9bbd3 !important;
    opacity: 1 !important;
}

#frmDomainHomepage textarea[name="message"]:focus {
    border-color: #2cc8ff !important;
    box-shadow: 0 0 0 3px rgba(44, 200, 255, .12) !important;
}