/* Subscription price responsive fix
   Prevents desktop viewport price text from drifting into the visual card area while
   keeping the mobile Telegram Mini App layout compact and readable. */

.region-page .sub-card,
.region-page .single-subscription .sub-card {
  grid-template-columns: minmax(0, 1fr) clamp(116px, 26%, 178px) !important;
}

.region-page .sub-visual {
  min-width: 0 !important;
}

.region-page .sub-price {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 12px !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-size: clamp(22px, 4.6vw, 32px) !important;
  letter-spacing: -0.6px !important;
  overflow: hidden !important;
}

@media (min-width: 640px) {
  .region-page .sub-card,
  .region-page .single-subscription .sub-card {
    grid-template-columns: minmax(0, 1fr) 176px !important;
  }

  .region-page .sub-price {
    font-size: 30px !important;
    padding: 0 16px !important;
  }
}

@media (max-width: 430px) {
  .region-page .sub-card,
  .region-page .single-subscription .sub-card {
    grid-template-columns: minmax(0, 1fr) 112px !important;
  }

  .region-page .sub-price {
    font-size: clamp(20px, 6.2vw, 25px) !important;
    padding: 0 8px !important;
    letter-spacing: -0.8px !important;
  }
}

@media (max-width: 360px) {
  .region-page .sub-card,
  .region-page .single-subscription .sub-card {
    grid-template-columns: minmax(0, 1fr) 98px !important;
  }

  .region-page .sub-price {
    font-size: 21px !important;
  }
}