/* =========================================
WHMCS "IRIS" THEME ENGINE (COMPLETE 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-size: 1.5rem !important; font-weight: 600 !important; line-height: 1.2 !important; margin-bottom: 0.75rem !important; color: var(--iris-text) !important; }
h2, .h2 { font-size: 1.5rem !important; font-weight: 600 !important; line-height: 1.3 !important; margin-bottom: 0.75rem !important; color: var(--iris-text) !important; }
h3, .h3 { font-size: 1.25rem !important; font-weight: 600 !important; line-height: 1.4 !important; margin-bottom: 0.5rem !important; color: var(--iris-text) !important; }
h4, .h4 { font-size: 1.125rem !important; font-weight: 600 !important; line-height: 1.4 !important; margin-bottom: 0.5rem !important; color: #334155 !important; }
h5, .h5 { font-size: 1rem !important; font-weight: 600 !important; line-height: 1.5 !important; margin-bottom: 0.5rem !important; color: #334155 !important; }
h6, .h6 { font-size: 0.875rem !important; font-weight: 600 !important; line-height: 1.5 !important; margin-bottom: 0.5rem !important; color: #475569 !important; }

/* =========================================
2. 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; }

/* =========================================
3. BUTTONS & FORMS
========================================= */
.btn {
font-weight: 600;
border-radius: 8px !important;
transition: all 0.2s ease;
}
.btn-primary, .btn-success {
background-color: var(--iris-primary) !important;
border-color: var(--iris-primary) !important;
color: #fff !important;
}
.btn-primary:hover, .btn-success:hover {
background-color: var(--iris-primary-hover) !important;
border-color: var(--iris-primary-hover) !important;
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25) !important;
color: #fff !important;
}

.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;
}
.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;
}

input[name="phonenumber"], input[name="phone"], input[type="tel"], .phone-input-field, .intl-tel-input input {
padding-left: 95px !important;
}
.intl-tel-input { width: 100% !important; }
.intl-tel-input .flag-container { position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 2 !important; }
.intl-tel-input .selected-flag {
padding: 0 8px 0 12px !important; background-color: #f8fafc !important;
border-right: 1px solid var(--iris-border) !important; border-radius: 8px 0 0 8px !important;
height: 100% !important; display: flex !important; align-items: center !important;
}
.intl-tel-input input, .intl-tel-input .form-control { padding-left: 95px !important; width: 100% !important; }

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;
}

/* =========================================
4. 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; }

/* =========================================
5. TABLAS RESPONSIVAS - ÁREA DE CLIENTE
========================================= */
.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,
div[menuitemname="Active Products/Services"] table thead th,
div[menuitemname="My Domains"] table thead th,
div[menuitemname="My Invoices"] table thead th,
div[menuitemname="My Quotes"] 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,
div[menuitemname="Active Products/Services"] table tbody td,
div[menuitemname="My Domains"] table tbody td,
div[menuitemname="My Invoices"] table tbody td,
div[menuitemname="My Quotes"] table tbody td {
padding: 12px 12px !important;
font-size: 12px !important;
color: #334155 !important;
border-bottom: 1px solid #f1f5f9 !important;
vertical-align: middle !important;
}

.primary-content table.table-list tbody tr:last-child td,
.primary-content .dataTables_wrapper table tbody tr:last-child td,
div[menuitemname="Active Products/Services"] table tbody tr:last-child td,
div[menuitemname="My Domains"] table tbody tr:last-child td,
div[menuitemname="My Invoices"] table tbody tr:last-child td,
div[menuitemname="My Quotes"] table tbody tr:last-child td {
border-bottom: none !important;
}

.primary-content table.table-list tbody tr:hover td,
.primary-content .dataTables_wrapper table tbody tr:hover td,
div[menuitemname="Active Products/Services"] table tbody tr:hover td,
div[menuitemname="My Domains"] table tbody tr:hover td,
div[menuitemname="My Invoices"] table tbody tr:hover td,
div[menuitemname="My Quotes"] table 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;
}

