/* --- Global Styles (зберігаємо фон і базовий контейнер) --- */
.support-banner {
  position: relative;
  left: 50%;
  margin-left: -50vw;
  width: 100vw !important;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
}
html, body {
  overflow-x: hidden;
  overflow-x: hidden;
}
.banner-content {
  display: flex;
  flex-direction: column;
  align-items: center; /* Вирівнювання всього контенту по центру */
  gap: 13.67vw; /* Проміжок між header, main, button (мобільний) */
  width: 100%; /* Займає доступну ширину */
  max-width: 91.9vw; /* Обмеження ширини контенту на моб */
}

/* --- Header Section --- */
.banner-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6.08vw; /* Мобільний відступ */
  width: 100%;
}

.banner-subtitle {
  color: var(--flash-white);
  font-family: var(--font-family-ruberoid-regular);
  font-size: var(--font-size-xs); /* 20px - mobile base */
  font-weight: 400;
  line-height: 7.59vw; /* mobile base */
  letter-spacing: 0;
}

.banner-title {
  color: var(--flash-white);
  /* Використовуємо клас з styleguide */
  font-family: var(--font-family-ruberoid-bold);
  font-weight: 700;
  /* Базові стилі заголовка (мобільні) */
  font-size: var(--font-size-l); /* 30px mobile */
  line-height: 10.25vw; /* mobile */
  letter-spacing: 0.6px; /* mobile */
}


/* --- Main Section (Image + Billing Info) --- */
.banner-main {
  display: flex;
  flex-direction: column; /* Моб: картинка над текстом */
  align-items: center;
  gap: 5.06vw; /* Мобільний відступ */
  width: 100%;
}

.billing-image {
  /* Мобільні розміри */
  height: 46.84vw;
  width: 51.9vw;
  object-fit: contain; /* Щоб зображення не спотворювалось */
}

.billing-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.03vw; /* Мобільний відступ */
  /* Ширина для мобільних */
  width: 40.87vw; 
}

.billing-title-wrapper {
 /* Мобільна висота */
 height: 11.72vw; 
 display: flex;
 align-items: center;
}

.billing-title {
  color: var(--spring-green);
  font-family: var(--font-family-ruberoid-bold);
  font-weight: 700;
  /* Мобільні розміри */
  font-size: 9.11vw; 
  line-height: 11.85vw; 
  letter-spacing: 0.27vw; 
  white-space: nowrap;

}

.billing-date-wrapper {
  display: flex;
  align-items: center;
}

.billing-date {
  /* Стилі з .ruberoid-bold-wild-sand-25px застосовуються тут */
  color: var(--flash-white);
  font-family: var(--font-family-ruberoid-bold);
  font-size: var(--font-size-m); /* 25px - base mobile/tablet */
  font-weight: 700;
  /* Мобільні стилі */
  line-height: 8.23vw; /* mobile */
  letter-spacing: 0.19vw; /* mobile */
  white-space: nowrap;
  display: block;
}
.billing-date span:first-child {
  letter-spacing: 0.05vw; /* mobile */
}
.billing-date span:last-child {
   letter-spacing: 0.05vw; /* mobile */
}


/* --- Button --- */
.details-button {
  display: flex; /* Для вирівнювання тексту всередині */
  align-items: center;
  justify-content: center;
  background-color: var(--spring-green);
  text-decoration: none; /* Прибираємо підкреслення у посилання */
  cursor: pointer;
  /* Мобільні розміри */
  border-radius: 2.03vw;
  gap: 2.53vw;
  height: 15.19vw;
  padding: 2.53vw;
  width: 75.95vw;
  display: flex !important;
}

a.details-button:hover {
  background-color: #3dd078;
}

.button-text {
  /* Стилі з .ruberoid-bold-onyx-16px */
  color: var(--jet);
  font-family: var(--font-family-ruberoid-bold);
  font-size: var(--font-size-xxs); /* 16px base */
  font-weight: 700;
  /* Мобільні стилі */
  line-height: 6.08vw;
  letter-spacing: 0.04vw;
  white-space: nowrap;
  width: fit-content;
}

