/* =========================================
   WHMCS "IRIS" THEME ENGINE - FINAL VERSION
   Template: Twenty-One | WHMCS 9.1.0
   ========================================= */

:root {
    --iris-bg: #f4f6f9;
    --iris-card-bg: #ffffff;
    --iris-border: #e2e8f0;
    --iris-primary: #4f46e5;
    --iris-primary-hover: #4338ca;
    --iris-text: #1e293b;
    --iris-text-muted: #64748b;
    --iris-radius: 12px;
    --iris-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

/* =========================================
   1. GLOBAL & TYPOGRAPHY
   ========================================= */
html, body {
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    background-color: var(--iris-bg) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    color: var(--iris-text) !important;
}

h1, .h1 { font-weight: 600 !important; color: var(--iris-text) !important; }
h2, .h2 { font-weight: 600 !important; color: var(--iris-text) !important; }
h3, .h3 { font-weight: 600 !important; color: var(--iris-text) !important; }
h4, .h4 { font-weight: 600 !important; color: #334155 !important; }
h5, .h5 { font-weight: 600 !important; color: #334155 !important; }
h6, .h6 { font-weight: 600 !important; color: #475569 !important; }

/* =========================================
   2. BOTONES - ESTILO IRIS (CORREGIDO)
   Solo aplica a botones primarios específicos
   ========================================= */
.btn {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    line-height: 1.5 !important;
}

/* Solo botones primarios y success específicos */
.btn-primary,
button.btn-primary,
input.btn-primary {
    background-color: var(--iris-primary) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25) !important;
}

.btn-primary:hover,
button.btn-primary:hover,
input.btn-primary:hover {
    background-color: var(--iris-primary-hover) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4) !important;
}

.btn-success,
button.btn-success,
input.btn-success {
    background-color: var(--iris-primary) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25) !important;
}

.btn-success:hover,
button.btn-success:hover,
input.btn-success:hover {
    background-color: var(--iris-primary-hover) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4) !important;
}

/* Botones outline/borde - MANTENER VISIBILIDAD */
.btn-outline-primary,
.btn-outline-secondary,
.outline-btn,
.btn-default,
.btn-info,
.btn-warning,
.btn-danger {
    font-weight: 600 !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.outline-btn:hover,
.btn-default:hover {
    transform: translateY(-2px) !important;
}

/* Botones del carrito */
.cart-btn,
.btn-cart,
#btnCart {
    background-color: var(--iris-primary) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.cart-btn:hover,
.btn-cart:hover,
#btnCart:hover {
    background-color: var(--iris-primary-hover) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

.btn-sm,
.btn-group-sm > .btn {
    font-size: 13px !important;
    padding: 6px 16px !important;
}

.btn-lg,
.btn-group-lg > .btn {
    font-size: 16px !important;
    padding: 14px 32px !important;
}

.btn i,
.btn .fa,
.btn .fas,
.btn .far,
.btn .fal {
    font-size: 14px !important;
    margin-right: 6px !important;
}

/* =========================================
   3. CARDS, PANELS & ALERTS
   ========================================= */
.card, .panel, .mc-promo-login, .mc-promo-manage, .client-home-cards .card {
    background-color: var(--iris-card-bg) !important;
    border: 1px solid var(--iris-border) !important;
    border-radius: var(--iris-radius) !important;
    box-shadow: var(--iris-shadow) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07) !important;
    transform: translateY(-2px);
}
.card-header, .panel-heading {
    background-color: transparent !important;
    border-bottom: 1px solid var(--iris-border) !important;
    font-weight: 600;
    color: var(--iris-text);
}