/* MÓVIL: Tablas como tarjetas */
@media (max-width: 767.98px) {
.primary-content table.table-list thead,
.primary-content .dataTables_wrapper table thead,
div[menuitemname="Active Products/Services"] table thead,
div[menuitemname="My Domains"] table thead,
div[menuitemname="My Invoices"] table thead,
div[menuitemname="My Quotes"] table thead {
display: none !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 {
display: block !important;
width: 100% !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}

.primary-content table.table-list tbody,
.primary-content .dataTables_wrapper table tbody,
div[menuitemname="Active Products/Services"] table tbody,
div[menuitemname="My Domains"] table tbody,
div[menuitemname="My Invoices"] table tbody,
div[menuitemname="My Quotes"] table tbody {
display: block !important;
width: 100% !important;
}

.primary-content table.table-list tbody tr,
.primary-content .dataTables_wrapper table tbody tr,
div[menuitemname="Active Products/Services"] table tbody tr,
div[menuitemname="My Domains"] table tbody tr,
div[menuitemname="My Invoices"] table tbody tr,
div[menuitemname="My Quotes"] table tbody tr {
display: block !important;
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;
width: 100% !important;
}

.primary-content table.table-list tbody td,
.primary-content .dataTables_wrapper table tbody td,
div[menuitemname="Active Products/Services"] table tbody td,
div[menuitemname="My Domains"] table tbody td,
div[menuitemname="My Invoices"] table tbody td,
div[menuitemname="My Quotes"] table 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;
width: 100% !important;
min-height: 40px !important;
gap: 8px !important;
flex-wrap: wrap !important;
}

.primary-content table.table-list tbody td:last-child,
.primary-content .dataTables_wrapper table tbody td:last-child,
div[menuitemname="Active Products/Services"] table tbody td:last-child,
div[menuitemname="My Domains"] table tbody td:last-child,
div[menuitemname="My Invoices"] table tbody td:last-child,
div[menuitemname="My Quotes"] table tbody td:last-child {
border-bottom: none !important;
}

.primary-content table.table-list tbody td:empty,
.primary-content .dataTables_wrapper table tbody td:empty,
div[menuitemname="Active Products/Services"] table tbody td:empty,
div[menuitemname="My Domains"] table tbody td:empty,
div[menuitemname="My Invoices"] table tbody td:empty,
div[menuitemname="My Quotes"] table tbody td:empty {
display: none !important;
}

.primary-content table.table-list tbody td[data-label]:before,
.primary-content .dataTables_wrapper table tbody td[data-label]:before,
div[menuitemname="Active Products/Services"] table tbody td[data-label]:before,
div[menuitemname="My Domains"] table tbody td[data-label]:before,
div[menuitemname="My Invoices"] table tbody td[data-label]:before,
div[menuitemname="My Quotes"] table tbody td[data-label]: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: 12px !important;
flex-shrink: 0 !important;
min-width: 130px !important;
display: inline-block !important;
}

.primary-content table.table-list tbody td:not([data-label]):before,
.primary-content .dataTables_wrapper table tbody td:not([data-label]):before,
div[menuitemname="Active Products/Services"] table tbody td:not([data-label]):before,
div[menuitemname="My Domains"] table tbody td:not([data-label]):before,
div[menuitemname="My Invoices"] table tbody td:not([data-label]):before,
div[menuitemname="My Quotes"] table tbody td:not([data-label]):before {
content: none !important;
display: none !important;
}

.primary-content table.table-list .btn,
.primary-content .dataTables_wrapper .btn,
div[menuitemname="Active Products/Services"] .btn,
div[menuitemname="My Domains"] .btn,
div[menuitemname="My Invoices"] .btn,
div[menuitemname="My Quotes"] .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,
div[menuitemname="Active Products/Services"] table,
div[menuitemname="My Domains"] table,
div[menuitemname="My Invoices"] table,
div[menuitemname="My Quotes"] table {
display: table !important;
}

.primary-content table.table-list tbody,
.primary-content .dataTables_wrapper table tbody,
div[menuitemname="Active Products/Services"] table tbody,
div[menuitemname="My Domains"] table tbody,
div[menuitemname="My Invoices"] table tbody,
div[menuitemname="My Quotes"] table tbody {
display: table-row-group !important;
}

.primary-content table.table-list tbody tr,
.primary-content .dataTables_wrapper table tbody tr,
div[menuitemname="Active Products/Services"] table tbody tr,
div[menuitemname="My Domains"] table tbody tr,
div[menuitemname="My Invoices"] table tbody tr,
div[menuitemname="My Quotes"] table tbody tr {
display: table-row !important;
}

