/* /styles-mobile.css
   ------------------------------------------------------------
   MultiLaunches — Mobile/Tablet overrides (отдельный файл)

   ✅ Подключать ПОСЛЕ styles.css и styles-account.css:
   <link rel="stylesheet" href="./styles.css">
   <link rel="stylesheet" href="./styles-account.css">   (только на /account)
   <link rel="stylesheet" href="./styles-mobile.css">

   Файл содержит ТОЛЬКО media-правки. Без базовых (desktop) стилей.
   ⚠️ ВЕРХНЯЯ ПАНЕЛЬ (header + drawer) ВЫНЕСЕНА В ВИДЖЕТ:
      /Control-panel/control-panel-widget-mobil.css
   ------------------------------------------------------------ */


/* =========================================
   1) GLOBAL — планшет и ниже
   ========================================= */
@media (max-width: 1104px){
  :root{
    /* секции с padding-inline: var(--aligned-inline-gap) */
    --aligned-inline-gap: clamp(16px, 4.6vw, 44px);

    /* делаем чуть меньше «воздуха» */
    --content-top-gap: 14px;
    --after-hero-shot-gap: 24px;
  }

  /* контейнеры/секции: убираем лишний «прострел» по бокам */
  .section--interface,
  .section--features,
  .section--pricing,
  .section--reviews,
  .footer{
    padding-inline: var(--aligned-inline-gap);
  }
}


/* =========================================
   2) GLOBAL — мобилка
   ========================================= */
@media (max-width: 1104px){
  :root{
    --page-sb-w: 0px; /* на мобилках обычно нет gutter */
    --aligned-inline-gap: 16px;

    --hero-title-min: 18px;
    --hero-title-max: 28px;

    --home-hero-desc-min: 14px;
    --home-hero-desc-max: 16px;

    --auth-vertical-gap: 56px;
  }

  .section{ padding: 42px 0; }

  /* кнопки в секциях: безопасный перенос */
  .btn{ max-width: 100%; }

  /* --- HOME hero-shot: гарантируем нормальный stacking --- */
  body[data-page="home"] .hero-shot__stage{
    display:flex;
    flex-direction: column;
    gap: 18px;
  }

  body[data-page="home"] .hero-shot__text,
  body[data-page="home"] .hero-shot__media{
    width: 100% !important;
    min-width: 0;
  }

  body[data-page="home"] .hero-shot__media img{
    width: 100%;
    height: auto;
    border-radius: 12px;
  }

  /* hero actions: кнопки на всю ширину */
  body[data-page="home"] .hero-actions{
    display:flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  body[data-page="home"] .hero-actions .btn{
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
  }

  /* Features carousel content padding (чтобы текст не лип к краю) */
  .feature-slide__content{
    padding:
      clamp(34px, 6.8vw, 56px)
      16px
      calc(clamp(18px, 4.8vw, 34px) + 46px);
    max-width: 100%;
    width: 100%;
  }

  /* ===========================================================
     MOBILE: Слайды "Многофункциональный лаунчер" (section--testnets)
     + "О проекте" (section #features)
     - текст слева
     - шрифт меньше
     - текстовая зона 47%
     =========================================================== */

  /* TESTNETS */
  .section--testnets .feature-slide__content{
    position: absolute;
    inset: 0 auto 0 0;     /* прижать к левому краю */
    width: 47%;
    max-width: 47%;
    text-align: left;
    padding: 14px 10px 14px 12px;
  }

  .section--testnets .feature-slide__title{
    font-size: clamp(12px, 3.2vw, 14px);
    line-height: 1.12;
    margin-bottom: 8px;
  }

  .section--testnets .feature-slide__lead,
  .section--testnets .feature-slide__desc,
  .section--testnets .feature-slide__list li{
    font-size: clamp(9px, 2.4vw, 11px);
    line-height: 1.28;
  }

  .section--testnets .feature-slide__list{
    margin-top: 8px;
    padding-left: 14px;
  }

  .section--testnets .feature-slide__bg{
    background-position: right center;
  }

  /* ABOUT (О проекте) — ТОЛЬКО текст поверх слайдов */
  .section--features#features .feature-slide__content{
    position: absolute;
    inset: 0 auto 0 0;        /* слева */
    width: 47% !important;
    max-width: 47% !important;
    flex: 0 0 47%;
    min-width: 0;
    box-sizing: border-box;

    text-align: left;
    padding: 14px 10px 14px 12px;
    z-index: 5;

    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* чтобы длинные слова/строки не раздвигали блок */
  .section--features#features .feature-slide__content *{
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .section--features#features .feature-slide__title{
    font-size: clamp(11px, 3.0vw, 13px);
    line-height: 1.12;
    margin-bottom: 6px;
  }

  .section--features#features .feature-slide__lead,
  .section--features#features .feature-slide__desc,
  .section--features#features .feature-slide__list li{
    font-size: clamp(8.8px, 2.25vw, 10.5px);
    line-height: 1.26;
  }

  .section--features#features .feature-slide__list{
    margin-top: 6px;
    padding-left: 12px;
  }

  /* Pricing cards: чуть компактнее */
  .price{
    padding: 24px 16px 28px;
    min-height: 0;
    aspect-ratio: auto;
  }

  .hero-bridge--desktop{ display: none !important; }
  .hero-bridge--mobile{ display: block !important; }

  .hero-bridge--mobile{
    font-size: 30px !important;
  }

  /* Reviews section title offset */
  .section--reviews .features-title{ top: -64px; }
  .section--reviews .reviews-wrapper{ margin-top: -64px; }
}