.alert { border-radius: 8px; border: 1px solid var(--iris-border); }
.alert-info { background-color: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.alert-success { background-color: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.alert-warning { background-color: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-danger { background-color: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* =========================================
   4. FORMS (PADDING CORREGIDO)
   ========================================= */
.form-control, .field {
    border: 1px solid var(--iris-border) !important;
    border-radius: 8px !important;
    background-color: #fff !important;
    color: var(--iris-text) !important;
    font-size: 14px !important;
    padding: 8px 12px !important; /* Reducido de 10px 14px */
    line-height: 1.5 !important;
    height: auto !important;
}
.form-control:focus {
    border-color: var(--iris-primary) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important;
    outline: none !important;
}

/* Selects específicos */
select.form-control {
    padding: 8px 32px 8px 12px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 12px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* =========================================
   5. DASHBOARD TILES
   ========================================= */
.tiles .tile {
    display: block;
    position: relative;
    padding: 24px 20px !important;
    background-color: #ffffff !important;
    border: 1px solid var(--iris-border) !important;
    border-radius: var(--iris-radius) !important;
    box-shadow: var(--iris-shadow) !important;
    text-decoration: none;
    transition: all 0.3s ease !important;
    overflow: hidden;
}
.tiles .tile:hover {
    background-color: #f8fafc !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07) !important;
    border-color: var(--iris-primary) !important;
}
.tiles .tile .stat {
    margin-top: 10px !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    color: var(--iris-text) !important;
    line-height: 1 !important;
}
.tiles .tile .title {
    font-weight: 600 !important;
    color: var(--iris-text-muted) !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    margin-top: 8px !important;
}
.tiles .tile .highlight {
    margin-top: 16px !important;
    height: 4px !important;
    border-radius: 4px !important;
    width: 40px !important;
    transition: width 0.3s ease !important;
}
.tiles .tile:hover .highlight { width: 60px !important; }
.tiles .tile i {
    position: absolute !important;
    top: 10px !important;
    right: 15px !important;
    font-size: 60px !important;
    line-height: 1 !important;
    color: var(--iris-primary) !important;
    opacity: 0.08 !important;
    transition: all 0.3s ease !important;
}
.tiles .tile:hover i {
    font-size: 65px !important;
    opacity: 0.15 !important;
    transform: rotate(10deg);
}
.tiles .tile .highlight.bg-color-blue { background-color: #3b82f6 !important; }
.tiles .tile .highlight.bg-color-green { background-color: #10b981 !important; }
.tiles .tile .highlight.bg-color-orange { background-color: #f59e0b !important; }
.tiles .tile .highlight.bg-color-red { background-color: #ef4444 !important; }
.tiles .tile .highlight.bg-color-purple { background-color: #8b5cf6 !important; }

/* =========================================
   6. RESPONSIVE TABLES
   ========================================= */
.primary-content .table-responsive,
.primary-content .dataTables_wrapper,
div[menuitemname="Active Products/Services"] .table-responsive,
div[menuitemname="My Domains"] .table-responsive,
div[menuitemname="My Invoices"] .table-responsive,
div[menuitemname="My Quotes"] .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 20px !important;
}

.primary-content table.table-list,
.primary-content .dataTables_wrapper table,
div[menuitemname="Active Products/Services"] table,
div[menuitemname="My Domains"] table,
div[menuitemname="My Invoices"] table,
div[menuitemname="My Quotes"] table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background-color: #ffffff !important;
    border: 1px solid var(--iris-border) !important;
    border-radius: var(--iris-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--iris-shadow) !important;
}

.primary-content table.table-list thead th,
.primary-content .dataTables_wrapper table thead th {
    background-color: #f8fafc !important;
    color: var(--iris-text-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 16px !important;
    border-bottom: 2px solid var(--iris-border) !important;
    white-space: nowrap !important;
}

.primary-content table.table-list tbody td,
.primary-content .dataTables_wrapper table tbody td {
    padding: 12px 16px !important;
    font-size: 14px !important;
    color: #334155 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
}

.primary-content table.table-list tbody tr:last-child td { border-bottom: none !important; }
.primary-content table.table-list tbody tr:hover td { background-color: #f8fafc !important; }

.primary-content table.table-list .label,
.primary-content table.table-list .badge,
.primary-content table.table-list .status {
    border-radius: 20px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-block !important;
}

@media (max-width: 767.98px) {
    .primary-content table.table-list thead,
    .primary-content .dataTables_wrapper table thead {
        display: none !important;
    }
    .primary-content table.table-list,
    .primary-content table.table-list tbody,
    .primary-content table.table-list tr,
    .primary-content table.table-list td {
        display: block !important;
        width: 100% !important;
    }
    .primary-content table.table-list tbody tr {
        margin-bottom: 16px !important;
        border: 1px solid var(--iris-border) !important;
        border-radius: var(--iris-radius) !important;
        background-color: #ffffff !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
        padding: 16px !important;
    }
    .primary-content table.table-list tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 0 !important;
        border: none !important;
        border-bottom: 1px solid #f1f5f9 !important;
        text-align: right !important;
        min-height: 40px !important;
    }
    .primary-content table.table-list tbody td:last-child { border-bottom: none !important; }
    .primary-content table.table-list tbody td:before {
        content: attr(data-label) !important;
        font-weight: 600 !important;
        color: var(--iris-text-muted) !important;
        font-size: 13px !important;
        text-align: left !important;
        margin-right: 16px !important;
        flex-shrink: 0 !important;
        min-width: 120px !important;
    }
    .primary-content table.table-list .btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
        margin: 4px 2px !important;
    }
}

@media (min-width: 768px) {
    .primary-content table.table-list,
    .primary-content .dataTables_wrapper table {
        display: table !important;
    }
    .primary-content table.table-list tbody { display: table-row-group !important; }
    .primary-content table.table-list tbody tr { display: table-row !important; }
    .primary-content table.table-list tbody td {
        display: table-cell !important;
        text-align: left !important;
        width: auto !important;
    }
    .primary-content table.table-list tbody td:before { display: none !important; }
    .primary-content table.table-list thead { display: table-header-group !important; }
}

/* =========================================
   7. DOMAIN ACTION BUTTONS
   ========================================= */
.btn-group.btn-group-sm.mb-3 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

.btn-group.btn-group-sm.mb-3 .btn {
    margin-left: 0 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    background-color: var(--iris-primary) !important;
    border-color: var(--iris-primary) !important;
    color: #ffffff !important;
    transition: all 0.3s ease !important;
}

.btn-group.btn-group-sm.mb-3 .btn:hover {
    background-color: var(--iris-primary-hover) !important;
    border-color: var(--iris-primary-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
}

.btn-group.btn-group-sm.mb-3 .btn i {
    margin-right: 6px !important;
    font-size: 14px !important;
    color: #ffffff !important;
}

@media (max-width: 767.98px) {
    .btn-group.btn-group-sm.mb-3 {
        justify-content: center !important;
        gap: 6px !important;
        width: 100% !important;
    }
    .btn-group.btn-group-sm.mb-3 .btn {
        font-size: 0 !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
    }
    .btn-group.btn-group-sm.mb-3 .btn i {
        font-size: 14px !important;
        margin-right: 4px !important;
    }
    .btn-group.btn-group-sm.mb-3 .btn::after {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #ffffff !important;
    }
    .btn-group.btn-group-sm.mb-3 .btn:nth-child(1)::after { content: 'NS' !important; }
    .btn-group.btn-group-sm.mb-3 .btn:nth-child(2)::after { content: 'Editar' !important; }
    .btn-group.btn-group-sm.mb-3 .btn:nth-child(3)::after { content: 'Renovar' !important; }
    .btn-group.btn-group-sm.mb-3 .btn:nth-child(4)::after { content: 'Más' !important; }
}

/* =========================================
   8. STANDARD CART
   ========================================= */
#order-standard_cart {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    color: var(--iris-text) !important;
}

#order-standard_cart .products .product {
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid var(--iris-border) !important;
    border-radius: var(--iris-radius) !important;
    background-color: #ffffff !important;
    box-shadow: var(--iris-shadow) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
    height: 100% !important;
}

#order-standard_cart .products .product:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.15) !important;
    border-color: var(--iris-primary) !important;
}

#order-standard_cart .products .product header {
    background-color: #f8fafc !important;
    padding: 20px !important;
    border-bottom: 1px solid var(--iris-border) !important;
    flex-shrink: 0 !important;
}

#order-standard_cart .products .product header .product-icon {
    font-size: 28px !important;
    color: var(--iris-primary) !important;
}

#order-standard_cart .products .product header h4,
#order-standard_cart .products .product header span {
    color: var(--iris-text) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

#order-standard_cart .products .product .product-desc {
    padding: 20px !important;
    color: #475569 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    flex-grow: 1 !important;
}

#order-standard_cart .products .product .product-desc ul {
    padding-left: 20px !important;
    list-style: none !important;
    margin-bottom: 0 !important;
}

#order-standard_cart .products .product .product-desc ul li {
    font-size: 15px !important;
    color: #334155 !important;
    line-height: 1.5 !important;
    margin-bottom: 8px !important;
}

#order-standard_cart .products .product .product-desc ul li .fas,
#order-standard_cart .products .product .product-desc ul li .fa-check {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 15px !important;
    color: var(--iris-primary) !important;
    margin-right: 8px !important;
}

