/**
 * Cards de planos (widgets hostout_product / hostout_product_price).
 *
 * Os widgets legados do Hostiko herdam a tipografia global "primary" (72px,
 * cor escura) no nome do plano e o seletor de ciclo vem com o visual branco do
 * nice-select. Aqui os cards seguem a linguagem visual da home: fundo verde
 * profundo, acento verde, tipografia Inter e espaçamentos enxutos.
 *
 * Os seletores usam `#primary` para vencer o CSS por página que o Elementor
 * gera (`.elementor-3923 .elementor-element.elementor-element-xxx ...`).
 */

/* --------------------------------------------------------------------------
   Container do card
   -------------------------------------------------------------------------- */
#primary .e-con.e-child:has(> .elementor-widget-hostout_product_price) {
  gap: 14px;
  padding: 26px 22px 24px;
  border: 1px solid rgba(63, 213, 129, 0.18);
  border-radius: 20px;
  background-image: linear-gradient(
    180deg,
    rgba(63, 213, 129, 0.07) 0%,
    rgba(63, 213, 129, 0) 42%
  );
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

#primary .e-con.e-child:has(> .elementor-widget-hostout_product_price):hover {
  border-color: rgba(63, 213, 129, 0.42);
  box-shadow: 0 26px 50px -26px rgba(0, 0, 0, 0.7);
}

/* Cards aparecem imediatamente: o wrapper com animação de entrada fica com
   `elementor-invisible` (visibility:hidden) até o JS do Elementor rodar, o que
   atrasava o LCP das páginas de planos em ~4s no 4G. */
#primary .e-con:has(> .e-con > .elementor-widget-hostout_product_price),
#primary .e-con.e-child:has(> .elementor-widget-hostout_product_price) {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
}

/* O Elementor aplica height:100% nos containers de widget dentro de containers
   flex; com altura automática isso colapsa a caixa (o nome do plano ficava com
   13px para um texto de 23px) e os gaps entre os blocos do card ficavam
   irregulares. Deixa cada widget medir o próprio conteúdo. */
#primary .e-con.e-child:has(> .elementor-widget-hostout_product_price) > .elementor-widget > .elementor-widget-container {
  height: auto;
  width: 100%;
  margin: 0;
}

/* Margens negativas vindas do Elementor quebravam o ritmo vertical (gap do
   card + margem). O espaçamento agora é só o `gap` do card. */
#primary .e-con.e-child:has(> .elementor-widget-hostout_product_price) > .elementor-widget {
  margin-top: 0;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Nome do plano
   -------------------------------------------------------------------------- */
#primary .elementor-widget-hostout_product .elementor-widget-container > .whmcs_prodcts_name {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: #eafbf3;
  text-transform: none;
  white-space: normal;
}

/* Linha de especificações (5 CPU · 3 GB RAM · ...) */
#primary .e-con.e-child:has(> .elementor-widget-hostout_product_price) .elementor-widget-text-editor p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #9cc9b8;
}

/* "A partir de" */
#primary .e-con.e-child:has(> .elementor-widget-hostout_product_price) .elementor-widget-heading p {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #7fb9a9;
}

/* --------------------------------------------------------------------------
   Preço
   -------------------------------------------------------------------------- */
#primary .elementor-widget-hostout_product_price .hostout-price-outer {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  color: #f5fffa;
}

/* Sem catálogo: esconde preço/seletor em vez de exibir NaN. */
#primary .hostout-plan-no-price .hostout-price-outer,
#primary .hostout-plan-no-price .hostout-select-field.nice-select {
  display: none;
}

#primary .elementor-widget-hostout_product_price .hostout-price-outer .currency {
  position: relative;
  top: 0;
  align-self: flex-start;
  margin-top: 7px;
  margin-right: 2px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0;
  color: #8fe7c0;
}

#primary .elementor-widget-hostout_product_price .hostout-price-outer .price {
  font-family: 'Inter', sans-serif;
  font-size: 40px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #f5fffa;
}

