/* ================================================================
   ImaginaWeb S.A.C. — Cart / Store Override CSS
   Alinea cartx_child con el sistema de diseño del cliente area
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── Variables locales ── */
:root {
  --cx-primary:       #1a56db;
  --cx-primary-dark:  #1447bb;
  --cx-primary-light: #e8f0fd;
  --cx-white:         #ffffff;
  --cx-gray-bg:       #f7f7f8;
  --cx-gray-border:   #dee0e3;
  --cx-gray-divider:  #efeff1;
  --cx-gray-text:     #5e636e;
  --cx-gray-dark:     #17191c;
  --cx-success:       #299341;
  --cx-success-light: #dff6e5;
  --cx-shadow-sm:     0px 0px 1px rgba(0,0,0,.04), 0px 2px 16px rgba(0,0,0,.08);
  --cx-shadow:        0px 0px 1px rgba(0,0,0,.04), 0px 4px 24px rgba(0,0,0,.1);
  --cx-font-title:    'Plus Jakarta Sans', -apple-system, sans-serif;
  --cx-font-body:     'DM Sans', -apple-system, sans-serif;
  --cx-radius:        10px;
  --cx-radius-lg:     14px;
}

/* ── Reset tipografía global del carrito ── */
#order-standard_cart,
.cart-head-bar,
.choose-pack,
.left-side-checkout-page,
.secondary-cart-sidebar,
.secondary-cart-body {
  font-family: var(--cx-font-body) !important;
  color: var(--cx-gray-dark) !important;
}

/* ================================================================
   1. CABECERA DE PÁGINA (cart-head-bar)
   ================================================================ */
.cart-head-bar {
  background: var(--cx-white) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--cx-gray-divider) !important;
  padding: 20px 28px !important;
  margin-bottom: 24px !important;
}
.cart-head-bar h1 {
  font-family: var(--cx-font-title) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--cx-gray-dark) !important;
}
.cart-head-bar h1 i {
  font-size: 22px !important;
  color: var(--cx-primary) !important;
  margin-right: 10px !important;
  padding-right: 0 !important;
}
.cart-head-bar p {
  font-size: 13px !important;
  color: var(--cx-gray-text) !important;
  padding: 0 !important;
  margin: 4px 0 0 32px !important;
}

/* ── Pasos del proceso de compra ── */
.cart-product-step {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  justify-content: flex-end !important;
}
.step-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #aab0c4 !important;
  padding: 0 12px !important;
  position: relative !important;
}
.step-item:not(:last-child)::after {
  content: '→' !important;
  margin-left: 12px !important;
  color: #dde0e8 !important;
  font-size: 14px !important;
}
.step-item a { color: inherit !important; text-decoration: none !important; }
.step-item.active,
.step-item.active a { color: var(--cx-primary) !important; font-weight: 700 !important; }
.stp-cot {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: #eef2ff !important;
  color: #aab0c4 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}
.step-item.active .stp-cot {
  background: var(--cx-primary) !important;
  color: #fff !important;
}
.stp-cot.check {
  background: var(--cx-success-light) !important;
  color: var(--cx-success) !important;
}

/* ================================================================
   2. NAVEGACIÓN DE CATEGORÍAS (host-nav)
   ================================================================ */
.host-nav.product-listing-page {
  background: var(--cx-white) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--cx-gray-divider) !important;
  padding: 0 20px !important;
  margin-bottom: 20px !important;
}
.drop-nav,
.drop-nav.domain,
.drop-nav.cloud,
.drop-nav.server {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cx-gray-text) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  font-family: var(--cx-font-title) !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 14px 16px !important;
  transition: color .15s ease, border-color .15s ease !important;
}
.drop-nav:hover,
.host-nav.product-listing-page .drop-nav:hover,
.host-nav.product-listing-page li.active .drop-nav {
  background: transparent !important;
  color: var(--cx-primary) !important;
  border-bottom-color: var(--cx-primary) !important;
}
.pack-hed h2 {
  font-family: var(--cx-font-title) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--cx-gray-dark) !important;
}