/* ======================================================== */
/* --- Tablet Styles --- (Застосовуються стилі з .index) */
/* ======================================================== */
@media screen and (min-width: 834px) {
  .support-banner {
    /* Планшетні відступи */
    padding: 14.03vw 9.59vw;
    gap: 6.47vw; /* Відступ між блоками */
  }

  .banner-content {
    gap: 6.47vw; /* Проміжок між header, main, button */
    max-width: 100%; /* На планшеті займає всю ширину контейнера */
  }

  /* --- Header Section (Tablet) --- */
  .banner-header {
    gap: 2.88vw; 
  }

  .banner-subtitle {
    font-size: var(--font-size-s); /* 24px tablet */
    line-height: 4.32vw; 
  }

  .banner-title {
    /* Планшетні/Десктопні стилі заголовка H1 */
    font-size: var(--font-size-xxl); /* 44px */
    line-height: 6.86vw; /* tablet */
    letter-spacing: 1.32px; /* desktop/tablet */
  }

  /* --- Main Section (Tablet) --- */
  .banner-main {
    flex-direction: row; /* Картинка зліва, текст справа */
    justify-content: center; /* Вирівнювання по центру */
    gap: 2.4vw; /* Проміжок між картинкою і текстом */
  }

  .billing-image {
    /* Планшетні розміри */
    height: 22.18vw;
    width: 24.58vw;
  }

  .billing-info {
    align-items: flex-start; /* Текст вирівнюється по лівому краю */
    gap: 0.96vw;
    width: 19.35vw; 
  }

  .billing-title-wrapper {
    height: 5.55vw; 
  }

  .billing-title {
    /* Планшетні розміри */
    font-size: 4.32vw; 
    line-height: 5.61vw; 
    letter-spacing: 0.13vw; 
  }

  .billing-date {
    /* Стиль шрифту залишається 25px */
    /* Планшетні стилі */
    line-height: 3.9vw; 
    letter-spacing: 0.09vw; 
  }
   .billing-date span:first-child {
    letter-spacing: 0.02vw; /* tablet */
  }
  .billing-date span:last-child {
     letter-spacing: 0.02vw; /* tablet */
  }

  /* --- Button (Tablet) --- */
  .details-button {
    /* Планшетні розміри */
    border-radius: 0.96vw;
    gap: 1.2vw;
    height: 7.19vw;
    padding: 1.2vw;
    width: 35.97vw;
  }

  .button-text {
     /* Розмір шрифту 16px залишається */
    line-height: 2.88vw;
    letter-spacing: 0.02vw;
  }
}

/* ======================================================== */
/* --- Desktop Styles --- (Застосовуються стилі з .frame-3) */
/* ======================================================== */
@media screen and (min-width: 1440px) {
   .support-banner {
    /* Десктопні відступи */
    padding: 8.12vw 10.14vw;
    gap: 0.69vw; /* Менший відступ між блоками */
     /* Змінюємо min-height для десктопу, якщо потрібно */
     min-height: 52.81vw; 
  }

  .banner-content {
    gap: 3.75vw; /* Проміжок між header, main, button */
  }

  /* --- Header Section (Desktop) --- */
  .banner-header {
    gap: 1.67vw; 
  }

  .banner-subtitle {
    /* Розмір шрифту 24px залишається */
    line-height: 2.5vw; 
  }

  .banner-title {
    /* Розмір шрифту 44px залишається */
    line-height: 3.97vw; /* desktop */
     /* letter-spacing вже встановлено в tablet @media */
  }

  /* --- Main Section (Desktop) --- */
  .banner-main {
     /* flex-direction: row; залишається */
     /* justify-content: center; залишається */
     gap: 1.39vw; /* Проміжок між картинкою і текстом */
  }

  .billing-image {
    /* Десктопні розміри */
    height: 16.76vw;
    width: 18.58vw;
  }

  .billing-info {
     /* align-items: flex-start; залишається */
     gap: 0.71vw;
     width: 14.42vw; 
  }
  
  .billing-title-wrapper {
    height: 4.14vw; 
  }

  .billing-title {
    /* Десктопні розміри */
    font-size: 3.22vw; 
    line-height: 4.18vw; 
    letter-spacing: 0.1vw; 
  }

  .billing-date {
    /* Використовуємо стиль .ruberoid-bold-wild-sand-32-2px */
    font-size: var(--font-size-xl); /* 32.2px */
    /* Десктопні стилі */
    line-height: 2.9vw; 
    letter-spacing: 0.07vw; 
  }
   .billing-date span:first-child {
    letter-spacing: 0.02vw; /* desktop */
  }
  .billing-date span:last-child {
     letter-spacing: 0.02vw; /* desktop */
  }

  /* --- Button (Desktop) --- */
  .details-button {
    /* Десктопні розміри */
    border-radius: 0.56vw;
    gap: 0.69vw;
    height: 4.17vw;
    padding: 0.69vw;
    width: 20.83vw;
  }

  .button-text {
     /* Розмір шрифту 16px залишається */
    line-height: 1.67vw;
    letter-spacing: 0.01vw;
  }
}

/* --- Видаляємо старі медіа-запити для приховування --- */
/* @media screen and (max-width: 833px) { ... } */
/* @media screen and (min-width: 834px) and (max-width: 1439px) { ... } */
/* @media screen and (min-width: 1440px) { ... } */.support-banner {
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  min-height: 100vh; 
  width: 100%;
  background-image: url(../img/tablet.png); 
  background-position: 50% 50%;
  background-size: cover;
  padding: 29.62vw 4.05vw; 
  gap: 13.67vw; 
}

.banner-content {
  display: flex;
  flex-direction: column;
  align-items: center; 
  gap: 13.67vw; 
  width: 100%; 
  max-width: 91.9vw; 
}

.banner-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6.08vw; 
  width: 100%;
}

.banner-subtitle {
  color: var(--flash-white);
  font-family: var(--font-family-ruberoid-regular);
  font-size: var(--font-size-xs); 
  font-weight: 400;
  line-height: 7.59vw; 
  letter-spacing: 0;
}