.primary-content table.table-list tbody td,
.primary-content .dataTables_wrapper table tbody td,
div[menuitemname="Active Products/Services"] table tbody td,
div[menuitemname="My Domains"] table tbody td,
div[menuitemname="My Invoices"] table tbody td,
div[menuitemname="My Quotes"] table tbody td {
display: table-cell !important;
text-align: left !important;
width: auto !important;
}

.primary-content table.table-list tbody td:before,
.primary-content .dataTables_wrapper table tbody td:before,
div[menuitemname="Active Products/Services"] table tbody td:before,
div[menuitemname="My Domains"] table tbody td:before,
div[menuitemname="My Invoices"] table tbody td:before,
div[menuitemname="My Quotes"] table tbody td:before {
display: none !important;
}

.primary-content table.table-list thead,
.primary-content .dataTables_wrapper table thead,
div[menuitemname="Active Products/Services"] table thead,
div[menuitemname="My Domains"] table thead,
div[menuitemname="My Invoices"] table thead,
div[menuitemname="My Quotes"] table thead {
display: table-header-group !important;
}
}

/* =========================================
6. 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; }
}

/* =========================================
7. 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;
}

/* =========================================
8. 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; }
}

/* =========================================
9. 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; }

/* =========================================
10. 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; }

/* =========================================
11. 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;
}

/* =========================================
12. FOOTER - ESTILO ELEGANTE MIDNIGHT NAVY
========================================= */
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; }

/* =========================================
13. DOMAIN CHECKER - HOMEPAGE (con X de marca de agua)
========================================= */
.home-domain-search, .home-domain-search.bg-white {
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; }

/* =========================================
14. 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; }

/* =========================================
15. 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;
}

/* =========================================
16. 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, .home-domain-search.bg-white {
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;
}

input[name="phonenumber"], input[name="phone"], input[type="tel"], .phone-input-field, .intl-tel-input input { padding-left: 90px !important; }
}
/* =========================================
FIX: Sobrescribir width: 40% de all.min.css
en el footer de productos del carrito
========================================= */
body #order-standard_cart .products .product footer,
body #order-standard_cart .products .product .product-footer {
    width: 100% !important;
    padding: 20px !important;
}

/* Asegurar que el precio y botón se distribuyan correctamente */
body #order-standard_cart .products .product footer .product-pricing {
    flex: 1 !important;
    text-align: left !important;
}

body #order-standard_cart .products .product footer .btn-order-now {
    flex: 0 0 auto !important;
    margin-left: auto !important;
}

/* MÓVIL: Centrar todo */
@media (max-width: 767.98px) {
    body #order-standard_cart .products .product footer,
    body #order-standard_cart .products .product .product-footer {
        width: 100% !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    body #order-standard_cart .products .product footer .product-pricing {
        width: 100% !important;
        margin-bottom: 12px !important;
    }
    
    body #order-standard_cart .products .product footer .btn-order-now {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
    }
}
/* =========================================
   FIX: Select de DataTables "Mostrar entradas"
   ========================================= */
.dataTables_length select {
    padding: 6px 32px 6px 12px !important;
    height: auto !important;
    line-height: 1.5 !important;
    min-height: 38px !important;
    font-size: 14px !important;
}
/* =========================================
   FIX: Selects de formulario (Idioma, etc.)
   Evita que el texto se corte verticalmente
   ========================================= */
select.form-control,
select.field,
.form-control select,
.field select {
    padding: 10px 36px 10px 14px !important;
    height: auto !important;
    line-height: 1.5 !important;
    min-height: 42px !important;
    font-size: 14px !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 12px center !important;
    background-size: 12px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
/* =========================================
   FIX: Padding para campos con iconos
   Evita que el texto se encime con los iconos
   ========================================= */
.form-control,
.field,
input.form-control,
select.form-control,
textarea.form-control {
    padding-left: 40px !important;
}

/* Si el campo tiene un icono absolutamente posicionado */
.form-control + i,
.field + i,
.input-group .form-control + i {
    left: 12px !important;
}

/* Ajuste para selects (flecha dropdown) */
select.form-control,
select.field {
    padding-right: 36px !important;
}