/* Switcher slider de productos */
.switcher-for-product { margin: 0 16px !important; }
.switch-slider {
  font-family: var(--cx-font-title) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  cursor: pointer !important;
  background: var(--cx-gray-bg) !important;
  color: var(--cx-gray-text) !important;
  transition: all .15s ease !important;
}
.switch-slider.active {
  background: var(--cx-primary) !important;
  color: #fff !important;
}

/* ================================================================
   3. TARJETAS DE PRODUCTO (generic_content)
   ================================================================ */
.generic_content.clearfix {
  background: var(--cx-white) !important;
  border: 1px solid var(--cx-gray-border) !important;
  border-radius: var(--cx-radius-lg) !important;
  box-shadow: var(--cx-shadow-sm) !important;
  padding: 0 !important;
  overflow: hidden !important;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease !important;
}
.generic_content.clearfix:hover {
  box-shadow: var(--cx-shadow) !important;
  transform: translateY(-3px) !important;
  border-color: var(--cx-primary) !important;
}

/* Cabecera de la card (fondo gris) */
.generic_head_price {
  background: var(--cx-primary-light) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(26,86,219,.1) !important;
}

/* Nombre del producto */
.generic_head_content span,
.generic_head_content span.cart-product-name {
  font-family: var(--cx-font-title) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--cx-gray-dark) !important;
  padding: 18px 20px 4px !important;
  min-height: auto !important;
  max-width: 100% !important;
  line-height: 1.3 !important;
}
.generic_head_content .head {
  background: transparent !important;
}

/* Precio */
.generic_price_tag span.price {
  font-family: var(--cx-font-title) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--cx-primary) !important;
  padding: 8px 20px 14px !important;
  min-height: auto !important;
}
h5.start-from {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--cx-gray-text) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  margin-bottom: 2px !important;
  font-family: var(--cx-font-title) !important;
}
small.product-billing-cycle {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--cx-gray-text) !important;
}
small.product-setup-fee {
  font-size: 11.5px !important;
  color: var(--cx-success) !important;
  font-family: var(--cx-font-body) !important;
}