#order-standard_cart .products .product footer,
#order-standard_cart .products .product .product-footer {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    padding: 20px !important;
    background-color: #f8fafc !important;
    border-top: 1px solid var(--iris-border) !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

#order-standard_cart .products .product footer .price,
#order-standard_cart .products .product .product-pricing {
    flex: 0 0 auto !important;
    text-align: left !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--iris-primary) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#order-standard_cart .products .product footer .price small,
#order-standard_cart .products .product footer .price .billing-cycle,
#order-standard_cart .products .product .product-pricing small,
#order-standard_cart .products .product .product-pricing .billing-cycle {
    display: block !important;
    font-size: 15px !important;
    color: var(--iris-text-muted) !important;
    font-weight: 500 !important;
    margin-top: 6px !important;
    text-transform: capitalize !important;
}

#order-standard_cart .products .product footer .btn-order-now,
#order-standard_cart .products .product footer .btn-block,
#order-standard_cart .products .product footer .btn,
#order-standard_cart .products .product footer a.btn {
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 0 0 auto !important;
    padding: 12px 28px !important;
    background-color: var(--iris-primary) !important;
    border-color: var(--iris-primary) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 180px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
}

#order-standard_cart .products .product footer .btn-order-now:hover,
#order-standard_cart .products .product footer .btn-block:hover,
#order-standard_cart .products .product footer .btn:hover,
#order-standard_cart .products .product footer a.btn:hover {
    background-color: var(--iris-primary-hover) !important;
    border-color: var(--iris-primary-hover) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
    text-decoration: none !important;
}

#order-standard_cart .products .product footer .btn-order-now i,
#order-standard_cart .products .product footer .btn-block i,
#order-standard_cart .products .product footer .btn i {
    color: #ffffff !important;
    font-size: 14px !important;
    margin-right: 6px !important;
}