#primary .elementor-widget-hostout_product_price .hostout-price-outer .decimal-outer {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}

#primary .elementor-widget-hostout_product_price .hostout-price-outer .decimal-outer .decimal {
  display: inline;
  margin-left: 1px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
  color: #f5fffa;
}

#primary .elementor-widget-hostout_product_price .hostout-price-outer .decimal-outer .duration {
  display: inline-block;
  margin-left: 3px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  color: #7fb9a9;
}

/* --------------------------------------------------------------------------
   Seletor de ciclo (nice-select)
   -------------------------------------------------------------------------- */
#primary .elementor-widget-hostout_product_price .hostout-select-field.nice-select {
  float: none;
  width: 100%;
  height: 40px;
  margin-top: 6px;
  padding: 0 36px 0 14px;
  background: rgba(9, 24, 18, 0.55);
  border: 1px solid rgba(127, 185, 169, 0.22);
  border-radius: 10px;
  color: #d9f6e9;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 38px;
  font-weight: 500;
  /* A lista de ciclos é filha deste elemento: `overflow: hidden` (usado antes
     para o ellipsis) recortava o dropdown e os outros ciclos não apareciam. */
  overflow: visible;
}

#primary .elementor-widget-hostout_product_price .hostout-select-field.nice-select.open {
  /* Acima dos cards vizinhos enquanto a lista está aberta. */
  z-index: 30;
}

#primary .elementor-widget-hostout_product_price .hostout-select-field.nice-select .current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  line-height: 38px;
  color: #d9f6e9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#primary .elementor-widget-hostout_product_price .hostout-select-field.nice-select .current .price {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: inherit;
  font-weight: 600;
  letter-spacing: 0;
  color: #eafbf3;
}

#primary .elementor-widget-hostout_product_price .hostout-select-field.nice-select .current .dash {
  font-size: 11px;
  line-height: inherit;
  color: rgba(159, 211, 191, 0.55);
}

#primary .elementor-widget-hostout_product_price .hostout-select-field.nice-select .current .cycle {
  font-size: 12.5px;
  line-height: inherit;
  color: #8fbfae;
  text-transform: lowercase;
}

#primary .elementor-widget-hostout_product_price .hostout-select-field.nice-select:after {
  right: 16px;
  border-bottom-color: #7fb9a9;
  border-right-color: #7fb9a9;
}

#primary .elementor-widget-hostout_product_price .hostout-select-field.nice-select:hover,
#primary .elementor-widget-hostout_product_price .hostout-select-field.nice-select.open,
#primary .elementor-widget-hostout_product_price .hostout-select-field.nice-select:focus {
  background: rgba(9, 24, 18, 0.82);
  border-color: rgba(63, 213, 129, 0.5);
}

#primary .elementor-widget-hostout_product_price .hostout-select-field.nice-select .list {
  min-width: 100%;
  margin-top: 6px;
  background: #10251c;
  border: 1px solid rgba(127, 185, 169, 0.22);
  border-radius: 10px;
  box-shadow: 0 20px 44px -14px rgba(0, 0, 0, 0.75);
  overflow: hidden;
  z-index: 99;
}

/* Sem espaço abaixo (último card no mobile): a lista abre para cima. */
#primary .elementor-widget-hostout_product_price .hostout-select-field.nice-select.hostout-drop-up .list {
  top: auto;
  bottom: calc(100% + 6px);
  margin-top: 0;
  margin-bottom: 0;
}

#primary .elementor-widget-hostout_product_price .hostout-select-field.nice-select .list .option {
  min-height: 36px;
  padding: 0 14px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 36px;
  color: #cfeadd;
  border-bottom: 1px solid rgba(127, 185, 169, 0.1);
}

#primary .elementor-widget-hostout_product_price .hostout-select-field.nice-select .list .option:last-child {
  border-bottom: 0;
}