/* Lista de características */
.generic_feature_list {
  padding: 8px 0 0 !important;
}
.generic_feature_list ul { padding: 0 !important; margin: 0 !important; }
.generic_feature_list li {
  font-size: 13px !important;
  color: var(--cx-gray-text) !important;
  padding: 7px 20px !important;
  border-bottom: 1px solid var(--cx-gray-divider) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.generic_feature_list li:last-child { border-bottom: none !important; }
.generic_feature_list li::before {
  content: '' !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  background: var(--cx-success-light) !important;
  border-radius: 50% !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23299341' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
  background-size: 10px 10px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.generic_feature_list li .feature-value {
  font-weight: 700 !important;
  color: var(--cx-gray-dark) !important;
  margin-right: 4px !important;
}

/* Botón "Contratar ahora" */
.generic_price_btn {
  padding: 16px 20px !important;
}
.generic_content .wgs_custom-btn,
.generic_price_btn .wgs_custom-btn {
  display: block !important;
  width: 100% !important;
  background: var(--cx-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--cx-radius) !important;
  padding: 11px 20px !important;
  font-family: var(--cx-font-title) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease !important;
  box-shadow: 0 2px 10px rgba(26,86,219,.25) !important;
}
.generic_content .wgs_custom-btn:hover,
.generic_price_btn .wgs_custom-btn:hover {
  background: var(--cx-primary-dark) !important;
  box-shadow: 0 4px 18px rgba(26,86,219,.4) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ================================================================
   4. RESUMEN DE PEDIDO (sidebar derecho)
   ================================================================ */
#order-standard_cart .order-summary,
#order-standard_cart .summary-container {
  background: var(--cx-primary) !important;
  border: none !important;
  border-radius: var(--cx-radius-lg) !important;
  padding: 20px 22px !important;
  overflow: hidden !important;
}
h3.titel-ord {
  font-family: var(--cx-font-title) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.9) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  margin-bottom: 14px !important;
}
.cloud-item {
  border-top: 1px solid rgba(255,255,255,.15) !important;
  padding: 12px 0 !important;
}
.cloud-item:first-child { border-top: none !important; }
.stack { font-size: 13.5px !important; font-weight: 500 !important; color: rgba(255,255,255,.9) !important; }
.stack strong { color: #fff !important; font-weight: 700 !important; }

.cloud-item-product {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-bottom: 8px !important;
  gap: 12px !important;
}
.cloud-item-product div,
.cloud-item-product .usd-tp { color: #fff !important; font-size: 14px !important; font-weight: 600 !important; }

.centos-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 6px !important;
}
.centos-item span { font-size: 12.5px !important; color: rgba(255,255,255,.85) !important; }
.centos-price { font-weight: 700 !important; color: #fff !important; }

.cloud-item.amount { border-top: 1px solid rgba(255,255,255,.3) !important; margin-top: 8px !important; }
.cloud-item.amount span.centos { font-size: 13px !important; color: rgba(255,255,255,.7) !important; }
.cloud-item.amount span.centos-price { font-size: 28px !important; font-weight: 800 !important; color: #fff !important; font-family: var(--cx-font-title) !important; }

/* Botón continuar en el resumen */
div#orderSummary .stap-btn .wgs_custom-btn,
div#orderSummary .stap-btn .btn-primary,
div#orderSummary .stap-btn .btn {
  background: #fff !important;
  color: var(--cx-primary) !important;
  border: none !important;
  border-radius: var(--cx-radius) !important;
  padding: 11px 22px !important;
  font-family: var(--cx-font-title) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  width: 100% !important;
  text-align: center !important;
  display: block !important;
  transition: background .15s, box-shadow .15s !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.15) !important;
  margin-top: 14px !important;
}
div#orderSummary .stap-btn .wgs_custom-btn:hover,
div#orderSummary .stap-btn .btn-primary:hover {
  background: #f0f5ff !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.18) !important;
}

/* Sidebar sticky del configure */
#order-standard_cart .secondary-cart-sidebar {
  padding-right: 0 !important;
}

/* ================================================================
   5. CICLOS DE FACTURACIÓN (selectBillingCycle)
   ================================================================ */
ul.term-list.selectBillingCycle {
  list-style: none !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 12px !important;
}
ul.selectBillingCycle li {
  border: 2px solid var(--cx-gray-border) !important;
  border-radius: var(--cx-radius) !important;
  padding: 12px 18px !important;
  cursor: pointer !important;
  transition: border-color .15s, background .15s !important;
  background: var(--cx-white) !important;
  min-width: 130px !important;
}
ul.selectBillingCycle li.active,
ul.selectBillingCycle li:has(input:checked) {
  border-color: var(--cx-primary) !important;
  background: var(--cx-primary-light) !important;
}
ul.selectBillingCycle li strong {
  display: block !important;
  font-family: var(--cx-font-title) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--cx-gray-dark) !important;
}
ul.selectBillingCycle li span {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--cx-primary) !important;
  font-family: var(--cx-font-title) !important;
}

/* ================================================================
   6. FORMULARIOS
   ================================================================ */