@media (max-width: 767.98px) {
    #order-standard_cart .products .product footer,
    #order-standard_cart .products .product .product-footer {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        text-align: center !important;
        padding: 16px !important;
    }
    
    #order-standard_cart .products .product footer .price,
    #order-standard_cart .products .product .product-pricing {
        text-align: center !important;
        width: 100% !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
    }
    
    #order-standard_cart .products .product footer .btn-order-now,
    #order-standard_cart .products .product footer .btn-block,
    #order-standard_cart .products .product footer .btn,
    #order-standard_cart .products .product footer a.btn {
        display: flex !important;
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
        justify-content: center !important;
        min-width: auto !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
    }
}

#order-standard_cart .cart-summary,
#order-standard_cart .order-summary,
#order-standard_cart .panel {
    border: 1px solid var(--iris-border) !important;
    border-radius: var(--iris-radius) !important;
    background-color: #ffffff !important;
    box-shadow: var(--iris-shadow) !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
}

#order-standard_cart .cart-summary .panel-heading,
#order-standard_cart .order-summary .panel-heading {
    background-color: #f8fafc !important;
    border-bottom: 1px solid var(--iris-border) !important;
    padding: 16px 20px !important;
    color: var(--iris-text) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

/* =========================================
   9. DOMAIN PRICING TABLE
   ========================================= */
#order-standard_cart .domain-pricing,
#order-standard_cart .domain-pricing .table-responsive,
.domain-pricing-table,
.domain-pricing-wrapper {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 20px !important;
    position: relative !important;
    width: 100% !important;
}

#order-standard_cart .domain-pricing table,
.domain-pricing-table table {
    width: 100% !important;
    min-width: 700px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background-color: #ffffff !important;
    border: 1px solid var(--iris-border) !important;
    border-radius: var(--iris-radius) !important;
    overflow: visible !important;
    box-shadow: var(--iris-shadow) !important;
    table-layout: auto !important;
}

#order-standard_cart .domain-pricing table thead th,
.domain-pricing-table table thead th {
    background-color: #f8fafc !important;
    color: var(--iris-text-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 10px 12px !important;
    border-bottom: 2px solid var(--iris-border) !important;
    white-space: nowrap !important;
    text-align: center !important;
    display: table-cell !important;
    visibility: visible !important;
}

#order-standard_cart .domain-pricing table tbody td,
.domain-pricing-table table tbody td {
    padding: 10px 12px !important;
    font-size: 14px !important;
    color: #334155 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
    text-align: center !important;
    display: table-cell !important;
    visibility: visible !important;
    white-space: nowrap !important;
}

#order-standard_cart .domain-pricing table tbody td:first-child,
.domain-pricing-table table tbody td:first-child {
    text-align: left !important;
    font-weight: 600 !important;
    color: var(--iris-text) !important;
}

#order-standard_cart .domain-pricing table tbody tr:last-child td,
.domain-pricing-table table tbody tr:last-child td {
    border-bottom: none !important;
}

#order-standard_cart .domain-pricing table tbody tr:hover td,
.domain-pricing-table table tbody tr:hover td {
    background-color: #f8fafc !important;
}

#order-standard_cart .domain-pricing table .btn,
.domain-pricing-table table .btn {
    padding: 4px 10px !important;
    font-size: 12px !important;
    margin: 2px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
}

#order-standard_cart .domain-pricing::after,
.domain-pricing-wrapper::after {
    content: '← Desliza para ver más →' !important;
    position: absolute !important;
    bottom: 8px !important;
    right: 12px !important;
    background: var(--iris-primary) !important;
    color: #fff !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    opacity: 0.8 !important;
    pointer-events: none !important;
    z-index: 10 !important;
    display: block !important;
}

#order-standard_cart .domain-pricing::-webkit-scrollbar,
.domain-pricing-wrapper::-webkit-scrollbar {
    height: 6px !important;
}

#order-standard_cart .domain-pricing::-webkit-scrollbar-track,
.domain-pricing-wrapper::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 10px !important;
}

#order-standard_cart .domain-pricing::-webkit-scrollbar-thumb,
.domain-pricing-wrapper::-webkit-scrollbar-thumb {
    background: var(--iris-primary) !important;
    border-radius: 10px !important;
}

@media (max-width: 767.98px) {
    #order-standard_cart .domain-pricing table,
    .domain-pricing-table table {
        min-width: 650px !important;
    }
    #order-standard_cart .domain-pricing table thead th,
    .domain-pricing-table table thead th {
        font-size: 10px !important;
        padding: 8px 10px !important;
    }
    #order-standard_cart .domain-pricing table tbody td,
    .domain-pricing-table table tbody td {
        font-size: 13px !important;
        padding: 8px 10px !important;
    }
    #order-standard_cart .domain-pricing table .btn,
    .domain-pricing-table table .btn {
        padding: 3px 8px !important;
        font-size: 11px !important;
    }
}

/* =========================================
   10. CURRENCY SELECTOR
   ========================================= */
.currency-switcher,
#currency-switcher,
div[class*="currency"],
form[action*="currency"],
.widget-currency {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 999 !important;
    pointer-events: auto !important;
}