/* footer — отдельно, как было, но без вложенных media */
@media (max-width: 1104px){

  /* ✅ футер в одну колонку и копирайт в самый низ */
  .footer-grid{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 18px;
    text-align: left;
  }

  .footer-contacts{
    order: 1;
    width: 100%;
  }

  .footer-brand{
    order: 99;
    width: 100%;
    margin-top: 10px;
    justify-self: start;
    text-align: left;
  }

  .footer-contacts__body{ justify-items: start; }

  .footer-col{
    align-items: flex-start;
    text-align: left;
  }

  .footer-resource-list,
  .footer-contact-list{
    align-items: flex-start;
  }

  .footer-contact-link{
    justify-content: start;
    width: max-content;
  }
}


@media (max-width: 520px){
  :root{
    --aligned-inline-gap: 14px;
    --header-h-desktop: 56px;
  }

  .container{ padding-inline: 14px; }

  .pricing-note,
  .reviews-note{
    padding: 18px 16px;
    min-height: 0;
    aspect-ratio: auto;
  }

  body[data-page="home"] .hero-shot__desc{
    line-height: 1.55;
  }

  /* auth modal: чуть больше места контенту */
  .auth-modal{
    --auth-pad-x: 16px;
  }

  [data-review-modal] .reviews-modal__dialog{
    width: min(92vw, 560px);
    max-height: min(84dvh, 720px);
    padding: 18px 16px 16px;
  }
}


/* =========================================
   3) ACCOUNT (/account)
   ========================================= */

/* Tablet and below */
@media (max-width: 1104px){
  body.account .account-main{
    padding: calc(var(--header-h-desktop) + 16px) 0 56px;
  }

  body.account .account-shell{
    padding-inline: 16px;
    gap: 18px;
  }

  body.account .account-sidebar{
    position: relative;
    top: auto;
    min-height: auto;
  }

  body.account .account-kpi{
    grid-template-columns: 1fr;
  }

  body.account .billing-grid{
    grid-template-columns: 1fr;
  }
}