.form-group.inputBox {
  margin-bottom: 20px !important;
  position: relative !important;
}
.form-group.inputBox label.inputText {
  font-family: var(--cx-font-title) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--cx-gray-text) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  margin-bottom: 6px !important;
  display: block !important;
}
input.input,
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea,
.form-control {
  width: 100% !important;
  border: 1.5px solid var(--cx-gray-border) !important;
  border-radius: var(--cx-radius) !important;
  padding: 10px 14px !important;
  font-family: var(--cx-font-body) !important;
  font-size: 14px !important;
  color: var(--cx-gray-dark) !important;
  background: var(--cx-white) !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
  box-shadow: none !important;
}
input.input:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-control:focus {
  border-color: var(--cx-primary) !important;
  box-shadow: 0 0 0 3px rgba(26,86,219,.1) !important;
  outline: none !important;
}

/* Botones de formulario */
.btn-primary,
button.btn.btn-primary {
  background: var(--cx-primary) !important;
  border-color: var(--cx-primary) !important;
  color: #fff !important;
  font-family: var(--cx-font-title) !important;
  font-weight: 600 !important;
  border-radius: var(--cx-radius) !important;
  padding: 10px 22px !important;
  font-size: 13.5px !important;
  transition: background .15s ease, box-shadow .15s ease !important;
}
.btn-primary:hover,
button.btn.btn-primary:hover {
  background: var(--cx-primary-dark) !important;
  border-color: var(--cx-primary-dark) !important;
  box-shadow: 0 4px 14px rgba(26,86,219,.35) !important;
}
.btn-default,
button.btn.btn-default,
a.btn.btn-default {
  background: var(--cx-white) !important;
  border: 1.5px solid var(--cx-gray-border) !important;
  color: var(--cx-gray-text) !important;
  font-family: var(--cx-font-title) !important;
  font-weight: 600 !important;
  border-radius: var(--cx-radius) !important;
  padding: 10px 22px !important;
  font-size: 13.5px !important;
}
.btn-default:hover { background: var(--cx-gray-bg) !important; }

/* Botón Checkout / Completar */
#btnCompleteProductConfig,
button[id*="btnComplete"],
.btn-success {
  background: linear-gradient(135deg, var(--cx-primary), var(--cx-primary-dark)) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--cx-radius) !important;
  font-family: var(--cx-font-title) !important;
  font-weight: 700 !important;
  padding: 12px 28px !important;
  font-size: 14px !important;
  box-shadow: 0 4px 14px rgba(26,86,219,.35) !important;
  transition: box-shadow .2s ease, transform .15s ease !important;
}
#btnCompleteProductConfig:hover,
.btn-success:hover {
  box-shadow: 0 6px 22px rgba(26,86,219,.45) !important;
  transform: translateY(-1px) !important;
}

/* ================================================================
   7. SECCIÓN CHECKOUT — COLUMNA IZQUIERDA
   ================================================================ */
.left-side-checkout-page {
  background: var(--cx-white) !important;
  border: 1px solid var(--cx-gray-border) !important;
  border-radius: var(--cx-radius-lg) !important;
  box-shadow: var(--cx-shadow-sm) !important;
  padding: 28px !important;
}
.Pers-titel,
h1.sign-titel {
  font-family: var(--cx-font-title) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--cx-gray-dark) !important;
  margin-bottom: 16px !important;
}
.acct-box {
  border: 1px solid var(--cx-gray-border) !important;
  border-radius: var(--cx-radius) !important;
  padding: 18px !important;
  background: var(--cx-gray-bg) !important;
}
.acct-box h3 {
  font-family: var(--cx-font-title) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--cx-gray-dark) !important;
}
.crt-ntn,
a.crt-ntn {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--cx-primary) !important;
  color: #fff !important;
  border-radius: var(--cx-radius) !important;
  padding: 9px 18px !important;
  font-family: var(--cx-font-title) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background .15s ease !important;
  margin-top: 10px !important;
}
.crt-ntn:hover { background: var(--cx-primary-dark) !important; color: #fff !important; }

/* ================================================================
   8. PANEL CONFIGURE PRODUCT
   ================================================================ */
.panel.panel-default {
  background: var(--cx-white) !important;
  border: 1px solid var(--cx-gray-border) !important;
  border-radius: var(--cx-radius-lg) !important;
  box-shadow: var(--cx-shadow-sm) !important;
  margin-bottom: 18px !important;
}
.panel-heading {
  background: var(--cx-white) !important;
  border-bottom: 1px solid var(--cx-gray-divider) !important;
  border-radius: var(--cx-radius-lg) var(--cx-radius-lg) 0 0 !important;
  padding: 14px 20px !important;
}
.panel-title, .panel-title a {
  font-family: var(--cx-font-title) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--cx-gray-dark) !important;
}
.panel-body { padding: 18px 20px !important; }