select[name="currency"],
.currency-switcher select,
#currency-switcher select {
    display: inline-block !important;
    width: auto !important;
    min-width: 120px !important;
    padding: 8px 30px 8px 12px !important;
    background-color: #ffffff !important;
    border: 1px solid var(--iris-border) !important;
    border-radius: 8px !important;
    color: var(--iris-text) !important;
    font-size: 14px !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 12px !important;
}

.currency-switcher button,
#currency-switcher button,
button[type="submit"][name="currency"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    margin-left: 8px !important;
    background-color: var(--iris-primary) !important;
    border: none !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.currency-switcher button:hover {
    background-color: var(--iris-primary-hover) !important;
    transform: translateY(-2px) !important;
}

/* =========================================
   11. FOOTER SOCIAL ICONS
   ========================================= */
footer .social-icons,
footer [class*="social-icons"],
footer .footer-social {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: center !important;
    align-items: center !important;
}

footer .social-icons a,
footer .footer-social a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease !important;
}

footer .social-icons a:hover,
footer .footer-social a:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-3px) !important;
}

footer .social-icons a i,
footer .footer-social a i {
    font-size: 18px !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
}

footer a i.fa-whatsapp, footer .social-icons a[href*="whatsapp"] i { color: #25D366 !important; }
footer a i.fa-facebook, footer .social-icons a[href*="facebook"] i { color: #1877F2 !important; }
footer a i.fa-instagram, footer .social-icons a[href*="instagram"] i { color: #E4405F !important; }
footer a i.fa-twitter, footer .social-icons a[href*="twitter"] i { color: #1DA1F2 !important; }
footer a i.fa-telegram, footer .social-icons a[href*="telegram"] i { color: #0088cc !important; }
footer a i.fa-youtube, footer .social-icons a[href*="youtube"] i { color: #FF0000 !important; }
footer a i.fa-linkedin, footer .social-icons a[href*="linkedin"] i { color: #0A66C2 !important; }
footer a i.fa-tiktok, footer .social-icons a[href*="tiktok"] i { color: #000000 !important; }

/* =========================================
   12. NEXUS CART PROTECTION
   ========================================= */
body.page-cart .primary-content,
body.page-cart .cart-container,
body.page-cart #nexus-cart {
    overflow: visible !important;
    display: block !important;
}

body.page-cart table,
body.page-cart table *,
body.page-cart .btn-group {
    display: revert !important;
    transform: none !important;
}

body.page-cart .domain-checker-container input,
body.page-cart .domain-checker-container button,
body.page-cart .domain-checker-container select {
    -webkit-appearance: none !important;
    appearance: none !important;
    z-index: 10 !important;
    position: relative !important;
    pointer-events: auto !important;
}

/* =========================================
   13. FOOTER
   ========================================= */
footer.footer,
footer.footer-main,
.footer-wrapper,
.site-footer {
    background-color: #141d2f !important;
    background-image: none !important;
    color: #cbd5e1 !important;
    border-top: 1px solid rgba(79, 70, 229, 0.3) !important;
}

footer.footer p,
footer.footer-main p,
.footer-wrapper p,
.site-footer p {
    color: #cbd5e1 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
}

footer.footer a,
footer.footer-main a,
.footer-wrapper a,
.site-footer a {
    color: #e2e8f0 !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    font-size: 14px !important;
}

footer.footer a:hover,
footer.footer-main a:hover,
.footer-wrapper a:hover,
.site-footer a:hover {
    color: var(--iris-primary) !important;
    text-decoration: none !important;
}

footer.footer h1, footer.footer h2, footer.footer h3, 
footer.footer h4, footer.footer h5, footer.footer h6,
footer.footer-main h1, footer.footer-main h2, footer.footer-main h3,
.footer-wrapper h1, .footer-wrapper h2, .footer-wrapper h3,
.site-footer h1, .site-footer h2, .site-footer h3 {
    color: #ffffff !important;
    font-weight: 600 !important;
}

footer.footer .powered-by,
footer.footer-main .powered-by,
.footer-wrapper .powered-by,
.site-footer .powered-by,
.powered-by-whmcs {
    color: #64748b !important;
    font-size: 13px !important;
}

footer.footer .pagination .btn,
footer.footer-main .pagination .btn,
.footer-wrapper .pagination .btn,
.site-footer .pagination .btn {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

footer.footer .pagination .btn:hover,
footer.footer-main .pagination .btn:hover,
.footer-wrapper .pagination .btn:hover,
.site-footer .pagination .btn:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

footer.footer .currency-switcher,
footer.footer-main .currency-switcher,
.footer-wrapper .currency-switcher,
.site-footer .currency-switcher {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
}

footer.footer .currency-switcher select,
footer.footer-main .currency-switcher select,
.footer-wrapper .currency-switcher select,
.site-footer .currency-switcher select {
    background-color: transparent !important;
    color: #e2e8f0 !important;
    border: none !important;
}

footer.footer .copyright,
footer.footer-main .copyright,
.footer-wrapper .copyright,
.site-footer .copyright,
footer.footer small,
footer.footer-main small {
    color: #94a3b8 !important;
    font-size: 13px !important;
}

/* =========================================
   14. DOMAIN CHECKER - HOMEPAGE
   ========================================= */
.home-domain-search {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #818cf8 100%) !important;
    border-radius: var(--iris-radius) !important;
    padding: 50px 30px 40px !important;
    margin: 30px auto !important;
    max-width: 1140px !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 40px -10px rgba(79, 70, 229, 0.3) !important;
}

.home-domain-search::before {
    content: 'X' !important;
    position: absolute !important;
    top: 50% !important;
    right: -5% !important;
    transform: translateY(-50%) rotate(-15deg) !important;
    font-size: 500px !important;
    font-weight: 900 !important;
    color: rgba(255, 255, 255, 0.06) !important;
    font-family: 'Inter', sans-serif !important;
    pointer-events: none !important;
    z-index: 0 !important;
    line-height: 1 !important;
    letter-spacing: -20px !important;
}

.home-domain-search::after {
    content: '' !important;
    position: absolute !important;
    top: -100px !important;
    left: -100px !important;
    width: 300px !important;
    height: 300px !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(255,255,255,0) 70%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.home-domain-search h2 {
    color: #ffffff !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    margin-bottom: 25px !important;
    text-align: center !important;
    position: relative !important;
    z-index: 1 !important;
    letter-spacing: -0.5px !important;
}

.home-domain-search .input-group-wrapper {
    max-width: 850px !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 1 !important;
}

.home-domain-search .input-group {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    margin-bottom: 0 !important;
    border: none !important;
    padding: 8px !important;
}

.home-domain-search input[name="domain"] {
    border: none !important;
    padding: 18px 20px !important;
    font-size: 15px !important;
    color: var(--iris-text) !important;
    background-color: #ffffff !important;
    height: auto !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
    flex: 1 !important;
}

.home-domain-search input[name="domain"]:focus {
    outline: none !important;
    background-color: #fafafa !important;
}

.home-domain-search input[name="domain"]::placeholder {
    color: #94a3b8 !important;
    font-size: 14px !important;
}

.home-domain-search textarea[name="message"] {
    border: none !important;
    padding: 18px 20px !important;
    font-size: 15px !important;
    color: var(--iris-text) !important;
    background-color: #ffffff !important;
    min-height: 100px !important;
    resize: vertical !important;
    box-shadow: none !important;
    width: 100% !important;
}

.home-domain-search textarea[name="message"]:focus {
    outline: none !important;
    background-color: #fafafa !important;
}

.home-domain-search textarea[name="message"]::placeholder {
    color: #94a3b8 !important;
}

.home-domain-search select[name="tlds[]"],
.home-domain-search select[name="maxLength"] {
    border: none !important;
    background-color: #f8fafc !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: var(--iris-text) !important;
    cursor: pointer !important;
    width: 100% !important;
}

.home-domain-search select[name="tlds[]"]:focus,
.home-domain-search select[name="maxLength"]:focus {
    outline: none !important;
    background-color: #f1f5f9 !important;
}

.home-domain-search .safe-search-checkbox {
    display: flex !important;
    align-items: center !important;
    padding: 10px 14px !important;
    background-color: #f8fafc !important;
    font-size: 14px !important;
    color: var(--iris-text) !important;
    cursor: pointer !important;
}

.home-domain-search .safe-search-checkbox input[type="checkbox"] {
    margin-right: 8px !important;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
}

.home-domain-search .input-group-append {
    display: flex !important;
    gap: 8px !important;
    padding: 4px !important;
}

.home-domain-search #btnDomainSearch,
.home-domain-search #btnDomainSearch2 {
    background-color: var(--iris-primary) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4) !important;
}

.home-domain-search #btnDomainSearch:hover,
.home-domain-search #btnDomainSearch2:hover {
    background-color: var(--iris-primary-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.6) !important;
    color: #ffffff !important;
}

.home-domain-search #btnTransfer,
.home-domain-search #btnTransfer2 {
    background-color: var(--iris-primary) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
}

.home-domain-search #btnTransfer:hover,
.home-domain-search #btnTransfer2:hover {
    background-color: var(--iris-primary-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4) !important;
}

.home-domain-search .btn-link {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    display: block !important;
    text-align: right !important;
    margin-top: 12px !important;
    position: relative !important;
    z-index: 1 !important;
}

.home-domain-search .btn-link:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

.home-domain-search .tld-logos {
    list-style: none !important;
    padding: 0 !important;
    margin: 25px auto 0 !important;
    max-width: 900px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
    position: relative !important;
    z-index: 1 !important;
}

.home-domain-search .tld-logos li {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 10px !important;
    padding: 12px 22px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    min-width: 160px !important;
}

.home-domain-search .tld-logos li:hover {
    background-color: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}

.home-domain-search .tld-hm-20i {
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
}

.home-domain-search .price-hm-20i {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
}

/* =========================================
   15. HOMEPAGE SECTIONS
   ========================================= */
.our-services h2 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: var(--iris-text) !important;
    margin-bottom: 1rem !important;
}

.our-services .lead,
.our-services p.lead {
    font-size: 16px !important;
    color: #64748b !important;
    margin-bottom: 2rem !important;
}

.single-service-plane {
    padding: 28px 22px !important;
    transition: all 0.3s ease !important;
}

.single-service-plane:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08) !important;
}

.single-service-plane h3,
.single-service-plane h5 {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--iris-text) !important;
    margin-bottom: 12px !important;
}