#primary .elementor-widget-hostout_product_price .hostout-select-field.nice-select .list .option:hover,
#primary .elementor-widget-hostout_product_price .hostout-select-field.nice-select .list .option.focus {
  background: rgba(63, 213, 129, 0.12);
  color: #f2fff9;
}

#primary .elementor-widget-hostout_product_price .hostout-select-field.nice-select .list .option.selected {
  background: rgba(63, 213, 129, 0.16);
  color: #f2fff9;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Botão
   -------------------------------------------------------------------------- */
#primary .e-con.e-child:has(> .elementor-widget-hostout_product_price) .whmcs-product-btn-outer {
  margin-top: 2px;
}

#primary .e-con.e-child:has(> .elementor-widget-hostout_product_price) .whmcs-product-btn-outer .whmcs-product-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  padding: 0 18px;
  background: #3fd581;
  border: 0;
  border-radius: 12px;
  color: #082117;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  box-shadow: 0 12px 26px -14px rgba(63, 213, 129, 0.85);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

#primary .e-con.e-child:has(> .elementor-widget-hostout_product_price) .whmcs-product-btn-outer .whmcs-product-btn:hover {
  background: #57e596;
  color: #082117;
  transform: translateY(-1px);
  box-shadow: 0 16px 32px -14px rgba(63, 213, 129, 0.95);
}

/* --------------------------------------------------------------------------
   Recursos (features) — antes do CTA
   -------------------------------------------------------------------------- */
#primary .e-con.e-child:has(> .elementor-widget-hostout_product_price) .elementor-widget-hostout_product_button {
  order: 20;
}

#primary .e-con.e-child:has(> .elementor-widget-hostout_product_price) .elementor-widget-hostout_product_description {
  order: 10;
}

#primary .e-con.e-child:has(> .elementor-widget-hostout_product_price) .whmcs_prodcts_description ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#primary .e-con.e-child:has(> .elementor-widget-hostout_product_price) .whmcs_prodcts_description li {
  position: relative;
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.4;
  color: #a9d4c2;
}

#primary .e-con.e-child:has(> .elementor-widget-hostout_product_price) .whmcs_prodcts_description li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 4px;
  width: 10px;
  height: 6px;
  border-left: 2px solid #3fd581;
  border-bottom: 2px solid #3fd581;
  border-radius: 1px;
  transform: rotate(-45deg);
}

#primary .e-con.e-child:has(> .elementor-widget-hostout_product_price) .whmcs_prodcts_description li strong {
  font-weight: 500;
  color: #c6e7d8;
}

/* --------------------------------------------------------------------------
   Responsivo: 4 cards → 2 (tablet) → 1 por linha (mobile)
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  #primary .e-con:has(> .e-con > .elementor-widget-hostout_product_price) {
    flex-wrap: nowrap;
  }

  #primary .e-con.e-child:has(> .elementor-widget-hostout_product_price) {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
}

@media (max-width: 1024px) {
  #primary .e-con:has(> .e-con > .elementor-widget-hostout_product_price) {
    flex-wrap: wrap;
  }

  #primary .e-con.e-child:has(> .elementor-widget-hostout_product_price) {
    flex: 1 1 calc(50% - 10px);
    width: calc(50% - 10px);
    max-width: calc(50% - 10px);
    padding: 24px 20px 22px;
  }

  #primary .elementor-widget-hostout_product_price .hostout-price-outer .price {
    font-size: 36px;
  }
}

@media (max-width: 767px) {
  #primary .e-con:has(> .e-con > .elementor-widget-hostout_product_price) {
    flex-direction: column;
    align-items: stretch;
  }

  #primary .e-con.e-child:has(> .elementor-widget-hostout_product_price) {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    gap: 12px;
    padding: 22px 18px 20px;
    border-radius: 18px;
  }

  #primary .elementor-widget-hostout_product .elementor-widget-container > .whmcs_prodcts_name {
    font-size: 17px;
  }
}