/* Sub-headings del configure */
.sub-heading { margin-bottom: 14px !important; }
.sub-heading span,
.sub-heading span.primary-bg-color {
  background: var(--cx-primary) !important;
  color: #fff !important;
  font-family: var(--cx-font-title) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 14px !important;
  border-radius: 99px !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

/* Addons en el configure */
.rank-item.product_addons {
  background: var(--cx-primary-light) !important;
  border: 1px solid rgba(26,86,219,.18) !important;
  border-top: none !important;
  border-radius: var(--cx-radius) !important;
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
  box-shadow: none !important;
}
.addon-promo-container {
  background: var(--cx-primary-light) !important;
  border: 1px solid rgba(26,86,219,.18) !important;
  border-top: 4px solid var(--cx-primary) !important;
  border-radius: var(--cx-radius-lg) !important;
  padding: 18px !important;
  box-shadow: none !important;
  margin: 20px 0 !important;
}
.description a {
  border-color: var(--cx-primary) !important;
  color: var(--cx-primary) !important;
  border-radius: var(--cx-radius) !important;
}

/* ================================================================
   9. DOMAIN REGISTER / TRANSFER PAGES
   ================================================================ */
#order-standard_cart .cart-body.configure-domain-page {
  background: var(--cx-white) !important;
  border-radius: var(--cx-radius-lg) !important;
  box-shadow: var(--cx-shadow-sm) !important;
}
#order-standard_cart .cart-body.configure-domain-page button.btn-save.wgs_custom-btn {
  background: var(--cx-primary) !important;
  border-radius: var(--cx-radius) !important;
}

/* ================================================================
   10. PROMO CODE + CURRENCY
   ================================================================ */
.currency-drop-down-cart {
  background: var(--cx-gray-bg) !important;
  border: 1px solid var(--cx-gray-border) !important;
  border-radius: var(--cx-radius) !important;
  box-shadow: none !important;
  padding: 12px 18px !important;
  margin-bottom: 16px !important;
}
.promocode-section {
  margin: 10px 0 !important;
}
.promocode-section input,
.promo-input { border-radius: var(--cx-radius) 0 0 var(--cx-radius) !important; }
.promocode-btn,
.row.promo-apply-box .promocode-btn {
  background: var(--cx-primary) !important;
  border-color: var(--cx-primary) !important;
  border-radius: 0 var(--cx-radius) var(--cx-radius) 0 !important;
  color: #fff !important;
  font-family: var(--cx-font-title) !important;
  font-weight: 600 !important;
}

/* ================================================================
   11. ALERTA / MENSAJES
   ================================================================ */
.alert-info {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
  border-radius: var(--cx-radius) !important;
  font-family: var(--cx-font-body) !important;
}
.alert-danger {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border: 1px solid #fecaca !important;
  border-radius: var(--cx-radius) !important;
}
.alert-success {
  background: #f0fdf4 !important;
  color: #166534 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: var(--cx-radius) !important;
}
.alert-warning {
  background: #fffbeb !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
  border-radius: var(--cx-radius) !important;
}

/* ================================================================
   12. COMPLETE / THANK YOU PAGE
   ================================================================ */
.cart-complete-section,
.complete-section {
  background: var(--cx-white) !important;
  border-radius: var(--cx-radius-lg) !important;
  box-shadow: var(--cx-shadow-sm) !important;
  padding: 36px !important;
  text-align: center !important;
}