.single-service-plane p {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #475569 !important;
    margin-bottom: 20px !important;
}

.single-service-plane .outline-btn,
.single-service-plane .btn {
    font-size: 14px !important;
    padding: 8px 20px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.features-box {
    padding: 20px !important;
    margin-bottom: 20px !important;
}

.features-box h5 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--iris-text) !important;
    margin-bottom: 10px !important;
}

.features-box p {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #475569 !important;
}

.features-box-icon .icon-md {
    font-size: 28px !important;
    color: var(--iris-primary) !important;
}

.account-section-main-20i h2 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: var(--iris-text) !important;
}

.action-icon-btns a {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--iris-text) !important;
}

.action-icon-btns a .ico-container i {
    font-size: 26px !important;
    color: var(--iris-primary) !important;
}

/* =========================================
   16. DNS MANAGEMENT TABLES
   ========================================= */
.client-area table.table,
.clientarea table.table,
.domain-dns-management table,
.dns-management table,
table.table-dns,
.domain-management table {
    background-color: #ffffff !important;
    border-radius: var(--iris-radius) !important;
    overflow: hidden !important;
    border: 1px solid var(--iris-border) !important;
}

.client-area table.table thead th,
.clientarea table.table thead th,
.domain-dns-management table thead th,
.dns-management table thead th,
table.table-dns thead th {
    background-color: #f8fafc !important;
    color: var(--iris-text-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 14px !important;
    border-bottom: 2px solid var(--iris-border) !important;
    white-space: nowrap !important;
}

.client-area table.table tbody td,
.clientarea table.table tbody td,
.domain-dns-management table tbody td,
.dns-management table tbody td,
table.table-dns tbody td {
    padding: 12px 14px !important;
    font-size: 14px !important;
    color: var(--iris-text) !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
}

.client-area table.table input.form-control,
.clientarea table.table input.form-control,
.domain-dns-management table input.form-control,
.dns-management table input.form-control,
table.table-dns input.form-control,
.client-area table.table select.form-control,
.clientarea table.table select.form-control,
.domain-dns-management table select.form-control,
.dns-management table select.form-control,
table.table-dns select.form-control {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    color: var(--iris-text) !important;
    width: 100% !important;
    min-height: 38px !important;
    transition: all 0.2s ease !important;
}

.client-area table.table input.form-control:focus,
.clientarea table.table input.form-control:focus,
.domain-dns-management table input.form-control:focus,
.dns-management table input.form-control:focus,
table.table-dns input.form-control:focus,
.client-area table.table select.form-control:focus,
.clientarea table.table select.form-control:focus,
.domain-dns-management table select.form-control:focus,
.dns-management table select.form-control:focus,
table.table-dns select.form-control:focus {
    border-color: var(--iris-primary) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12) !important;
    outline: none !important;
    background-color: #ffffff !important;
}