.banner-title {
  color: var(--flash-white);
  font-family: var(--font-family-ruberoid-bold);
  font-weight: 700;
  font-size: var(--font-size-l); 
  line-height: 10.25vw; 
  letter-spacing: 0.6px; 
}


.banner-main {
  display: flex;
  flex-direction: column; 
  align-items: center;
  gap: 5.06vw; 
  width: 100%;
}

.billing-image {
  height: 46.84vw;
  width: 51.9vw;
  object-fit: contain; 
}

.billing-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.03vw; 
  width: 40.87vw; 
}

.billing-title-wrapper {
 height: 11.72vw; 
 display: flex;
 align-items: center;
}

.billing-title {
  color: var(--spring-green);
  font-family: var(--font-family-ruberoid-bold);
  font-weight: 700;
  font-size: 9.11vw; 
  line-height: 11.85vw; 
  letter-spacing: 0.27vw; 
  white-space: nowrap;
}

.billing-date-wrapper {
  display: flex;
  align-items: center;
}

.billing-date {
  color: var(--flash-white);
  font-family: var(--font-family-ruberoid-bold);
  font-size: var(--font-size-m); 
  font-weight: 700;
  line-height: 8.23vw; 
  letter-spacing: 0.19vw; 
  white-space: nowrap;
}
.billing-date span:first-child {
  letter-spacing: 0.05vw; 
}
.billing-date span:last-child {
   letter-spacing: 0.05vw; 
}


.details-button {
  display: flex; 
  align-items: center;
  justify-content: center;
  background-color: var(--spring-green);
  text-decoration: none; 
  cursor: pointer;
  border-radius: 2.03vw;
  gap: 2.53vw;
  height: 15.19vw;
  padding: 2.53vw;
  width: 75.95vw;
}

.button-text {
  color: var(--jet);
  font-family: var(--font-family-ruberoid-bold);
  font-size: var(--font-size-xxs); 
  font-weight: 700;
  line-height: 6.08vw;
  letter-spacing: 0.04vw;
  white-space: nowrap;
  width: fit-content;
}

@media screen and (min-width: 834px) {
  .support-banner {
    padding: 14.03vw 9.59vw;
    gap: 6.47vw; 
  }

  .banner-content {
    gap: 6.47vw; 
    max-width: 100%; 
  }

  .banner-header {
    gap: 2.88vw; 
  }

  .banner-subtitle {
    font-size: var(--font-size-s); 
    line-height: 4.32vw; 
  }

  .banner-title {
    font-size: var(--font-size-xxl); 
    line-height: 6.86vw; 
    letter-spacing: 1.32px; 
  }

  .banner-main {
    flex-direction: row; 
    justify-content: center; 
    gap: 2.4vw; 
  }

  .billing-image {
    height: 22.18vw;
    width: 24.58vw;
  }

  .billing-info {
    align-items: flex-start; 
    gap: 0.96vw;
    width: 19.35vw; 
  }

  .billing-title-wrapper {
    height: 5.55vw; 
  }

  .billing-title {
    font-size: 4.32vw; 
    line-height: 5.61vw; 
    letter-spacing: 0.13vw; 
  }

  .billing-date {
    line-height: 3.9vw; 
    letter-spacing: 0.09vw; 
  }
   .billing-date span:first-child {
    letter-spacing: 0.02vw; 
  }
  .billing-date span:last-child {
     letter-spacing: 0.02vw; 
  }

  .details-button {
    border-radius: 0.96vw;
    gap: 1.2vw;
    height: 7.19vw;
    padding: 1.2vw;
    width: 35.97vw;
  }

  .button-text {
    line-height: 2.88vw;
    letter-spacing: 0.02vw;
  }
}

@media screen and (min-width: 1440px) {
   .support-banner {
    padding: 8.12vw 10.14vw;
    gap: 0.69vw; 
     min-height: 52.81vw; 
  }

  .banner-content {
    gap: 3.75vw; 
  }

  .banner-header {
    gap: 1.67vw; 
  }

  .banner-subtitle {
    line-height: 2.5vw; 
  }

  .banner-title {
    line-height: 3.97vw; 
  }

  .banner-main {
     gap: 1.39vw; 
  }

  .billing-image {
    height: 16.76vw;
    width: 18.58vw;
  }

  .billing-info {
     gap: 0.71vw;
     width: 14.42vw; 
  }
  
  .billing-title-wrapper {
    height: 4.14vw; 
  }

  .billing-title {
    font-size: 3.22vw; 
    line-height: 4.18vw; 
    letter-spacing: 0.1vw; 
  }

  .billing-date {
    font-size: var(--font-size-xl); 
    line-height: 2.9vw; 
    letter-spacing: 0.07vw; 
  }
   .billing-date span:first-child {
    letter-spacing: 0.02vw; 
  }
  .billing-date span:last-child {
     letter-spacing: 0.02vw; 
  }

  .details-button {
    border-radius: 0.56vw;
    gap: 0.69vw;
    height: 4.17vw;
    padding: 0.69vw;
    width: 20.83vw;
  }

  .button-text {
    line-height: 1.67vw;
    letter-spacing: 0.01vw;
  }
}