/* ================================================================
   13. SCROLLBAR GLOBAL
   ================================================================ */
#order-standard_cart ::-webkit-scrollbar { width: 5px; height: 5px; }
#order-standard_cart ::-webkit-scrollbar-track { background: var(--cx-gray-divider); }
#order-standard_cart ::-webkit-scrollbar-thumb { background: var(--cx-gray-border); border-radius: 99px; }

/* ================================================================
   14. AREA DEL CARRITO (contenedor general)
   ================================================================ */
/* Fondo del área de contenido del carrito */
div#order-standard_cart {
  font-family: var(--cx-font-body) !important;
}
.choose-pack {
  padding: 0 8px !important;
}
.choose-pack .pack-hed {
  padding: 10px 0 18px !important;
}
/* Corregir fondo del wrapper del carrito */
.domen-page,
#order-standard_cart,
.m-cart-30 {
  background: transparent !important;
}
/* Producto grid */
.domains-post {
  gap: 0 !important;
}
.domains-post .slide {
  padding: 8px !important;
  margin-bottom: 0 !important;
}
/* Quitar imagen de fondo antigua del cart-head-bar */
.cart-head-bar {
  background-image: none !important;
}

/* Tarjeta de DOMINIO en configure-domain */
#order-standard_cart .cart-body.configure-domain-page {
  padding: 24px !important;
}

/* VIEW CART — tabla resumen */
#summaryCustomGets .m-cart-sidebar-content {
  background: var(--cx-white) !important;
  border: 1px solid var(--cx-gray-border) !important;
  border-radius: var(--cx-radius) !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
}
#summaryCustomGets .cart-pnl-content h4.panel-title a {
  font-family: var(--cx-font-title) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--cx-gray-dark) !important;
}
.mcrt-pnl-body { padding: 14px !important; }
.product-domain-wgs {
  font-size: 13px !important;
  color: var(--cx-primary) !important;
  font-weight: 600 !important;
}
.primiere-btns .edit-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: var(--cx-primary-light) !important;
  color: var(--cx-primary) !important;
  border-radius: var(--cx-radius) !important;
  padding: 6px 12px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  font-family: var(--cx-font-title) !important;
  text-decoration: none !important;
  transition: background .15s ease !important;
}
.primiere-btns .edit-btn:hover {
  background: var(--cx-primary) !important;
  color: #fff !important;
}

/* Botón eliminar (trash) */
a .fa-trash-alt, a .fa-fw.fa-trash-alt {
  color: #ef4444 !important;
  opacity: .7 !important;
  transition: opacity .15s !important;
}
a:hover .fa-trash-alt { opacity: 1 !important; }

/* Checkout right column summary */
.col-md-5.right-section-checkout-page,
.checkout-right-section {
  padding-left: 16px !important;
}

/* ================================================================
   15. RESPONSIVE
   ================================================================ */
@media (max-width: 992px) {
  .cart-head-bar { padding: 16px 18px !important; }
  .left-side-checkout-page { padding: 20px !important; }
  .generic_price_tag span.price { font-size: 22px !important; }
  ul.selectBillingCycle li { min-width: 100px !important; padding: 10px 14px !important; }
}
@media (max-width: 768px) {
  .step-item { padding: 0 6px !important; font-size: 11px !important; }
  .cloud-item.amount span.centos-price { font-size: 22px !important; }
  .domains-post .slide { padding: 4px !important; }
}

/* ════════════════════════════════════════
   IW CART — Rediseño minimalista completo
   ════════════════════════════════════════ */

/* Variables base */
:root {
  --iw-primary: #1a56db;
  --iw-primary-light: #eff6ff;
  --iw-radius: 12px;
  --iw-radius-lg: 16px;
  --iw-shadow-sm: 0 1px 4px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
}