.client-area table.table input.form-control::placeholder,
.clientarea table.table input.form-control::placeholder,
.domain-dns-management table input.form-control::placeholder,
.dns-management table input.form-control::placeholder,
table.table-dns input.form-control::placeholder {
    color: #94a3b8 !important;
    font-size: 13px !important;
}

.client-area table.table .btn,
.clientarea table.table .btn,
.domain-dns-management table .btn,
.dns-management table .btn,
table.table-dns .btn {
    font-size: 13px !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
}

.client-area table.table .btn-sm,
.clientarea table.table .btn-sm,
.domain-dns-management table .btn-sm,
.dns-management table .btn-sm,
table.table-dns .btn-sm {
    font-size: 12px !important;
    padding: 5px 12px !important;
}

/* =========================================
   17. SERVICE DETAILS CARDS
   ========================================= */
.client-area .service-details,
.clientarea .service-details,
.service-details,
.service-details-container {
    background-color: #ffffff !important;
    border-radius: var(--iris-radius) !important;
    box-shadow: var(--iris-shadow) !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
}

.service-details .product-icon-container,
.service-details .service-header {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
    padding: 40px 30px !important;
    text-align: center !important;
    border-bottom: 1px solid var(--iris-border) !important;
}

.service-details .product-icon-container img,
.service-details .service-header img {
    max-width: 120px !important;
    height: auto !important;
    margin-bottom: 20px !important;
    filter: none !important;
}

.service-details .product-icon-container h3,
.service-details .service-header h3,
.service-details .product-icon-container h4,
.service-details .service-header h4 {
    font-size: 1.375rem !important;
    font-weight: 700 !important;
    color: var(--iris-text) !important;
    margin-bottom: 8px !important;
}

