/* Ajustes somente de layout do bloco de oferta. As cores pertencem ao tema ativo. */

/* Contador: impede LT e a hora de quebrarem linha no celular. */
.montanha-offer-head {
  flex-wrap: nowrap !important;
  gap: 8px !important;
}

.montanha-offer-title-wrap {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 6px !important;
}

.montanha-offer-title-wrap > img {
  flex: 0 0 auto !important;
}

.montanha-offer-title-wrap > span {
  font-size: 15px !important;
  line-height: 1.15 !important;
}

.montanha-offer-timer-wrap {
  flex: 0 0 auto !important;
  min-width: 140px !important;
  height: 26px !important;
  white-space: nowrap !important;
}

.montanha-offer-timer-wrap > div {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  line-height: 26px !important;
}

.montanha-offer-timer-wrap > div:first-child {
  padding: 0 12px 0 6px !important;
  margin-right: -9px !important;
  font-size: 12px !important;
}

.montanha-offer-timer-wrap > div:last-child {
  padding: 0 6px 0 12px !important;
  font-size: 13px !important;
}

.montanha-offer-timer-wrap .bonus-timer {
  display: block !important;
  white-space: nowrap !important;
  line-height: 26px !important;
}

@media (max-width: 360px) {
  .montanha-offer-title-wrap > span {
    font-size: 14px !important;
  }

  .montanha-offer-timer-wrap {
    min-width: 132px !important;
  }

  .montanha-offer-timer-wrap > div:first-child {
    padding-left: 5px !important;
    padding-right: 10px !important;
  }

  .montanha-offer-timer-wrap > div:last-child {
    padding-left: 10px !important;
    padding-right: 5px !important;
    font-size: 12px !important;
  }
}

/* O campo de valor acompanha a paleta do tema; nunca usa turquesa fixo. */
html:not(.montanha-deposit-black-theme) body .montanha-deposit-amount-fallback-wrap,
html:not(.montanha-deposit-black-theme) body [class*="_main-recharge_"] [class*="_amount-input_"] .ui-input,
html:not(.montanha-deposit-black-theme) body [class*="_main-recharge_"] [class*="_amount-input_"] .ui-input__wrapper {
  border-color: var(--skin__primary, currentColor) !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html.montanha-deposit-black-theme body .montanha-deposit-amount-fallback-wrap {
  border-color: #666666 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html.montanha-deposit-black-theme body .montanha-deposit-amount-fallback-wrap:focus-within {
  border-color: #ffffff !important;
}

/* O bloco de oferta chega da API com turquesa inline. Sobrescreve-o já no
   primeiro quadro para impedir vestígio verde e troca tardia de aparência. */
.montanha-offer-remark,
.montanha-offer-timer-wrap,
.montanha-offer-timer-wrap > div,
.montanha-offer-title-wrap > span {
  transition: none !important;
}

html:not(.montanha-deposit-black-theme) body .montanha-offer-remark,
html:not(.montanha-deposit-black-theme) body .montanha-offer-timer-wrap {
  border-color: var(--skin__primary, currentColor) !important;
  background: var(--skin__bg_2, transparent) !important;
  background-color: var(--skin__bg_2, transparent) !important;
}

html:not(.montanha-deposit-black-theme) body .montanha-offer-timer-wrap > div {
  background: var(--skin__bg_2, transparent) !important;
  background-color: var(--skin__bg_2, transparent) !important;
  color: var(--skin__lead, currentColor) !important;
  -webkit-text-fill-color: var(--skin__lead, currentColor) !important;
}

html:not(.montanha-deposit-black-theme) body .montanha-offer-title-wrap > span {
  color: var(--skin__lead, currentColor) !important;
  -webkit-text-fill-color: var(--skin__lead, currentColor) !important;
}

html.montanha-deposit-black-theme body .montanha-offer-remark,
html.montanha-deposit-black-theme body .montanha-offer-timer-wrap {
  border-color: #666666 !important;
  background: #151515 !important;
  background-color: #151515 !important;
  box-shadow: none !important;
}

html.montanha-deposit-black-theme body .montanha-offer-timer-wrap > div {
  background: #151515 !important;
  background-color: #151515 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html.montanha-deposit-black-theme body .montanha-offer-title-wrap > span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
