/* ============================================================
   Hostymon — tema para WHMCS 8.7.3 (theme "Six", Order Form: Standard Cart)
   Mismos colores, tipografía y estilo de tarjetas/botones que hostymon.cl.
   No reemplaza archivos originales de WHMCS: se agrega como hoja aparte.
   ============================================================ */

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

:root{
  --hm-bg:#f6f5ef;
  --hm-ink:#1c2922;
  --hm-muted:#66756f;
  --hm-green:#33dc8a;
  --hm-green-mid:#187852;
  --hm-green-dark:#173f2f;
  --hm-cream:#f4f3ec;
  --hm-line:#e0e5e1;
  --hm-font-head:'Plus Jakarta Sans',sans-serif;
  --hm-font-body:'Instrument Sans',sans-serif;
}

/* ---------- Base ---------- */
body,body *{
  font-family:var(--hm-font-body) !important;
}
body{
  background:var(--hm-bg) !important;
  color:var(--hm-ink) !important;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,
.panel-title,.product header span,.logo,.navbar-brand{
  font-family:var(--hm-font-head) !important;
  font-weight:700 !important;
  letter-spacing:-.02em;
  color:var(--hm-green-dark) !important;
}
a{color:var(--hm-green-mid);}
a:hover,a:focus{color:var(--hm-green);}

/* Los íconos de Font Awesome usan su propia fuente de glifos: si la pisamos
   con Instrument Sans, se ven como cuadros vacíos. Los excluimos. */
.fa,.fas,.far,.fab,.fal,[class^="fa-"],[class*=" fa-"]{
  font-family:"Font Awesome 5 Free","Font Awesome 5 Brands" !important;
}

/* ---------- Navbar / header ---------- */
.navbar,.navbar-default,#header,.header{
  background:var(--hm-green-dark) !important;
  border:0 !important;
  box-shadow:0 4px 20px rgba(16,32,26,.12);
}
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-brand,
.navbar-default .navbar-text,
#header a, #header .navbar-brand{
  color:#e6efe9 !important;
  font-weight:600;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>li.dropdown.open>a{
  color:#fff !important;
  background:rgba(255,255,255,.08) !important;
}
.navbar .dropdown-menu{
  border:0;border-radius:14px;overflow:hidden;
  box-shadow:0 20px 45px rgba(16,32,26,.18);
}
/* "Ver Carrito" en la barra superior: solo tiene .btn (no .btn-primary) */
#header .btn,.top-nav .btn{
  background:var(--hm-green-mid) !important;
  border-color:var(--hm-green-mid) !important;
  color:#fff !important;
}
#header .btn:hover,.top-nav .btn:hover{
  background:var(--hm-green) !important;
  border-color:var(--hm-green) !important;
  color:#06110d !important;
}

/* ---------- Buttons ---------- */
.btn-primary,.btn.btn-primary,
input[type="submit"].btn-primary,
.btn-success{
  background:var(--hm-green-mid) !important;
  border-color:var(--hm-green-mid) !important;
  color:#fff !important;
  font-weight:700;
  border-radius:12px !important;
  box-shadow:none !important;
  transition:.2s;
}
.btn-primary:hover,.btn-success:hover{
  background:var(--hm-green-dark) !important;
  border-color:var(--hm-green-dark) !important;
}
.btn-default,.btn-secondary{
  border-radius:12px !important;
  border-color:var(--hm-line) !important;
  color:var(--hm-ink) !important;
}
.btn{border-radius:12px;}
/* "¿Ya Registrado?" / "Crea una Cuenta Nueva" en el checkout: azul/naranja por defecto, fuera de paleta */
.btn-info,.btn-warning{
  background:#fff !important;
  border:1px solid var(--hm-green-mid) !important;
  color:var(--hm-green-mid) !important;
  font-weight:700 !important;
  border-radius:12px !important;
}
.btn-info:hover,.btn-warning:hover{
  background:var(--hm-green-mid) !important;
  color:#fff !important;
}