.service-details .product-icon-container .product-group,
.service-details .service-header .product-group {
    font-size: 0.9375rem !important;
    color: var(--iris-text-muted) !important;
    font-weight: 500 !important;
}

.service-details .status-badge,
.service-details .label,
.service-details .badge {
    display: inline-block !important;
    padding: 8px 20px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-top: 16px !important;
}

.service-details .status-badge.label-success,
.service-details .label-success,
.service-details .badge-success {
    background-color: #10b981 !important;
    color: #ffffff !important;
}

.service-details .status-badge.label-warning,
.service-details .label-warning,
.service-details .badge-warning {
    background-color: #f59e0b !important;
    color: #ffffff !important;
}

.service-details .status-badge.label-danger,
.service-details .label-danger,
.service-details .badge-danger {
    background-color: #ef4444 !important;
    color: #ffffff !important;
}

.service-details .status-badge.label-info,
.service-details .label-info,
.service-details .badge-info {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}

.service-details .service-info,
.service-details .service-details-content {
    padding: 30px !important;
}

.service-details .service-info .row,
.service-details .service-details-content .row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}

.service-details .service-info .col-md-6,
.service-details .service-details-content .col-md-6 {
    flex: 1 1 calc(50% - 20px) !important;
    min-width: 250px !important;
}

.service-details .service-info .info-item,
.service-details .service-details-content .info-item,
.service-details .service-info dl,
.service-details .service-details-content dl {
    margin-bottom: 20px !important;
}

.service-details .service-info dt,
.service-details .service-details-content dt {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--iris-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
}

.service-details .service-info dd,
.service-details .service-details-content dd {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--iris-text) !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
}

.service-details .alert-warning,
.client-area .alert-warning {
    background-color: #fffbeb !important;
    border-color: #fde68a !important;
    color: #92400e !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.service-details .alert-warning .btn {
    background-color: var(--iris-primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.service-details .alert-warning .btn:hover {
    background-color: var(--iris-primary-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
}

.service-details .btn-group,
.service-details .action-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 20px !important;
}

.service-details .btn-group .btn,
.service-details .action-buttons .btn {
    background-color: var(--iris-primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

.service-details .btn-group .btn:hover,
.service-details .action-buttons .btn:hover {
    background-color: var(--iris-primary-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 767.98px) {
    .home-domain-search {
        padding: 30px 16px 25px !important;
        margin: 20px 10px !important;
        max-width: 100% !important;
    }
    
    .home-domain-search::before {
        font-size: 300px !important;
        right: -15% !important;
    }
    
    .home-domain-search h2 {
        font-size: 1.4rem !important;
        margin-bottom: 20px !important;
    }
    
    .home-domain-search .input-group-append.d-none.d-sm-block {
        display: none !important;
    }
    
    .home-domain-search .input-group {
        padding: 6px !important;
    }
    
    .home-domain-search .row.d-sm-none {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin-top: 15px !important;
    }
    
    .home-domain-search .row.d-sm-none .col-6 {
        flex: 1 1 calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
        padding: 0 !important;
    }
    
    .home-domain-search #btnDomainSearch2,
    .home-domain-search #btnTransfer2 {
        width: 100% !important;
        border-radius: 8px !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #ffffff !important;
        background-color: var(--iris-primary) !important;
        border: none !important;
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
    }
    
    .home-domain-search #btnDomainSearch2:hover,
    .home-domain-search #btnTransfer2:hover {
        background-color: var(--iris-primary-hover) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4) !important;
    }

    .home-domain-search .tld-logos {
        gap: 10px !important;
        margin-top: 20px !important;
    }
    .home-domain-search .tld-logos li {
        min-width: 140px !important;
        padding: 10px 16px !important;
    }
    .home-domain-search .tld-hm-20i {
        font-size: 15px !important;
    }
    .home-domain-search .price-hm-20i {
        font-size: 13px !important;
    }
    
    .our-services h2,
    .account-section-main-20i h2 {
        font-size: 1.5rem !important;
    }
    .our-services .lead {
        font-size: 15px !important;
    }
    .single-service-plane h3,
    .single-service-plane h5 {
        font-size: 1.0625rem !important;
    }
    .single-service-plane p,
    .features-box p {
        font-size: 14px !important;
    }
    
    .service-details .product-icon-container,
    .service-details .service-header {
        padding: 30px 20px !important;
    }
    .service-details .product-icon-container img,
    .service-details .service-header img {
        max-width: 100px !important;
    }
    .service-details .product-icon-container h3,
    .service-details .service-header h3 {
        font-size: 1.25rem !important;
    }
    .service-details .service-info,
    .service-details .service-details-content {
        padding: 20px !important;
    }
    .service-details .service-info .col-md-6,
    .service-details .service-details-content .col-md-6 {
        flex: 1 1 100% !important;
    }
    
    .client-area table.table input.form-control,
    .clientarea table.table input.form-control,
    .domain-dns-management table input.form-control,
    .dns-management table input.form-control {
        font-size: 13px !important;
        padding: 8px 10px !important;
    }
}