/* ── Cabecera de paso (steps bar) ── */
.cart-head-bar {
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: var(--iw-shadow-sm) !important;
  border: none !important;
  margin-bottom: 20px !important;
  padding: 20px 24px !important;
}
.cart-head-bar h1 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.cart-head-bar h1 i { color: var(--iw-primary) !important; font-size: 16px !important; }
.cart-head-bar p { font-size: 13px !important; color: #6b7280 !important; margin: 4px 0 0 !important; }

/* Steps */
ul.cart-product-step {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  justify-content: flex-end !important;
}
.step-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 12px !important;
  font-size: 12.5px !important;
  color: #9ca3af !important;
  position: relative !important;
}
.step-item + .step-item::before {
  content: "›" !important;
  position: static !important;
  color: #d1d5db !important;
  margin-right: 4px !important;
}
.step-item a { color: inherit !important; text-decoration: none !important; }
.step-item.active { color: var(--iw-primary) !important; font-weight: 700 !important; }
.stp-cot {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: #f3f4f6 !important;
  color: #9ca3af !important;
  flex-shrink: 0 !important;
}
.step-item.active .stp-cot {
  background: var(--iw-primary) !important;
  color: #fff !important;
}
.stp-cot.check {
  background: #dcfce7 !important;
  color: #16a34a !important;
}

/* ── Contenedor principal del producto ── */
#order-standard_cart { margin: 0 !important; }
.product-configure-page { padding: 0 !important; }
.secondary-cart-body,
.left-box-configure-product {
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: var(--iw-shadow-sm) !important;
  padding: 24px !important;
  margin-bottom: 16px !important;
}

/* Panel colapsable del producto */
.panel-group.product-configure-info-panel { margin-bottom: 20px !important; }
.panel-group.product-configure-info-panel .panel { 
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.panel-group.product-configure-info-panel .panel-heading {
  background: #f9fafb !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 14px 18px !important;
}
.panel-group.product-configure-info-panel .panel-title a {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  text-decoration: none !important;
}
.panel-group.product-configure-info-panel .panel-body {
  font-size: 13px !important;
  color: #6b7280 !important;
  padding: 14px 18px !important;
  line-height: 1.6 !important;
}

/* ── Ciclo de facturación ── */
.billing-cycle-section { margin-bottom: 20px !important; }
.billing-cycle-section h3 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin-bottom: 12px !important;
}
ul.selectBillingCycle {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 0 !important;
  list-style: none !important;
  margin: 0 !important;
}
ul.selectBillingCycle li {
  background: #f9fafb !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  transition: border-color .15s, background .15s !important;
  min-width: 110px !important;
  text-align: center !important;
}
ul.selectBillingCycle li:hover { border-color: var(--iw-primary) !important; background: var(--iw-primary-light) !important; }
ul.selectBillingCycle li.active {
  border-color: var(--iw-primary) !important;
  background: var(--iw-primary-light) !important;
}
ul.selectBillingCycle li strong {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #374151 !important;
  margin-bottom: 4px !important;
}
ul.selectBillingCycle li.active strong { color: var(--iw-primary) !important; }
ul.selectBillingCycle li span {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111827 !important;
}

/* ── Sub-heading de secciones ── */
.sub-heading {
  margin-bottom: 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #f3f4f6 !important;
}
.sub-heading span {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  background: none !important;
  padding: 0 !important;
}

/* ── Resumen del pedido (columna derecha) ── */
.right-box-configure-product,
.right-cart-body,
.cart-summary-price-section,
.cart-price-tag-section {
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: var(--iw-shadow-sm) !important;
  padding: 20px !important;
}

.cart-price-tag-section h3,
.cloud-price-tag h2 {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  margin-bottom: 14px !important;
}

/* Precio principal */
.generic_price_tag span.price,
.price-item-data .price,
.total-price-amount {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #111827 !important;
  line-height: 1 !important;
}