/* ---------- Panels / cards ---------- */
.panel,.card,.well{
  border:1px solid var(--hm-line) !important;
  border-radius:20px !important;
  box-shadow:0 10px 30px rgba(16,32,26,.05) !important;
  overflow:hidden;
}
.panel-heading,.card-header{
  background:#fff !important;
  border-bottom:1px solid var(--hm-line) !important;
  font-weight:700;
  color:var(--hm-green-dark);
}
.panel-default>.panel-heading{background:#fff !important;}
.panel-body,.card-body{background:#fff;}
/* Encabezado azul "Producto/Opciones" del carrito (Standard Cart) */
.view-cart-items-header{
  background:var(--hm-green-dark) !important;
  color:#fff !important;
  font-weight:700;
  border-radius:12px 12px 0 0;
  padding:12px 16px;
}
/* "Vaciar Carro" (aparece como botón sólido azul con texto azul, ilegible) */
.empty-cart{margin-top:24px !important;padding-top:10px;}
#btnEmptyCart{
  background:#fff !important;
  border:1px solid var(--hm-green-mid) !important;
  color:var(--hm-green-mid) !important;
  border-radius:10px !important;
  font-weight:600;
}
#btnEmptyCart:hover{
  background:var(--hm-green-mid) !important;
  color:#fff !important;
}
/* "Seguir Comprando" bajo el botón Comprar: más aire arriba */
.view-cart-items-header ~ * #btnContinueShopping,
#btnContinueShopping{
  margin-top:14px !important;
  display:block;
}
/* Botón "Comprar" del carrito: el CSS propio del Standard Cart (.btn-checkout) le gana a .btn-success */
#checkout.btn-checkout{
  background:var(--hm-green-mid) !important;
  border-color:var(--hm-green-mid) !important;
  color:#fff !important;
  position:relative;
  display:block !important;
  text-align:center;
  width:100%;
  border-radius:12px !important;
  font-weight:700;
  margin-top:16px;
}
#checkout.btn-checkout:hover{
  background:var(--hm-green-dark) !important;
  border-color:var(--hm-green-dark) !important;
  color:#fff !important;
}
#checkout.btn-checkout i{
  color:#fff !important;
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
}

/* Listas (categorías, acciones): un solo contenedor redondeado, ítems planos adentro
   para que no queden esquinas redondeadas sueltas en el primer/último ítem. */
.list-group{
  border:1px solid var(--hm-line) !important;
  border-radius:0 !important;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(16,32,26,.05);
}
.list-group-item{
  border-radius:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  border-color:var(--hm-line) !important;
  color:var(--hm-ink) !important;
}
.list-group-item:first-child{border-top:0 !important;}
.list-group-item:last-child{border-bottom:0 !important;}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus{
  background:var(--hm-green-mid) !important;
  border-color:var(--hm-green-mid) !important;
  color:#fff !important;
}
.list-group-item:hover{background:#f2f6f3;}

/* ---------- Forms ---------- */
.form-control,select,textarea,input[type="text"],input[type="email"],input[type="password"]{
  border:1px solid var(--hm-line) !important;
  border-radius:12px !important;
  background:#fbfcfa !important;
  color:var(--hm-ink) !important;
  box-shadow:none !important;
}
.form-control:focus{
  border-color:var(--hm-green) !important;
  box-shadow:0 0 0 3px rgba(51,220,138,.15) !important;
}
label{font-weight:700;color:#33483e;}

/* ---------- Tablas (facturas, dominios, servicios) ---------- */
table.table thead th{
  background:#f2f5f2;
  color:var(--hm-green-dark);
  font-family:var(--hm-font-head);
  border-bottom:0 !important;
}
table.table td,table.table th{
  border-color:var(--hm-line) !important;
}
.label-success,.badge-success,.text-success{color:var(--hm-green-mid) !important;}
.label-success{background:var(--hm-green-mid) !important;}

/* ---------- Tarjetas de producto (Order Form / Standard Cart) ---------- */
.product{
  background:#fff !important;
  border:1px solid var(--hm-line) !important;
  border-radius:20px !important;
  box-shadow:0 10px 30px rgba(16,32,26,.05);
  padding:26px 26px 22px;
  margin-bottom:20px;
}
.product header span{
  font-size:1.05rem;
}
.product-desc{color:var(--hm-muted);font-size:.85rem;line-height:1.6;}
.product footer,
.product>footer,
div.product footer{
  background:transparent !important;
  background-image:none !important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--hm-line);
}
#products .product-pricing,
.cart-body .product-pricing,
.product footer .product-pricing,
div.product-pricing{
  background:#f2f6f3 !important;
  background-image:none !important;
  background-color:#f2f6f3 !important;
  box-shadow:none !important;
  border:0 !important;
  border-radius:12px !important;
  padding:10px 14px !important;
  color:var(--hm-green-dark) !important;
  text-align:left !important;
  line-height:1.4;
}
#products .product-pricing::before,
#products .product-pricing::after,
.product-pricing::before,
.product-pricing::after{
  display:none !important;
  content:none !important;
  background:transparent !important;
}
#products .product-pricing .price,
.product-pricing .price{
  font-family:var(--hm-font-head) !important;
  font-weight:800 !important;
  font-size:1.5rem !important;
  color:var(--hm-green-dark) !important;
}
#products .product-pricing,
#products .product-pricing *{
  color:var(--hm-green-dark) !important;
}
.btn-order-now{margin:0 !important;}

