/* ===============================
   UNHOSTING – PREMIUM COMPARISON THEME
   (DreamHost-ish + aire + tarjetas)
=============================== */

.uh-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 18px;
  padding-right: 18px;
}

.row-product-selection.uh-wrap{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.uh-sidebar-toggle{
  margin: 18px 0 0;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
}

/* Sidebar */
.uh-sidebar{
  padding-left: 0 !important;
  padding-right: 18px !important;
}

.uh-sidebar-card{
  background: #fff;
  border: 1px solid #ece7ff;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,0.06);
}

.uh-sidebar-title{
  font-weight: 900;
  color: #2f1c6a;
  margin-bottom: 10px;
  display:flex;
  gap:10px;
  align-items:center;
}

/* Main */
.uh-main{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.uh-order{
  padding-top: 24px;
}

/* HERO */
.uh-hero-mini{
  background: linear-gradient(180deg, #f7f4ff, #ffffff);
  border: 1px solid #ece7ff;
  border-radius: 18px;
  padding: 18px;
  margin: 18px 0 26px;
  box-shadow: 0 16px 34px rgba(47,28,106,0.08);
}

.uh-hero-mini-inner{
  display: table;
  width: 100%;
}

.uh-hero-mini-left{
  display: table-cell;
  width: 68%;
  vertical-align: top;
  padding-right: 16px;
}

.uh-hero-mini-right{
  display: table-cell;
  width: 32%;
  vertical-align: top;
}

.uh-pill{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #ece7ff;
  font-weight: 800;
  font-size: 12px;
  color: #2f1c6a;
  margin-bottom: 10px;
}

.uh-pill i{
  color:#19c37d;
  margin-right: 8px;
}

.uh-h1{
  font-weight: 900;
  font-size: 34px;
  color: #232232;
  margin: 2px 0 8px;
  letter-spacing: -0.4px;
}

.uh-sub{
  color: #6c6a7a;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 10px;
}

.uh-trust{
  margin-top: 12px;
}

.uh-trust span{
  display:inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #ece7ff;
  background: #fff;
  color: #2f1c6a;
  font-weight: 800;
  font-size: 12px;
}

.uh-trust i{
  margin-right: 6px;
  color: #6b4ce6;
}

.uh-alert{
  border-radius: 14px;
}

/* Help card */
.uh-help-card{
  border-radius: 16px;
  padding: 14px;
  background: #fff;
  border: 1px solid #ece7ff;
  box-shadow: 0 12px 26px rgba(47,28,106,0.10);
}

.uh-help-title{
  font-weight: 900;
  color: #2f1c6a;
  font-size: 16px;
}

.uh-help-sub{
  color: #6c6a7a;
  font-size: 13px;
  margin-top: 4px;
  margin-bottom: 10px;
}

.uh-help-note{
  margin-top: 10px;
  font-size: 12px;
  color: #6c6a7a;
}

/* Grid */
.uh-grid{
  margin-top: 18px;
}

.uh-grid-list{
  list-style:none;
  padding: 0;
  margin: 0;
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
}

.uh-card{
  width: calc(33.333% - 10px);
  background:#fff;
  border: 1px solid #ece7ff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,0.08);
  transition: transform .25s ease, box-shadow .25s ease;
}

.uh-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(0,0,0,0.14);
}

.uh-card-featured{
  border-color: rgba(107,76,230,0.45);
  box-shadow: 0 18px 44px rgba(107,76,230,0.18);
}

.uh-card-top{
  padding: 16px;
  position: relative;
}

.uh-card-name h4{
  margin: 0 0 6px;
  font-weight: 900;
  font-size: 22px;
  color: #2f1c6a;
  display:flex;
  align-items:center;
  gap: 10px;
}

.uh-card-name i{
  color: #6b4ce6;
}

.uh-card-tagline{
  margin: 0 0 10px;
  color: #6c6a7a;
}

.uh-badge{
  position:absolute;
  top: 14px;
  right: 14px;
  background: linear-gradient(135deg,#6b4ce6,#8f7bff);
  color:#fff;
  font-weight: 900;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
}

.uh-price-area{
  margin-top: 10px;
}

.uh-price-big{
  font-size: 26px;
  font-weight: 900;
  color: #232232;
}

.uh-price-sub{
  font-size: 12px;
  color: #6c6a7a;
  margin-top: 2px;
}

.uh-cta{
  margin-top: 12px;
  border-radius: 12px !important;
  padding: 14px 12px !important;
  font-weight: 800 !important;
  background: #2f7ab8;
  border-color: #2f7ab8;
}

.uh-cta:hover{
  background: #1f5f93;
  border-color: #1f5f93;
}

.uh-disabled{
  margin-top: 12px;
  border-radius: 12px !important;
  padding: 14px 12px !important;
  font-weight: 800 !important;
  opacity: .7;
}

/* Features list */
.uh-features{
  list-style:none;
  padding: 0 16px 14px;
  margin: 0;
}

.uh-features li{
  padding: 10px 0;
  border-top: 1px dashed #ececf6;
  color: #232232;
  display:flex;
  gap: 10px;
  align-items:flex-start;
}

.uh-features i{
  color: #19c37d;
  margin-top: 2px;
}

/* Benefits */
.uh-benefits{
  margin-top: 44px;
  padding: 34px 18px;
  border-radius: 18px;
  background: #f7f9ff;
  border: 1px solid #ece7ff;
}

.uh-benefits-head{
  margin-bottom: 16px;
}

.uh-h2{
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 900;
  color: #2f1c6a;
}

.uh-muted{
  color: #6c6a7a;
}

.uh-benefits-grid{
  margin-top: 14px;
}

.uh-benefit-card{
  background:#fff;
  border:1px solid #ece7ff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 26px rgba(0,0,0,0.06);
  height: 100%;
}

.uh-benefit-ico{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #eef1ff;
  border: 1px solid #ece7ff;
  color: #6b4ce6;
  font-size: 22px;
  margin-bottom: 12px;
}

.uh-benefit-card h4{
  margin: 0 0 8px;
  font-weight: 900;
  color: #2f1c6a;
}

.uh-benefit-card p{
  margin: 0;
  color: #6c6a7a;
  line-height: 1.6;
}

/* Final CTA */
.uh-final-cta{
  margin-top: 26px;
  border-radius: 18px;
  padding: 34px 18px;
  background: linear-gradient(135deg,#120a2a,#1b1240);
  color: #fff;
  box-shadow: 0 18px 44px rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.10);
}

.uh-final-cta .uh-muted{
  color: rgba(255,255,255,0.78);
}

.uh-final-actions{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  justify-content:center;
  flex-wrap: wrap;
}

.uh-final-cta .btn{
  border-radius: 14px;
  padding: 14px 18px;
  font-weight: 800;
}

/* Includes */
.uh-includes{
  margin-top: 26px;
  background:#fff;
  border: 1px solid #ece7ff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 26px rgba(0,0,0,0.06);
}

.uh-includes-pill{
  display:inline-block;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 900;
  font-size: 12px;
  background: #6b4ce6;
  color:#fff;
}

.uh-includes-list{
  margin: 14px 0 0;
  padding: 0;
  list-style:none;
  display:flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.uh-includes-list li{
  color:#232232;
}

.uh-includes-list i{
  color:#19c37d;
  margin-right: 8px;
}

/* Responsive */
@media (max-width: 991px){
  .uh-hero-mini-inner{ display:block; }
  .uh-hero-mini-left, .uh-hero-mini-right{ display:block; width: 100%; padding-right: 0; }
  .uh-hero-mini-right{ margin-top: 14px; }
  .uh-h1{ font-size: 26px; }
  .uh-card{ width: 100%; }
  .uh-sidebar{ padding-right: 0 !important; }
}
/* FIX: centrar el bloque y evitar “corrida a la izquierda” */
#order-premium_comparison,
.row-product-selection.uh-wrap{
  width: 100%;
}

.uh-wrap{
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* WHMCS a veces mete padding raro en .main-body / .main-content */
.main-body,
.main-content,
#main-body{
  overflow-x: hidden;
}

/* Evita el “salto” cuando el sidebar empuja con left:300px */
.row-product-selection{
  position: relative;
  left: 0 !important;
}
/* Centrar todo aunque el HTML haya quedado “suelto” */
.uh-page,
.uh-order,
#order-premium_comparison{
  width: 100%;
}

#order-premium_comparison{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
  box-sizing: border-box;
}

/* Evita que filas/cols se peguen al borde */
.uh-main{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* FAQ */
.uh-faq{
  margin-top: 28px;
  background: #fff;
  border: 1px solid #ece7ff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 24px rgba(47,28,106,0.06);
}
.uh-faq-head{ margin-bottom: 10px; }

.uh-accordion .uh-panel{
  border: 1px solid #ece7ff;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
}
.uh-accordion .panel-heading{
  background: #f6f3ff;
  border: 0;
  padding: 0;
}
.uh-faq-q{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px;
  text-decoration: none !important;
  color: #2f1c6a !important;
  font-weight: 800;
}
.uh-faq-q:hover{ opacity: .95; }

.uh-faq-ico{
  color: #6b4ce6;
  transition: transform .2s ease;
}

/* Gira la flecha cuando está abierto */
.uh-faq-q[aria-expanded="true"] .uh-faq-ico{
  transform: rotate(180deg);
}

.uh-faq-a{
  padding: 14px;
  color: #6c6a7a;
  line-height: 1.6;
  background: #fff;
}
/* Cambiar color SOLO del botón del plan (uh-cta), sin tocar todo Bootstrap */
a.btn.btn-primary.btn-block.uh-cta{
  background: #6f42c1;      /* <- tu color */
  border-color: #6f42c1;
  color: #fff;
}

a.btn.btn-primary.btn-block.uh-cta:hover,
a.btn.btn-primary.btn-block.uh-cta:focus{
  background: #5a34a3;      /* <- hover */
  border-color: #5a34a3;
  color: #fff;
}

/* opcional: foco más elegante */
a.btn.btn-primary.btn-block.uh-cta:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(111,66,193,.25);
}

/* =========================
   HEADER TOP: look DreamHost-like
   (sin tocar #main-menu)
========================= */
#header{
  background: #ffffff;                 /* base limpia */
  border-bottom: 1px solid #E6E9F5;    /* borde suave */
}

#header .top-nav > li > a{
  color: #223056;                      /* texto oscuro elegante */
  font-weight: 700;
}

#header .top-nav > li > a:hover{
  color: #4B2BFF;                      /* acento morado */
}

/* Botón principal arriba (Ver carrito / Logout / etc.) */
#header .top-nav .primary-action .btn{
  background: linear-gradient(135deg, #4B2BFF, #6B4CFF);
  border: 0;
  color: #fff;
  font-weight: 900;
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(75,43,255,.18);
}
#header .top-nav .primary-action .btn:hover{
  filter: brightness(1.03);
}