/* Botón agregar al carrito */
.btn-add-to-cart,
button[type="submit"].btn-success,
.configure-product-continue-btn {
  width: 100% !important;
  background: var(--iw-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 13px 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background .15s !important;
  margin-top: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
.btn-add-to-cart:hover,
button[type="submit"].btn-success:hover,
.configure-product-continue-btn:hover { background: #1741b0 !important; }

/* ── CHECKOUT ── */
.left-section-checkout-page { padding: 0 !important; }
.left-side-checkout-page {
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: var(--iw-shadow-sm) !important;
  padding: 24px !important;
}

/* Títulos dentro del checkout */
.Pers-titel {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 0 16px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid #f3f4f6 !important;
}

/* Secciones del checkout */
.create-acc-section-checkout,
.domain-contact-section,
.custom-field-checkout-page,
.payment-method-section {
  margin-bottom: 24px !important;
}

/* ── Selector de cuenta ── */
.account {
  border: 2px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  margin-bottom: 8px !important;
  transition: border-color .15s !important;
}
.account.active,
.account-new-custom.active { border-color: var(--iw-primary) !important; background: var(--iw-primary-light) !important; }
.account .small { color: #6b7280 !important; font-size: 12px !important; }

/* ── Inputs del carrito ── */
.inputBox { margin-bottom: 14px !important; position: relative !important; }
.inputBox .input,
.inputBox input,
.inputBox select,
.inputBox textarea {
  width: 100% !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  font-size: 13.5px !important;
  color: #111827 !important;
  background: #f9fafb !important;
  outline: none !important;
  transition: border-color .15s, background .15s !important;
  box-shadow: none !important;
}
.inputBox .input:focus,
.inputBox input:focus,
.inputBox select:focus,
.inputBox textarea:focus {
  border-color: var(--iw-primary) !important;
  background: #fff !important;
}
.inputText {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  margin-bottom: 5px !important;
  display: block !important;
}

/* ── Resumen del pedido (checkout derecha) ── */
.right-cart-body {
  position: sticky !important;
  top: 90px !important;
}

/* ── Método de pago ── */
.payment-icon-section { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; margin-bottom: 12px !important; }
.payment-icon-section img { height: 28px !important; border-radius: 4px !important; }
.payment-method-section label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  margin-bottom: 8px !important;
  cursor: pointer !important;
  transition: border-color .15s !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #374151 !important;
}
.payment-method-section label:hover { border-color: var(--iw-primary) !important; }
.payment-method-section input[type="radio"]:checked + label { border-color: var(--iw-primary) !important; background: var(--iw-primary-light) !important; }

/* ── Botón de completar pedido ── */
#btnCompleteOrder,
.btn-complete-order,
input[name="submit"].btn-primary {
  width: 100% !important;
  background: var(--iw-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 20px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background .15s !important;
  display: block !important;
  text-align: center !important;
}
#btnCompleteOrder:hover,
.btn-complete-order:hover { background: #1741b0 !important; color: #fff !important; }

/* ── Secciones del order summary ── */
.cart-colam {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #f3f4f6 !important;
  font-size: 13px !important;
}
.cart-colam:last-child { border-bottom: none !important; }
.crt-regist h4 { font-size: 13px !important; font-weight: 600 !important; color: #374151 !important; margin: 0 !important; }
.year-price { font-weight: 700 !important; color: #111827 !important; font-size: 13.5px !important; }
.cycle { font-size: 11px !important; color: #9ca3af !important; font-weight: 400 !important; margin-left: 2px !important; }

/* Totales */
.total-section,
.total-price-section {
  border-top: 2px solid #f3f4f6 !important;
  padding-top: 12px !important;
  margin-top: 12px !important;
}

/* Alertas en el carrito */
.alert.alert-danger { border-radius: 10px !important; border: none !important; font-size: 13px !important; }

/* Campos de dominio */
.primary-bg-color { color: var(--iw-primary) !important; }