/* ---------- Buscador de dominios ---------- */
#domain-search-term,.domain-search-field{
  border-radius:12px !important;
}
.tld-search-results .list-group-item{
  border-radius:14px !important;
  margin-bottom:8px;
  border:1px solid var(--hm-line) !important;
}

/* Radios/checkboxes nativos del navegador (sin plugin/ícono): Chrome los pinta
   con su azul de acento por defecto salvo que fijemos accent-color. */
input[type="radio"],input[type="checkbox"]{
  accent-color:var(--hm-green-mid) !important;
}
.bg-primary{background-color:var(--hm-green-mid) !important;}
.text-primary{color:var(--hm-green-mid) !important;}

/* Opciones "Registrar un nuevo dominio" / "Usar mi propio dominio": tarjetas
   seleccionables prolijas en vez de radios sueltos sobre fondo gris plano. */
.domain-selection-options .option{
  margin:0 0 12px !important;
  padding:18px 20px !important;
  border:1px solid var(--hm-line);
  border-radius:16px;
  background:#fff;
  transition:.18s;
}
.domain-selection-options .option:hover{border-color:var(--hm-green);}
.domain-selection-options .option:has(input:checked){
  border-color:var(--hm-green-mid);
  background:#f8fbf9;
  box-shadow:0 0 0 1px var(--hm-green-mid);
}
.domain-selection-options .option>label{
  font-weight:700;
  color:var(--hm-ink);
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 4px;
}
.domain-selection-options .domain-input-group{margin-top:14px;}

/* Buscador de dominio: www. + input + TLD + botón, como un solo bloque prolijo */
.input-group{
  border-radius:14px !important;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(16,32,26,.06);
}
.input-group .form-control,
.input-group-addon,
.input-group-btn .btn{
  border-radius:0 !important;
  border-color:var(--hm-line) !important;
}
.input-group-addon{
  background:#f2f6f3 !important;
  color:var(--hm-muted) !important;
  font-weight:700;
}
.input-group .form-control:focus{
  box-shadow:none !important;
  border-color:var(--hm-green) !important;
}

/* ---------- Configurar producto (cart.php?a=confproduct) ---------- */
.product-info{
  background:#edf7f1;
  border-radius:16px;
  padding:22px 24px;
  margin-bottom:22px;
}
.product-info .product-title{
  font-family:var(--hm-font-head) !important;
  font-weight:800 !important;
  font-size:1.15rem;
  color:var(--hm-green-dark) !important;
  margin:0 0 8px;
}
.product-info p{color:var(--hm-muted);}

.sub-heading{margin:30px 0 16px;}
.sub-heading .primary-bg-color{
  background:#eef0ec !important;
  color:var(--hm-green-dark) !important;
  padding:8px 16px;
  border-radius:999px;
  font-weight:500 !important;
  font-size:.8rem;
  display:inline-block;
}

/* Tarjetas de complementos (Instalación de WordPress, etc.) */
.panel-addon{
  display:flex;
  flex-direction:column;
  height:calc(100% - 20px);
  border:1px solid var(--hm-line) !important;
  border-radius:16px !important;
  box-shadow:0 8px 24px rgba(16,32,26,.05) !important;
}
.panel-addon .panel-body{
  flex:1;
  background:#fff !important;
  padding:20px !important;
}
.panel-addon label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-weight:700;
  color:var(--hm-green-dark);
  margin:0 0 8px;
}
.panel-addon input[type="checkbox"]{
  margin-top:3px;
  flex:0 0 auto;
}
.panel-addon .panel-price{
  background:#f2f6f3 !important;
  color:var(--hm-green-dark) !important;
  font-weight:800;
  text-align:center;
  padding:10px 16px;
  border-top:1px solid var(--hm-line);
}
.panel-addon .panel-add{
  background:var(--hm-green-mid) !important;
  color:#fff !important;
  text-align:center;
  padding:13px 16px;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
}
.panel-addon .panel-add:hover{background:var(--hm-green-dark) !important;}