/* Mobile */
@media (max-width: 1104px){
  body.account .account-card{
    padding: 18px;
  }

  body.account .account-sidebar{
    padding: 18px;
  }

  body.account .account-h1{ font-size: 20px; }
  body.account .account-h2{ font-size: 16px; }

  body.account .account-nav{
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 10px;
    padding-bottom: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body.account .account-nav::-webkit-scrollbar{ width: 0; height: 0; }

  body.account .account-nav__item{
    flex: 0 0 auto;
    padding: 10px 12px;
    border-radius: 10px;
    white-space: nowrap;
  }

  body.account .table-wrap,
  body.account [data-authlog-scroll],
  body.account [data-billing-scroll]{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.account .account-table{
    min-width: 680px;
  }

  body.account .account-actions-row{
    flex-direction: column;
    align-items: stretch;
  }
  body.account .account-actions-row .btn,
  body.account .account-actions-row button{
    width: 100%;
  }
}

@media (max-width: 520px){
  body.account .account-shell{ padding-inline: 12px; }

  body.account .account-card{
    padding: 16px;
    gap: 14px;
  }

  body.account .account-card__head{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  body.account .account-card__head-actions{
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* header email/button: чтоб не вылезало */
  body.account .header-actions .header-user__email{
    max-width: 180px;
  }

  body.account .acc-2fa-modal{ padding: 16px; }
  body.account .acc-2fa-modal__window{ width: min(94vw, 610px); }
}


/* ===========================
   COOKIE BANNER — MOBILE FIX
   =========================== */
@media (max-width: 1104px){
  .cookie-banner{
    left: 50%;
    right: auto;
    bottom: 12px;

    width: calc(100% - 24px);
    transform: translateX(-50%);

    flex-direction: column;
    align-items: stretch;
    gap: 12px;

    padding: 16px 14px;
    border-radius: 14px;

    z-index: 2600;
  }

  .cookie-banner__text{
    font-size: 12.5px;
    line-height: 1.5;
  }

  .cookie-banner__actions{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  .cookie-banner__accept,
  .cookie-banner__close{
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 16px;
    border-radius: 12px;
    justify-content: center;
  }

  .support-chat-button{
    bottom: 28px;
    right: 16px;
  }
}

@media (max-width: 360px){
  .cookie-banner{
    width: calc(100% - 16px);
    padding: 14px 12px;
  }
  .support-chat-button{
    bottom: 104px;
  }
}


/* =========================================================
   MOBILE CENTER GRID (как у Dolphin Anty)
   ========================================================= */
@media (max-width: 1104px){
  :root{
    --grid: 560px;
    --aligned-inline-gap: clamp(16px, 5vw, 44px);
  }

  .section--interface,
  .section--features,
  .section--pricing,
  .section--reviews,
  .section--faq,
  .footer{
    padding-inline: 0 !important;
  }

  .container{
    width: min(100%, var(--grid)) !important;
    margin-inline: auto !important;
    padding-inline: var(--aligned-inline-gap) !important;
  }

  .section--features .container,
  .section--interface .container,
  .policy-main .container,
  .policy-viewer .container{
    width: min(100%, var(--grid)) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  .features-bullet,
  .pricing-note,
  .reviews-note,
  body[data-page="home"] .hero-shot{
    max-width: var(--grid) !important;
    margin-inline: auto !important;
  }
}


/* ===========================
   PRICING: fix tariffs grid on <=1104
   =========================== */
@media (max-width: 1104px){
  .pricing{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100%;
  }

  .price{
    min-width: 0;
    aspect-ratio: auto !important;
  }

  .price .cta{
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 560px){
  .pricing{
    grid-template-columns: 1fr !important;
  }
}


/* ===========================
   FOOTER: Resources/Documents/Contacts -> 1 column on mobile
   =========================== */
@media (max-width: 1104px){
  .footer-contacts__body.footer-cols{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 18px !important;

    width: 100% !important;
    margin: 0 !important;
  }

  .footer-col{
    width: 100% !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .footer-resource-list,
  .footer-contact-list{
    align-items: flex-start !important;
  }
}


/* ===========================
   HERO TEXT: stop hyphenation / breaking (mobile)
   =========================== */
@media (max-width: 1104px){
  .hero-shot,
  .hero-shot *{
    -webkit-hyphens: none !important;
    hyphens: none !important;

    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: normal !important;
  }
}


/* ✅ MOBILE ONLY: заменить слайды на моб. картинки */
@media (max-width: 1104px){
  .section--testnets .features-carousel__track[data-interface-track]
  > article.feature-slide.feature-slide--interface:first-child{
    --feature-image: url("./assets/mobil_slide_F/slide_one1.svg") !important;
  }
}
@media (max-width: 1104px){
  .section--testnets .features-carousel__track[data-interface-track]
  > article.feature-slide.feature-slide--interface:nth-child(2){
    --feature-image: url("./assets/mobil_slide_F/slide_one2.svg") !important;
  }
}
@media (max-width: 1104px){
  .section--testnets .features-carousel__track[data-interface-track]
  > article.feature-slide.feature-slide--interface:nth-child(3){
    --feature-image: url("./assets/mobil_slide_F/slide_one3.svg") !important;
  }
}
@media (max-width: 1104px){
  .section--testnets .features-carousel__track[data-interface-track]
  > article.feature-slide.feature-slide--interface:nth-child(4){
    --feature-image: url("./assets/mobil_slide_F/slide_one4.svg") !important;
  }
}

/* ✅ MOBILE: тёмная зона ~60% + очень плавный fade */
@media (max-width: 1104px){
  .section--testnets .feature-slide__content{
    background: linear-gradient(
      90deg,
      rgba(0,0,0,.76) 0%,
      rgba(0,0,0,.74) 20%,
      rgba(0,0,0,.72) 40%,
      rgba(0,0,0,.68) 55%,
      rgba(0,0,0,.62) 60%,
      rgba(0,0,0,.46) 72%,
      rgba(0,0,0,.30) 82%,
      rgba(0,0,0,.18) 90%,
      rgba(0,0,0,.08) 96%,
      rgba(0,0,0,0) 100%
    );
    border-radius: 14px;
  }
}


/* Иконка назад с градиентом */
.nav-back-icon {
  width: 16px;
  height: 16px;
  background-color: var(--text);
  mask: url("/assets/Back.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/Back.svg") center / contain no-repeat;
  background: linear-gradient(to right, #E7E3EA, #939195, #39333D);
  transition: background-color 0.3s ease;
}

/* Для текста "Главная" */
.nav-link--home {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
}

/* При наведении меняем градиент на синий */
.nav-link--home:hover .nav-back-icon {
  background: linear-gradient(to right, #0ea5e9, #22d3ee);
}

/* Эффект для текста при наведении */
.nav-link--home:hover {
  color: #0ea5e9;
}

/* Убираем лишний отступ между шапкой и контентом */
.page-root.page-content {
  padding-top: 0 !important;
}

/* Уменьшаем отступы в секциях */
.section {
  padding: 32px 0 !important;
}


/* Уменьшение заголовков для мобильных устройств (policy) */
@media (max-width: 1104px) {
  .policy-doc__title {
    font-size: clamp(18px, 5vw, 28px) !important;
  }

  .policy-lead {
    font-size: clamp(12px, 4vw, 16px) !important;
  }

  .policy-doc__section h3 {
    font-size: clamp(16px, 4vw, 22px) !important;
  }

  .policy-doc__section p {
    font-size: clamp(12px, 4vw, 14px) !important;
  }

  .policy-doc__section ul,
  .policy-doc__section ol {
    font-size: clamp(12px, 3vw, 14px) !important;
    padding-left: 20px;
  }
}