.qo{position:fixed;inset:0;z-index:9999}
.qo__overlay{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.qo__dialog{position:relative;max-width:760px;margin:8vh auto;background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden}
.qo__close{position:absolute;top:10px;right:12px;width:40px;height:40px;border:0;background:transparent;font-size:28px;line-height:40px;cursor:pointer;opacity:.6}
.qo__close:hover{opacity:1}
.qo__content{display:grid;grid-template-columns:280px 1fr}
.qo__media{background:#f7f7f7;display:flex;align-items:center;justify-content:center;padding:18px}
.qo__media img{width:100%;height:auto;border-radius:10px;object-fit:contain}
.qo__formwrap{padding:22px 22px 18px}
.qo__title{font-size:22px;font-weight:700;margin-bottom:10px}
.qo__product{padding:12px 0 14px;border-bottom:1px solid #eee;margin-bottom:14px}
.qo__name{font-size:16px;font-weight:600;margin-bottom:6px}
.qo__meta{display:flex;gap:12px;flex-wrap:wrap;font-size:14px;color:#555}
.qo__price{font-weight:700;color:#111}
.qo__label{display:block;font-size:13px;color:#444;margin-bottom:6px}
.qo__input{width:100%;height:44px;padding:0 12px;border:1px solid #ddd;border-radius:10px;outline:none}
.qo__btn{width:100%;height:46px;margin-top:12px;border:0;border-radius:10px;background:#ffb300;color:#111;font-weight:700;cursor:pointer}
.qo__btn:disabled{opacity:.6;cursor:not-allowed}
.qo__hint{text-align:center;margin-top:8px;font-size:13px;color:#666}
.qo__policy{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:12px;color:#666}
.qo__policy a{color:#2b6fff;text-decoration:underline}
.qo__msg{margin-top:10px;font-size:13px}
@media (max-width:820px){.qo__dialog{margin:6vh 14px}.qo__content{grid-template-columns:1fr}}


.order-button {
    margin-top: 20px;
  flex: 0 0 auto;
 
  padding: 12px 24px;
  background-color: var(--green-color);
  color: #fff;
  border: 1px solid var(--text-color);
  border-radius: 7px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  transition: transform 0.1s ease;
}
.order-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  box-shadow: 5px 5px 0.1px var(--text-color);
  border-radius: 7px;
  z-index: -1;
  transition: box-shadow 0.1s ease;
}
.order-button:hover {
    transform: translate( -2px, -2px);
}
/* Корневой слой модалки */
.qo{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;            /* показываем через JS */
}

/* Оверлей всегда под контентом */
.qo__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 0;               /* ВАЖНО: ниже диалога */
}

/* Диалог поверх оверлея */
.qo__dialog{
  position: relative;
  z-index: 1;               /* ВАЖНО: выше оверлея */
  pointer-events: auto;
  max-width: 920px;
  width: calc(100% - 24px);
  margin: 12px auto;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}

/* Внутренний скролл для мобилы/горизонтали */
.qo__body{
  max-height: calc(100vh - 24px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Чтобы центрировалось */
.qo{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Блокировка прокрутки страницы, когда модалка открыта */
body.qo-lock{
  position: fixed;
  width: 100%;
  overflow: hidden;
}
.qo__overlay{ z-index:0; }
.qo__dialog{ z-index:1; position:relative; }

/* Модалка должна быть выше всего и кликабельна */
.qo{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
}

/* Оверлей ниже, диалог выше */
.qo__overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 0;
}

.qo__dialog{
  position: relative;
  z-index: 2;
  pointer-events: auto;
  max-width: 760px;
  width: calc(100% - 24px);
  max-height: calc(100vh - 24px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: 14px;
}

/* Блокируем страницу, но модалка скроллится */
body.qo-lock{
  position: fixed;
  width: 100%;
  overflow: hidden;
}
/* Базово: модалка занимает экран и не дает фону скроллиться */
.qo{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none; /* показываем через JS */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.qo__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 0;
}

.qo__dialog{
  position: relative;
  z-index: 1;
  background:#fff;
  border-radius: 18px;
  overflow: hidden;
  max-width: 920px;
  width: calc(100% - 24px);
  margin: auto;
}

/* ВАЖНО: именно этот контейнер должен скроллиться, а не страница */
.qo__content{
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Фикс прокрутки страницы под модалкой */
body.qo-lock{
  position: fixed;
  width: 100%;
  overflow: hidden;
}

/* ===== Мобильная компоновка: модалка "в экран" ===== */
@media (max-width: 820px){
  .qo{
    align-items: stretch;
    justify-content: stretch;
    padding: 0; /* fullscreen */
  }

  .qo__dialog{
    width: 100%;
    height: 100dvh;          /* ключ */
    max-width: none;
    margin: 0;
    border-radius: 0;        /* как нативная модалка */
  }

  .qo__content{
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;        /* скролл дадим внутреннему блоку ниже */
  }

  /* Делаем верх (картинку) не слишком огромной */
  .qo__media{
    padding: 14px;
    background:#f7f7f7;
  }
  .qo__media img{
    width: 100%;
    height: auto;
    max-height: 34vh;        /* чтобы форма влезала */
    object-fit: contain;
    border-radius: 12px;
  }

  /* А вот эта часть будет скроллиться */
  .qo__formwrap{
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px;
  }

  /* Кнопку закрытия делаем "липкой", чтобы всегда была */
  .qo__close{
    position: sticky;
    top: 0;
    margin-left: auto;
    display: block;
    z-index: 2;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(6px);
  }
}
@media (max-width: 820px){

  /* Убираем левую колонку с изображением */
  .qo__media{
    display: none !important;
  }

  /* Убираем двухколоночную сетку */
  .qo__content{
    display: block !important;
  }

  /* Форма занимает весь экран */
  .qo__formwrap{
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 18px 30px;
  }

  /* Немного компактнее заголовок */
  .qo__title{
    font-size: 20px;
  }

  /* Кнопка закрытия фиксированная сверху */
  .qo__close{
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 5;
  }
}