/* Aviso "¿Tiene preguntas?" */
.alert-warning{
  background:#eaf3fb !important;
  border-color:#c9e0f5 !important;
  color:#1d5a8c !important;
  border-radius:14px !important;
}
.alert-warning .alert-link{color:var(--hm-green-mid) !important;font-weight:700;}
/* Aviso de IP guardada por seguridad: sin caja, solo texto discreto */
.checkout-security-msg{
  background:transparent !important;
  border:none !important;
  color:var(--hm-muted) !important;
  padding-left:0 !important;
  padding-right:0 !important;
  font-size:.85rem;
  border-radius:0 !important;
}
.checkout-security-msg strong{color:var(--hm-ink) !important;}
.checkout-security-msg i{display:none;}

/* Sumario de Pedido (barra lateral del carro): tarjeta blanca, igual al resto
   del sitio, con el verde reservado solo para el título y el total. */
.order-summary{
  background:#fff !important;
  color:var(--hm-ink) !important;
  border:1px solid var(--hm-line) !important;
  border-radius:20px !important;
  padding:28px;
  box-shadow:0 10px 30px rgba(16,32,26,.05);
}
.order-summary h2{
  color:var(--hm-green-dark) !important;
  font-size:1.2rem !important;
  margin:0 0 18px !important;
  padding-bottom:14px;
  border-bottom:1px solid var(--hm-line);
}
.order-summary *{color:var(--hm-ink) !important;}
.order-summary strong,.order-summary .total,.order-summary b,.order-summary h2{color:var(--hm-green-dark) !important;}
/* El spinner de carga de WHMCS a veces queda visible encima del resumen ya cargado */
.order-summary .loader{
  display:none !important;
}
/* El desglose de precios se inyecta por AJAX y trae su propia tarjeta: la
   hacemos transparente para que no quede una caja dentro de otra. */
.order-summary .panel,
.order-summary .card,
.order-summary .well,
.order-summary table,
.order-summary .summary-container,
.order-summary .summary-container *{
  background:transparent !important;
  border-color:var(--hm-line) !important;
  box-shadow:none !important;
}
#btnCompleteProductConfig{
  width:100%;
  min-height:54px;
  margin-top:18px;
  display:flex !important;
  align-items:center;
  justify-content:center !important;
  gap:12px;
  font-size:1.82rem;
  font-weight:700;
  letter-spacing:.02em;
}
#btnCompleteProductConfig i{
  display:none !important;
}
#btnCompleteProductConfig::after{
  content:"→";
  font-size:.85em;
  font-weight:900;
  line-height:1;
  transform:translateY(-1px);
  transition:transform .15s ease;
}
#btnCompleteProductConfig:hover::after{
  transform:translateY(-1px) translateX(4px);
}

/* ---------- Login / auth pages ---------- */
.login-container,.login-panel,#login-container{
  background:#fff;
  border-radius:24px;
  box-shadow:0 25px 65px rgba(16,32,26,.1);
}

/* ---------- Footer ---------- */
#footer,.footer,footer{
  background:#0e1a15 !important;
  color:#9cb0a4 !important;
}
#footer a,.footer a{color:#cfe9db !important;}

/* ---------- Alerts ---------- */
.alert-success{
  background:#fff !important;
  border:1px solid var(--hm-line) !important;
  color:var(--hm-ink) !important;
  font-weight:600;
  font-size:1.15rem;
}
.alert-success strong,.alert-success b{
  color:var(--hm-green-mid) !important;
  font-size:1.7rem;
  font-weight:800;
}
.alert-danger{background:#fdeceb !important;border-color:#f4b8ab !important;color:#a8321d !important;}
/* Aviso de IP guardada por seguridad: sin caja, solo texto discreto */
.alert-info,
.alert-info *,
div[class*="alert-info"],
.ip-address-notice,
.card.alert-info{
  background:transparent !important;
  background-color:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
.alert-info{
  color:var(--hm-muted) !important;
  padding-left:0 !important;
  padding-right:0 !important;
  font-size:.85rem;
}
.alert-info strong,.alert-info b{color:var(--hm-ink) !important;}