/* ОБЩИЕ СТИЛИ - ДЕЛОВОЙ ЕДИНЫЙ ИНТЕРФЕЙС */
@font-face {
  font-family: 'Arial';
  src: local('Arial'), local('ArialMT'), url('/fonts/arial.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Arial';
  src: local('Arial Bold'), local('Arial-BoldMT'), url('/fonts/arialbd.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Impact';
  src: url('/fonts/impact.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light !important;
  --primary-accent: #0f172a;
  /* Цвет кнопок «Далее»/«Оформить», переключателей и цены (был удалён, из-за чего кнопка на телефоне становилась невидимой) */
  --primary-red: #be3726;
  --primary-red-hover: #a32e1f;
  --primary-hover: #a32e1f;
  --primary-accent-hover: #1e293b;
  --primary-blue: #2563eb;
  --primary-blue-hover: #1d4ed8;
  --bg-color: #f8fafc;
  --surface-color: #ffffff;
  --border-color: #e2e8f0;
  --border-focus: #2563eb;
  --text-main: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
  --radius: 8px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  background: #f8fafc;
  color: var(--text-main);
  line-height: 1.5;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

.container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ============================================================
   ФИРМЕННЫЙ СТИЛЬ РПК «А-ПРИНТ» (A-PRINT22.RU)
   ============================================================ */

/* Верхняя служебная полоса */
.aprint-top-bar {
  background: #1e1e1e;
  color: #9ca3af;
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid #333333;
}

.top-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.top-link-back {
  color: #e5e7eb;
  text-decoration: none;
  font-weight: 700;
  transition: color 0.15s;
}

.top-link-back:hover {
  color: #ffffff;
  text-decoration: underline;
}

.top-divider {
  color: #4b5563;
}

.top-info-tag {
  color: #9ca3af;
}

.top-admin-badge {
  color: #e5e7eb;
  text-decoration: none;
  background: #2d3748;
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 11px;
  transition: all 0.15s;
}

.top-admin-badge:hover {
  background: var(--primary-red);
  color: #ffffff;
}

/* Фирменная полоса-градиент А-Принт */
.aprint-brand-stripe, .hr {
  clear: both;
  display: block;
  width: 100%;
  margin: 0 auto;
  height: 4px;
  background-position: center;
  background-repeat: repeat-x;
  background-color: #fff;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABHkAAAABAgMAAAA3PJr0AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACVBMVEUAAAC+scMAAADq/PuJAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAAHCAAABwgAc0Pm54AAAARSURBVBjTYwh1YA1hGCVwEQApEDWUMZhySQAAAABJRU5ErkJggg==');
}

/* Основная шапка */
.aprint-header {
  background: #ffffff;
  padding: 24px 0 20px;
  border-bottom: 1px solid #e5e7eb;
}

.header-container {
  max-width: 1240px;
}

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.header-col-logo {
  flex: 0 0 auto;
}

.aprint-logo-img {
  max-height: 54px;
  display: block;
  transition: opacity 0.2s;
}

.aprint-logo-img:hover {
  opacity: 0.9;
}

.logo-subtext {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
  font-weight: 400;
}

.header-col-contacts {
  text-align: center;
  flex: 1 1 auto;
}

.aprint-phone {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  text-decoration: none;
  letter-spacing: 0.2px;
  transition: color 0.15s;
  display: inline-block;
}

.aprint-phone:hover {
  color: var(--primary-red);
}

.contact-email-wrap {
  margin-top: 4px;
}

.aprint-email {
  font-size: 14px;
  color: #4b5563;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s;
}

.aprint-email:hover {
  color: var(--primary-red);
  text-decoration: underline;
}

.header-col-address {
  flex: 0 0 auto;
  text-align: left;
}

.aprint-address-box {
  background: url('img/address.png') no-repeat 0 4px;
  padding-left: 42px;
}

.address-title {
  font-size: 11px;
  color: #9ca3af;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.address-val {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.address-hours {
  font-size: 12px;
  color: #6b7280;
  margin-top: 1px;
}

.aprint-gis-link {
  font-size: 12px;
  color: var(--primary-red);
  text-decoration: underline;
  font-weight: 700;
  display: inline-block;
  margin-top: 2px;
  transition: color 0.15s;
}

.aprint-gis-link:hover {
  color: var(--primary-red-hover);
}

/* Баннер сервиса (Hero) */
.service-hero-section {
  background: #ffffff;
  padding: 24px 0 18px;
  border-bottom: 1px solid #e5e7eb;
}

.hero-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.hero-main-title {
  font-size: 26px;
  font-weight: 700;
  color: #111827;
  text-transform: uppercase;
  letter-spacing: -0.2px;
  margin: 0;
  line-height: 1.2;
}

.hero-sub-title {
  font-size: 14px;
  color: #6b7280;
  margin-top: 6px;
  margin-bottom: 0;
}

.hero-features-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-feat-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}

.hero-feat-item .feat-icon {
  font-weight: 900;
}

.hero-feat-item.green-accent {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

.hero-feat-item.red-accent {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

/* СЕТКА СТРАНИЦЫ */
.main-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: 20px;
  margin-top: 18px;
  margin-bottom: 36px;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

/* КАРТОЧКИ */
.card {
  background: var(--surface-color);
  border-radius: var(--radius);
  padding: 20px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
}

.step-num {
  width: 26px;
  height: 26px;
  background: #0f172a;
  color: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.card-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.2px;
}

.field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.form-group {
  margin-bottom: 14px;
}
.form-group:last-child {
  margin-bottom: 0;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}

input[type="text"],
input[type="tel"],
input[type="number"],
input[type="email"],
input[type="search"],
select {
  color-scheme: light !important;
  width: 100%;
  padding: 11px 14px;
  font-size: 14.5px;
  border: 1.5px solid #3b82f6 !important;
  border-radius: 8px;
  outline: none;
  background-color: #f0f7ff !important;
  background: #f0f7ff !important;
  color: #1e3a8a !important;
  -webkit-text-fill-color: #1e3a8a !important;
  font-weight: 600 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18), 0 1px 3px rgba(37, 99, 235, 0.08) !important;
  transition: all 0.18s ease-in-out;
  font-family: inherit;
  opacity: 1 !important;
  visibility: visible !important;
}

select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #f0f7ff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232563eb'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px 16px !important;
  padding-right: 38px !important;
  border: 1.5px solid #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18) !important;
}

select option {
  color-scheme: light !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-weight: 500 !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
}

input[type="text"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
select:hover {
  border-color: #2563eb !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25), 0 2px 6px rgba(37, 99, 235, 0.12) !important;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus {
  border-color: #1d4ed8 !important;
  color: #1e3a8a !important;
  -webkit-text-fill-color: #1e3a8a !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.3) !important;
}

/* БЫСТРЫЕ ШАБЛОНЫ (CHIPS) */
.chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.chip {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s;
}

.chip:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
}

.chip.active {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #ffffff !important;
}

/* ПРЕСЕТЫ ЦВЕТОВ - ТОЧНО КАК НА СКРИНШОТЕ ПОЛЬЗОВАТЕЛЯ */
.color-presets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.color-preset-card {
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 12px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.color-preset-card:hover {
  background: #ffffff;
  border-color: #94a3b8;
  transform: translateY(-1px);
}

.color-preset-card.active {
  background: #ffffff !important;
  border-color: #0f172a !important;
  box-shadow: 0 0 0 1.5px #0f172a, 0 2px 6px rgba(15, 23, 42, 0.08) !important;
}

.color-circle-split {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.split-red-white {
  background: linear-gradient(90deg, #ed1c24 50%, #ffffff 50%);
}

.split-white-red {
  background: linear-gradient(90deg, #ffffff 50%, #ed1c24 50%);
}

.split-white-black {
  background: linear-gradient(90deg, #ffffff 50%, #000000 50%);
}

.preset-name {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.2px;
}

/* РУЧНОЙ ВЫБОР ЦВЕТОВ */
.custom-colors-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.color-picker-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1.5px solid var(--border-color);
  padding: 8px 10px;
  border-radius: 8px;
}

.color-picker-box input[type="color"] {
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  padding: 0;
}

.picker-info {
  display: flex;
  flex-direction: column;
}

.picker-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.picker-hex {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  font-family: monospace;
}

/* РАЗМЕРЫ */
.sizes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.size-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  padding: 10px 4px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s;
}

.size-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

.size-btn.active {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.12);
}

.custom-size-wrapper {
  background: #f8fafc;
  border: 1.5px solid var(--border-color);
  padding: 12px;
  border-radius: 8px;
}

.custom-size-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
}

.input-with-unit {
  position: relative;
  flex: 1;
}

.input-with-unit input {
  padding-right: 70px;
  font-weight: 700;
}

.input-with-unit .unit {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--text-muted);
  pointer-events: none;
}

.multiply-sign {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-muted);
}

/* КОНТРОЛ ТИРАЖА */
.qty-control {
  display: flex;
  align-items: center;
  width: 140px;
}

.qty-btn {
  width: 38px;
  height: 38px;
  background: #f1f5f9;
  border: 1.5px solid var(--border-color);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.1s;
}

.qty-btn:first-child {
  border-radius: 8px 0 0 8px;
}

.qty-btn:last-child {
  border-radius: 0 8px 8px 0;
}

.qty-control input {
  width: 60px;
  text-align: center;
  border-radius: 0;
  border-left: none;
  border-right: none;
  height: 38px;
  font-weight: 700;
}

/* ПРАВАЯ КОЛОНКА ПРЕВЬЮ (STICKY) */
.sticky-preview-column {
  position: sticky;
  top: 80px;
}

.preview-card {
  background: #1e293b;
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-lg);
  margin-bottom: 20px;
  color: #fff;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.preview-badge {
  background: rgba(255, 255, 255, 0.15);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.preview-scale-text {
  font-size: 12px;
  color: #94a3b8;
}

.banner-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  background: #0f172a;
  border-radius: 8px;
  padding: 16px;
  overflow: hidden;
}

.banner-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  border-radius: 3px;
  transition: all 0.2s ease-out;
}

.banner-canvas {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 4px 6px;
  box-sizing: border-box;
  word-break: break-word;
  line-height: 1.0;
  overflow: hidden;
}

.banner-top-logo-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2px;
}

.banner-corner-logo-wrap {
  position: absolute;
  pointer-events: none;
  z-index: 6;
  display: flex;
  align-items: center;
}

.banner-content-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  z-index: 2;
  box-sizing: border-box;
  transition: padding 0.15s ease-out;
}

/* ИНДИВИДУАЛЬНЫЕ КОНТРОЛЛЕРЫ РАЗМЕРА ПОД ПОЛЯМИ */
.field-size-control {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 5px 10px;
}

.field-size-title {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  min-width: 112px; /* «Размер …» и «Ширина …» — ползунки на одной линии */
}

.btn-field-size-step {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.1s;
}

.btn-field-size-step:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.field-size-badge {
  font-size: 11.5px;
  font-weight: 700;
  color: #0f172a;
  background: #ffffff;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  min-width: 38px;
  text-align: center;
}

.field-size-range {
  flex: 1;
  height: 5px;
  cursor: pointer;
  accent-color: #0f172a;
}

/* ИНТЕРАКТИВНЫЙ ПЕРЕМЕЩАЕМЫЙ ЛОГОТИП (DRAG & DROP) */
.banner-movable-logo {
  position: absolute;
  z-index: 8;
  cursor: grab;
  user-select: none;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed transparent;
  border-radius: 4px;
  transform: translate(-50%, -50%);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.banner-movable-logo:hover {
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.6);
}

.banner-movable-logo.dragging {
  cursor: grabbing !important;
  border-color: #2563eb !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
  transform: translate(-50%, -50%) scale(1.04);
}

.logo-drag-handle-hint {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #2563eb;
  color: #fff;
  font-size: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: opacity 0.15s;
}

.banner-movable-logo:hover .logo-drag-handle-hint,
.banner-movable-logo.dragging .logo-drag-handle-hint {
  opacity: 1;
}

.b-title {
  font-size: 32px;
  /* Жирность берётся из макета (bold; Impact — normal), как в печатном файле.
     800/900 в Windows подменяют Arial на Arial Black — шире и толще, чем при печати */
  font-weight: inherit;
  line-height: 1.0;
  margin: 0;
  white-space: nowrap;
}

.b-phone {
  font-size: 26px;
  font-weight: inherit;
  line-height: 1.0;
  margin: 0;
  white-space: nowrap;
}

.b-extra {
  font-size: 15px;
  font-weight: inherit;
  line-height: 1.0;
  margin: 0;
  white-space: nowrap;
}

/* РЕЖИМ СВОБОДНОЙ РАССТАНОВКИ ЗОН ПРИ ЗАГРУЖЕННОМ ЛОГОТИПЕ */
.banner-content-box.free-layout {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  padding: 0 !important;
  pointer-events: none;
}

.banner-content-box.free-layout .b-title,
.banner-content-box.free-layout .b-phone,
.banner-content-box.free-layout .b-extra {
  position: absolute;
  pointer-events: auto;
  cursor: grab;
  user-select: none;
  touch-action: none;
  border: 1.5px dashed transparent;
  border-radius: 4px;
  padding: 2px 4px;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
  z-index: 7;
}

.banner-content-box.free-layout .b-title:hover,
.banner-content-box.free-layout .b-phone:hover,
.banner-content-box.free-layout .b-extra:hover {
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.6);
  background-color: rgba(37, 99, 235, 0.2);
}

.banner-content-box.free-layout .b-title.dragging,
.banner-content-box.free-layout .b-phone.dragging,
.banner-content-box.free-layout .b-extra.dragging {
  cursor: grabbing !important;
  border-color: #2563eb !important;
  background-color: rgba(37, 99, 235, 0.35) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
  z-index: 12 !important;
}

/* ЛЮВЕРСЫ */
.eyelet {
  position: absolute;
  width: 7px;
  height: 7px;
  background: radial-gradient(circle, #1e293b 35%, #e2e8f0 45%, #94a3b8 85%);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 2px rgba(0,0,0,0.45);
  z-index: 10;
  pointer-events: none;
}

.banner-info-bar {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 14px;
  padding-top: 12px;
}

.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.info-label {
  font-size: 11px;
  color: #94a3b8;
}

.info-value {
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
}

/* КАРТОЧКА ОФОРМЛЕНИЯ */
.checkout-card {
  border-top: 4px solid var(--primary-red);
}

.price-summary {
  background: #f8fafc;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 16px;
}

.summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-color);
  padding-top: 8px;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
}

.total-price {
  font-size: 24px;
  font-weight: 900;
  color: var(--primary-red);
}

.lead-time {
  font-size: 12px;
  color: #166534;
  background: #dcfce7;
  padding: 4px 8px;
  border-radius: 4px;
  margin-top: 8px;
  text-align: center;
}

.submit-order-btn {
  width: 100%;
  background: var(--primary-red);
  color: #fff;
  border: none;
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(190, 55, 38, 0.35);
  transition: all 0.2s;
  margin-top: 14px;
}

.submit-order-btn:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

.submit-order-btn:active {
  transform: translateY(1px);
}

.success-message {
  text-align: center;
  padding: 20px 10px;
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: 8px;
  margin-top: 14px;
}

.success-icon {
  font-size: 40px;
  margin-bottom: 8px;
}

.success-message h3 {
  font-size: 18px;
  color: #166534;
  margin-bottom: 4px;
}

.success-message p {
  font-size: 13px;
  color: #14532d;
  margin-bottom: 4px;
}

/* ПОДВАЛ */
.footer {
  background: #fff;
  border-top: 1px solid var(--border-color);
  padding: 24px 0;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

.footer p {
  margin-bottom: 4px;
}

/* АДАПТИВНОСТЬ ДЛЯ СМАРТФОНОВ */
@media (max-width: 900px) {
  .main-layout {
    grid-template-columns: 1fr;
  }
  .sticky-preview-column {
    position: static;
    order: -1; /* Превью наверху на мобилках */
  }
  .color-presets-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* СПОСОБЫ ОПЛАТЫ */
.payment-methods-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.pay-method-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.pay-method-card:hover {
  background: #f1f5f9;
}

.pay-method-card.active {
  background: #f8fafc;
  border-color: #0f172a;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.pay-method-card input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #0f172a;
}

.pay-method-icon {
  font-size: 20px;
}

.pay-method-text {
  display: flex;
  flex-direction: column;
}

.pay-method-text b {
  font-size: 13px;
  color: var(--text-main);
}

.pay-method-text span {
  font-size: 11px;
  color: var(--text-muted);
}


/* ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ДЛЯ QR, ПРОКЛЕЙКИ И МОДАЛЬНОГО ОКНА */
.checkbox-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8fafc;
  border: 1.5px solid var(--border-color);
  padding: 12px;
  border-radius: 8px;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #cbd5e1;
  transition: .3s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--primary-red);
}

input:checked + .slider:before {
  transform: translateX(20px);
}



/* ОТОБРАЖЕНИЕ QR НА МАКЕТЕ БАННЕРА */
.banner-canvas {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px !important;
  position: relative;
}

.banner-content-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
}

.prev-qr-box {
  background: #ffffff;
  padding: 8px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  margin-left: 12px;
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.prev-qr-box img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.qr-badge-film {
  background: #2563eb;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  padding: 2px 4px;
  border-radius: 3px;
  margin-top: 4px;
  text-align: center;
  letter-spacing: 0.3px;
}

/* ПРОКЛЕЙКА КРАЯ */
.gluing-border {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border: 4px dashed rgba(255, 255, 255, 0.45);
  pointer-events: none;
  z-index: 5;
}

/* МОДАЛЬНОЕ ОКНО */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-window {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  font-size: 17px;
  font-weight: 800;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-muted);
}

.modal-body {
  padding: 20px;
}

.modal-banner-preview {
  display: flex;
  justify-content: center;
  background: #0f172a;
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
}

.modal-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  font-size: 13px;
  color: #334155;
}

.modal-footer-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  border-top: 1px solid var(--border-color);
  padding-top: 14px;
}



/* СТИЛИ ДЛЯ ВЫБОРА DPI */
.dpi-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.dpi-btn {
  background: #f8fafc;
  border: 2px solid #cbd5e1;
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  position: relative;
}
.dpi-btn:hover {
  border-color: #be3726;
  background: #ffffff;
  transform: translateY(-1px);
}
.dpi-btn.active {
  border-color: #991b1b !important;
  background: #be3726 !important;
  box-shadow: 0 4px 14px rgba(190, 55, 38, 0.35) !important;
  transform: translateY(-1px);
}
.dpi-btn .dpi-title {
  font-weight: 800;
  font-size: 15px;
  color: #0f172a;
}
.dpi-btn.active .dpi-title {
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 15px !important;
}
.dpi-btn .dpi-desc {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}
.dpi-btn.active .dpi-desc {
  color: #fee2e2 !important;
  font-weight: 700 !important;
}

/* СЕТКА НА ПРЕВЬЮ БАННЕРА */
.mesh-pattern-overlay {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0,0,0,0.22) 1.2px, transparent 1.2px);
  background-size: 5px 5px;
  pointer-events: none;
  border-radius: 4px;
  z-index: 1;
}

/* ТАБЫ ВЫБОРА ОПЛАТЫ ПОСЛЕ СОЗДАНИЯ ЗАКАЗА */
.success-pay-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.pay-tab-btn {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #334155;
  transition: all 0.2s;
}
.pay-tab-btn:hover {
  border-color: #0f172a;
}
.pay-tab-btn.active {
  border-color: #0f172a;
  background: #0f172a;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
}
.pay-tab-btn.active span:first-child {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}



/* ============================================================
   ПОШАГОВЫЙ МАСТЕР (WIZARD) И МОБИЛЬНАЯ АДАПТАЦИЯ
   ============================================================ */

/* 1. СТЕППЕР (ШАПКА ШАГОВ) */
.wizard-header {
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 16px;
  overflow: visible;
}

.wizard-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  width: 100%;
  min-width: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 4px 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  box-sizing: border-box;
}

.wizard-step-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px 6px;
  border-radius: 6px;
  transition: all 0.15s;
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  flex: 0 0 auto;
}

.wizard-step-btn:hover {
  color: #0f172a;
  background: #f8fafc;
}

.wizard-step-btn.active {
  color: #0f172a;
  font-weight: 700;
  background: #f1f5f9;
}

.wizard-step-btn.completed {
  color: #334155;
  font-weight: 600;
}

.step-num-badge {
  width: 19px;
  height: 19px;
  border-radius: 5px;
  background: #f1f5f9;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 800;
  transition: all 0.15s;
  flex-shrink: 0;
}

.wizard-step-btn.active .step-num-badge {
  background: #0f172a;
  color: #ffffff;
}

.wizard-step-btn.completed .step-num-badge {
  background: #0f172a;
  color: #ffffff;
}

.step-arrow-divider {
  color: #cbd5e1;
  font-size: 9px;
  user-select: none;
  flex-shrink: 0;
  margin: 0;
}

/* 2. ШАГИ МАСТЕРА (PANES) */
.wizard-step-pane {
  display: none;
  opacity: 1 !important;
  visibility: visible !important;
}

.wizard-step-pane.active {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 3. КНОПКИ ПЕРЕХОДА МЕЖДУ ШАГАМИ */
.step-nav-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #f1f5f9;
  gap: 12px;
}

.btn-step-prev {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #475569;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-step-prev:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #94a3b8;
}

.btn-step-prev:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.btn-step-next {
  background: #0f172a;
  border: 1px solid #0f172a;
  color: #ffffff;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.btn-step-next:hover {
  background: #1e293b;
  border-color: #1e293b;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
}

.step-indicator-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}

/* 4. МОБИЛЬНАЯ ПАНЕЛЬ ВНИЗУ ЭКРАНА */
.mobile-bottom-bar {
  display: none;
}

/* ============================================================
   АДАПТИВНОСТЬ ДЛЯ СМАРТФОНОВ И ПЛАНШЕТОВ (ДО 900px)
   ============================================================ */
@media (max-width: 900px) {
  body {
    padding-bottom: 74px; /* Место под фиксированную нижнюю панель */
  }

  .container {
    padding: 0 12px;
  }

  .navbar {
    padding: 8px 0;
  }
  .navbar-inner {
    flex-direction: row;
    gap: 8px;
  }
  .brand-title {
    font-size: 14px;
  }
  .brand-subtitle {
    display: none; /* Экономия места на телефонах */
  }
  .contact-city {
    display: none;
  }
  .contact-phone {
    font-size: 14px;
  }

  /* Сетка: превью сверху, затем шаги мастера */
  .main-layout {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
    gap: 14px;
  }

  .sticky-preview-column {
    position: static;
    order: 1;
    width: 100%;
    margin-bottom: 0;
  }

  .controls-column {
    order: 2;
    width: 100%;
  }

  /* Превью баннера на мобильных */
  .preview-card {
    padding: 12px;
    margin-bottom: 0;
  }

  .banner-stage {
    min-height: 140px;
    padding: 10px 4px;
  }

  .banner-info-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding-top: 10px;
    margin-top: 10px;
  }

  /* Скрываем дублирующую десктопную карточку расчета на мобиле */
  .calc-card {
    display: none;
  }

  /* Степпер на мобильных */
  .wizard-header {
    padding: 10px 8px;
    margin-bottom: 12px;
  }

  .wizard-stepper {
    min-width: 520px;
  }

  .wizard-step-btn {
    padding: 6px 8px;
    font-size: 12px;
    gap: 6px;
  }

  .step-num-badge {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  .card {
    padding: 16px;
    border-radius: 10px;
  }

  .card-header h2 {
    font-size: 17px;
  }

  /* Мобильные тач-инпуты (не зумятся в Safari) */
  input[type="text"],
  input[type="tel"],
  input[type="number"],
  select {
    font-size: 16px !important;
    padding: 12px !important;
  }

  .sizes-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .color-presets-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .custom-colors-wrapper {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .dpi-selector-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .dpi-btn {
    flex-direction: row;
    justify-content: space-between;
    padding: 12px 14px;
  }

  /* Фиксированная панель на мобильных */
  .mobile-bottom-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    border-top: 1.5px solid var(--border-color);
    padding: 10px 14px;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
    z-index: 9999;
    justify-content: space-between;
    align-items: center;
  }

  .mobile-price-badge {
    display: flex;
    flex-direction: column;
  }

  .mobile-price-badge .label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .mobile-price-badge .price {
    font-size: 19px;
    font-weight: 900;
    color: var(--primary-red);
    line-height: 1.1;
  }

  .mobile-nav-buttons {
    display: flex;
    gap: 8px;
  }

  .mobile-btn-prev {
    background: #f1f5f9;
    border: 1.5px solid var(--border-color);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
  }

  .mobile-btn-next {
    background: var(--primary-red);
    color: #ffffff;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 3px 8px rgba(190, 55, 38, 0.3);
  }

  /* Детали заказа на шаге 6 */
  .modal-details-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}


/* ============================================================
   ФИРМЕННЫЙ ПОДВАЛ (FOOTER) В СТИЛЕ A-PRINT22.RU
   ============================================================ */
.aprint-footer {
  background: #000000;
  color: #d1d5db;
  margin-top: 50px;
  padding-top: 40px;
  border-top: 4px solid var(--primary-red);
}

.footer-container {
  max-width: 1240px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr;
  gap: 36px;
  padding-bottom: 36px;
}

.footer-logo {
  max-height: 48px;
  width: auto;
  height: auto;
  display: block;
  margin-bottom: 16px;
}

.footer-about {
  font-size: 13px;
  line-height: 1.6;
  color: #9ca3af;
  margin: 0;
}

.footer-heading {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  position: relative;
  padding-bottom: 8px;
}

.footer-heading:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--primary-red);
}

.footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav-list li {
  margin-bottom: 8px;
}

.footer-nav-list a {
  color: #9ca3af;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.15s;
}

.footer-nav-list a:hover {
  color: #ffffff;
  padding-left: 4px;
}

.footer-contact-row {
  font-size: 13px;
  color: #9ca3af;
  margin-bottom: 10px;
  line-height: 1.5;
}

.footer-contact-row strong {
  color: #ffffff;
}

.footer-contact-row a {
  color: #ffffff;
  text-decoration: none;
}

.footer-contact-row a:hover {
  color: var(--primary-red);
  text-decoration: underline;
}

.footer-map-link {
  color: #60a5fa !important;
  text-decoration: underline !important;
}

.aprint-copyright-bar {
  background: #111827;
  border-top: 1px solid #1f2937;
  padding: 14px 0;
  font-size: 12px;
  color: #6b7280;
}

.copyright-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.copyright-inner a {
  color: #9ca3af;
  text-decoration: none;
}

.copyright-inner a:hover {
  color: #ffffff;
}

/* Мобильная адаптивность для шапки и подвала */
@media (max-width: 900px) {
  .header-row {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }
  .header-col-logo {
    text-align: center;
  }
  .aprint-logo-img {
    margin: 0 auto;
  }
  .header-col-contacts {
    text-align: center;
  }
  .header-col-address {
    text-align: center;
  }
  .aprint-address-box {
    background-position: center top;
    padding-left: 0;
    padding-top: 26px;
  }
  .hero-flex {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }
  .hero-features-list {
    justify-content: center;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }
  .footer-heading:after {
    left: 50%;
    transform: translateX(-50%);
  }
  .copyright-inner {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
}




/* Стилизация обновленного блока логотипа и адреса */
.logo-company-name {
  color: var(--primary-red);
  font-size: 13px;
  font-weight: 700;
}

.logo-agency-badge {
  color: var(--primary-red);
  font-weight: 700;
  font-size: 11px;
}

.hero-brand-red {
  color: var(--primary-red);
}

.hero-agency-sub {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #4b5563;
  text-transform: none;
  margin-top: 4px;
}

.aprint-address-box {
  line-height: 1.45;
  font-size: 13px;
  color: #333333;
}

.aprint-address-box .address-val {
  font-weight: 700;
  color: #000000;
}

/* ============================================================
   ТРЕКЕР СТАТУСА ВЫПОЛНЕНИЯ ЗАКАЗА И ОПЛАТЫ ДЛЯ КЛИЕНТА
   ============================================================ */
.cust-tracker-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0 10px;
}
.cust-track-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  text-align: center;
}
.cust-track-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 2px solid #cbd5e1;
  color: #64748b;
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.cust-track-text {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
}
.cust-track-line {
  flex: 1 1 auto;
  height: 3px;
  background: #e2e8f0;
  margin: 0 8px 18px;
}
.cust-track-line.line-done {
  background: #16a34a;
}
.cust-track-step.step-done .cust-track-circle {
  background: #16a34a;
  border-color: #16a34a;
  color: #ffffff;
}
.cust-track-step.step-done .cust-track-text {
  color: #16a34a;
}
.cust-track-step.step-active .cust-track-circle {
  background: #be3726;
  border-color: #be3726;
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(190, 55, 38, 0.18);
}
.cust-track-step.step-active .cust-track-text {
  color: #be3726;
  font-weight: 800;
}
@media (max-width: 600px) {
  .cust-track-text {
    font-size: 9px;
  }
  .cust-track-circle {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }
}

/* ============================================================
   ЕДИНАЯ ОСНОВНАЯ ОБЛАСТЬ САЙТА В СТИЛЕ A-PRINT22.RU (.bg.container)
   ============================================================ */
.site-container {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  background: #ffffff;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.42);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: visible; /* Должен быть visible, иначе отключается position: sticky у колонки Живого макета */
}

@media (min-width: 768px) {
  body {
    padding-top: 15px;
    padding-bottom: 25px;
  }
  .site-container {
    width: 750px;
    border-radius: 4px;
  }
}

@media (min-width: 992px) {
  body {
    padding-top: 20px;
    padding-bottom: 30px;
  }
  .site-container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  body {
    padding-top: 25px;
    padding-bottom: 40px;
  }
  .site-container {
    width: 1170px;
  }
}

@media (max-width: 767px) {
  body {
    padding: 0;
    padding-bottom: 74px; /* отступ под мобильную фиксированную панель */
  }
  .site-container {
    width: 100%;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
  }
}

.site-container > .aprint-footer {
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
}

.aprint-top-bar {
  width: 100%;
  box-sizing: border-box;
}

.footer-container {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 991px) {
  .main-layout {
    grid-template-columns: 1fr;
  }
  .header-row {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
}

/* ============================================================
   СТИЛИ БАННЕРА ВАЛИДАЦИИ ШАГОВ (ЗАЩИТА ОТ ПЕРЕХОДА)
   ============================================================ */
.step-validation-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fef2f2;
  border: 1.5px solid #ef4444;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 18px;
  color: #991b1b;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.14);
  animation: alertSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

@keyframes alertSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.alert-icon-box {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.alert-content-box {
  flex: 1;
  min-width: 0;
}

.alert-title {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #b91c1c;
  margin-bottom: 2px;
}

.alert-message {
  font-size: 12.5px;
  color: #7f1d1d;
  line-height: 1.4;
}

.alert-close-btn {
  background: none;
  border: none;
  color: #991b1b;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  margin-top: -2px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.alert-close-btn:hover {
  opacity: 1;
}

/* Анимация тряски и подсветка незаполненного обязательного поля */
@keyframes inputShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.field-shake-error {
  border-color: #ef4444 !important;
  background-color: #fff8f8 !important;
  box-shadow: 0 0 0 3.5px rgba(239, 68, 68, 0.22) !important;
  animation: inputShake 0.4s ease-in-out !important;
}


/* ============================================================
   АКЦЕНТНЫЙ БЛОК: ИСПОЛНЕНИЕ QR-КОДА (МНОГОРАЗОВЫЙ БАННЕР)
   ============================================================ */
.qr-execution-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1.5px dashed var(--border-color);
}

.qr-execution-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.qr-execution-sub {
  font-size: 12px;
  font-weight: normal;
  color: var(--text-muted);
}

.qr-type-selector {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qr-type-card {
  position: relative;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  background: #ffffff;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.qr-type-card:hover {
  border-color: #94a3b8;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.qr-type-card.active {
  border-color: #2563eb;
  background: #f8faff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.1);
}

.qr-type-card input[type="radio"] {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  accent-color: #be3726;
  flex-shrink: 0;
  cursor: pointer;
}

.qr-card-content {
  flex: 1;
  min-width: 0;
}

.qr-card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.qr-card-title {
  font-size: 14px;
  color: #1e293b;
  font-weight: 700;
}

.qr-card-desc {
  font-size: 12.5px;
  color: #475569;
  line-height: 1.45;
  margin-bottom: 4px;
}

.qr-card-hint {
  font-size: 11px;
  color: #94a3b8;
}

.qr-price-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.qr-price-badge.free {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

/* ВЫДЕЛЕННАЯ КАРТОЧКА: СМЕННЫЙ СТИКЕР (МНОГОРАЗОВЫЙ) */
.qr-card-reusable {
  border: 2.5px solid #f59e0b;
  background: linear-gradient(180deg, #fffdf8 0%, #fffcf2 100%);
  overflow: hidden;
  padding: 0;
  display: block;
}

.qr-card-reusable:hover {
  border-color: #d97706;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.2);
}

.qr-card-reusable.active {
  border-color: #be3726;
  background: linear-gradient(180deg, #fffdfd 0%, #fff8f7 100%);
  box-shadow: 0 6px 24px rgba(190, 55, 38, 0.18);
}

.reusable-top-ribbon {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, #be3726 0%, #e11d48 100%);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 6px 14px;
  text-transform: uppercase;
}

.qr-card-reusable.active .reusable-top-ribbon {
  background: linear-gradient(90deg, #be3726 0%, #991b1b 100%);
}

.ribbon-fire {
  font-size: 14px;
}

.ribbon-tag {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.28);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}

.qr-reusable-inner-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px 14px 14px;
}

.reusable-title {
  color: #be3726;
  font-size: 14.5px;
}

.qr-price-badge.extra {
  background: #fef2f2;
  color: #be3726;
  border: 1.5px solid #fecaca;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 14px;
  white-space: nowrap;
}

.qr-card-reusable.active .qr-price-badge.extra {
  background: #be3726;
  color: #ffffff;
  border-color: #be3726;
}

.reusable-desc {
  font-size: 12.5px;
  color: #334155;
  margin-bottom: 8px;
}

.reusable-benefit-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #ecfdf5;
  border: 1.5px solid #a7f3d0;
  border-radius: 8px;
  padding: 8px 12px;
  color: #065f46;
  font-size: 12px;
  line-height: 1.45;
  margin-top: 6px;
}

.benefit-icon {
  font-size: 18px;
  line-height: 1;
  margin-top: 1px;
}

.benefit-body b {
  color: #047857;
}

.benefit-sub {
  margin-top: 3px;
  color: #064e3b;
  font-size: 11px;
}

/* ============================================================
   КОМПАКТНАЯ ОБЛАСТЬ ШАГОВ И ИДЕАЛЬНОЕ ВПИСЫВАНИЕ ПРЕВЬЮ
   ============================================================ */
.controls-column {
  min-width: 0; /* Предотвращает распирание в CSS Grid */
  width: 100%;
  box-sizing: border-box;
}

.sticky-preview-column {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  position: sticky;
  top: 20px;
  align-self: start;
  z-index: 50;
}

.card.wizard-step-pane {
  padding: 18px 20px;
}

.chips-list {
  gap: 6px;
  margin-bottom: 10px;
}

.chip {
  padding: 5px 11px;
  font-size: 12px;
}

.form-group {
  margin-bottom: 12px;
}

.form-group label {
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 4px;
}

.form-group input[type="text"],
.form-group input[type="tel"],
.form-group select {
  padding: 9px 12px;
  font-size: 13.5px;
}

.preview-card {
  background: #1e293b;
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-lg);
  margin-bottom: 16px;
  color: #fff;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.preview-scale-text {
  font-size: 11px;
  color: #94a3b8;
}

.banner-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 170px;
  background: #0f172a;
  border-radius: 8px;
  padding: 10px 8px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.banner-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  border-radius: 3px;
  transition: all 0.2s ease-out;
  max-width: 100% !important;
  box-sizing: border-box;
}

.banner-info-bar {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 10px;
  padding-top: 10px;
  gap: 6px;
}

.info-item .info-label {
  font-size: 10px;
  color: #94a3b8;
}

.info-item .info-value {
  font-size: 12px;
  font-weight: 700;
  color: #f1f5f9;
}

@media (min-width: 1200px) {
  .main-layout {
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 24px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .main-layout {
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 16px;
  }
  .preview-card {
    padding: 12px;
  }
  .banner-stage {
    padding: 8px 6px;
  }
}

@media (max-width: 991px) {
  .main-layout {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .sticky-preview-column {
    order: -1; /* Превью наверху на планшетах и смартфонах */
    position: static;
    width: 100%;
  }
  .controls-column {
    order: 1;
    width: 100%;
  }
}

/* ============================================================
   ВЫДЕЛЕННЫЕ КАРТОЧКИ ВЫБОРА МАТЕРИАЛОВ И ЛЮВЕРСОВ
   ============================================================ */
.material-cards-grid,
.eyelets-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.material-card,
.eyelets-card {
  position: relative;
  border: 2px solid #cbd5e1;
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  display: block;
  overflow: hidden;
}

.material-card:hover,
.eyelets-card:hover {
  border-color: #94a3b8;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* АКТИВНЫЙ (ВЫБРАННЫЙ) ВАРИАНТ - ДЕЛОВОЙ АКЦЕНТ */
.material-card.active,
.eyelets-card.active {
  border: 2px solid #0f172a !important;
  background: #f8fafc !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}

.selected-pill {
  display: none !important;
}

.material-card.active .selected-pill,
.eyelets-card.active .selected-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  background: #0f172a;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
  flex-shrink: 0;
}

.material-card-body,
.eyelets-card-body {
  padding: 14px 16px;
}

.material-card-header,
.eyelets-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.material-card input[type="radio"],
.eyelets-card input[type="radio"] {
  width: 22px;
  height: 22px;
  accent-color: #be3726;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
}

.material-title-wrap,
.eyelets-title-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.material-title,
.eyelets-title {
  font-size: 15px;
  font-weight: 800;
  color: #1e293b;
}

.material-card.active .material-title,
.eyelets-card.active .eyelets-title {
  color: #be3726;
  font-size: 15.5px;
  font-weight: 900;
}

.material-subbadge,
.eyelets-subbadge {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 600;
}

.material-rate-badge,
.eyelets-price-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 12px;
  white-space: nowrap;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.material-rate-badge.standard,
.eyelets-price-badge.std {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}

.material-rate-badge.cast {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.material-rate-badge.mesh {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

/* Литой баннер 510 гр. Премиум - НЕАКТИВНОЕ СОСТОЯНИЕ (нейтральное) */
.material-card-cast {
  border: 2px solid #cbd5e1;
  background: #ffffff;
}
.material-card-cast:hover {
  border-color: #94a3b8;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.material-card-cast .material-card-ribbon {
  background: #f1f5f9;
  color: #1e40af;
  border-bottom: 1px solid #e2e8f0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
}
.material-card-cast .ribbon-badge-tag {
  background: #dbeafe;
  color: #1e40af;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 10px;
  margin-left: auto;
  font-weight: 800;
}

/* Литой баннер 510 гр. Премиум - АКТИВНОЕ СОСТОЯНИЕ */
.material-card-cast.active {
  border: 2px solid #0f172a !important;
  background: #f8fafc !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}
.material-card-cast.active .material-card-ribbon {
  background: #0f172a !important;
  color: #ffffff !important;
}
.material-card-cast.active .ribbon-badge-tag {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* Люверсы 30 см (Штормовое крепление) - НЕАКТИВНОЕ СОСТОЯНИЕ (нейтральное) */
.eyelets-card-storm {
  border: 1px solid #cbd5e1;
  background: #ffffff;
}
.eyelets-card-storm:hover {
  border-color: #94a3b8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.eyelets-card-storm .eyelets-card-ribbon {
  background: #f8fafc;
  color: #475569;
  border-bottom: 1px solid #e2e8f0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 5px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
}
.eyelets-card-storm .ribbon-badge-tag {
  background: #e2e8f0;
  color: #334155;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 10px;
  margin-left: auto;
  font-weight: 700;
}

/* Люверсы 30 см (Штормовое крепление) - АКТИВНОЕ СОСТОЯНИЕ */
.eyelets-card-storm.active {
  border: 2px solid #0f172a !important;
  background: #f8fafc !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}
.eyelets-card-storm.active .eyelets-card-ribbon {
  background: #0f172a !important;
  color: #ffffff !important;
}
.eyelets-card-storm.active .ribbon-badge-tag {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

.material-desc,
.eyelets-desc {
  font-size: 12px;
  line-height: 1.5;
  color: #475569;
}

.material-feature-tag,
.eyelets-feature-tag {
  margin-top: 6px;
  padding: 5px 10px;
  background: #eff6ff;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #1e40af;
}

.material-feature-tag.mesh-tag {
  background: #f0fdf4;
  color: #166534;
}

.eyelets-feature-tag {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* ============================================================
   СТИЛИ ДЛЯ ВЫБОРА ПВЗ OZON: КАРТА И АВТОКОМПЛИТ ПОДСКАЗОК
   ============================================================ */

.btn-ozon-map {
  background: linear-gradient(135deg, #005bff 0%, #0042b3 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(0, 91, 255, 0.25);
  transition: all 0.2s ease;
}

.btn-ozon-map:hover {
  background: linear-gradient(135deg, #004bd9 0%, #003699 100%);
  box-shadow: 0 4px 12px rgba(0, 91, 255, 0.35);
  transform: translateY(-1px);
}

.btn-ozon-map:active {
  transform: translateY(0);
}

.btn-ozon-quick {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-ozon-quick:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

/* Выпадающий список подсказок адресов ПВЗ */
.ozon-suggest-wrap {
  position: relative;
  width: 100%;
}

.ozon-suggest-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1.5px solid #005bff;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
  max-height: 280px;
  overflow-y: auto;
  z-index: 1000;
  margin-top: 2px;
  display: none;
}

.ozon-suggest-item {
  padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.15s ease;
}

.ozon-suggest-item:last-child {
  border-bottom: none;
}

.ozon-suggest-item:hover,
.ozon-suggest-item.active {
  background: #f0f7ff;
}

.ozon-suggest-badge {
  background: #005bff;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.ozon-suggest-addr {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}

.ozon-suggest-sub {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

/* Модальное окно карты ПВЗ Ozon */
.ozon-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.ozon-modal-dialog.ozon-official-theme {
  background: #ffffff;
  border-radius: 20px;
  width: 95vw;
  max-width: 1120px;
  height: 85vh;
  max-height: 720px;
  display: flex;
  flex-direction: row;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.25);
  overflow: hidden;
  position: relative;
  animation: ozonModalPop 0.22s ease-out;
}

@keyframes ozonModalPop {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.ozon-modal-close-top {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 100;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ozon-modal-close-top:hover {
  background: #f1f5f9;
  color: #0f172a;
  transform: scale(1.05);
}

/* ЛЕВАЯ ПАНЕЛЬ OZON ДОСТАВКА */
.ozon-sidebar-panel {
  width: 380px;
  min-width: 340px;
  max-width: 380px;
  background: #ffffff;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  padding: 22px 20px;
  z-index: 10;
  box-sizing: border-box;
}

.ozon-panel-title {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 10px;
}

.ozon-method-pills {
  display: flex;
  gap: 6px;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 28px;
}

.ozon-pill {
  flex: 1;
  padding: 8px 16px;
  border: none;
  border-radius: 24px;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: transparent;
  color: #64748b;
  text-align: center;
}

.ozon-pill.active {
  background: #005bff;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 91, 255, 0.35);
}

.ozon-pill:hover:not(.active) {
  color: #0f172a;
}

.ozon-destination-section {
  margin-top: 18px;
}

.ozon-dest-heading {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px 0;
}

.ozon-dest-sub {
  font-size: 12px;
  color: #64748b;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.ozon-search-box-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.ozon-official-search {
  width: 100%;
  background: #f1f5f9;
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 10px 14px 10px 42px !important;
  font-size: 13.5px;
  color: #0f172a;
  outline: none;
  transition: all 0.2s;
  box-sizing: border-box;
}

.ozon-official-search:focus {
  background: #ffffff;
  border-color: #005bff;
  box-shadow: 0 0 0 3px rgba(0, 91, 255, 0.12);
}

.ozon-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
}

.ozon-locate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: #005bff;
  font-size: 12.5px;
  font-weight: 700;
  margin-top: 10px;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s;
}

.ozon-locate-btn:hover {
  color: #004bd9;
  text-decoration: underline;
}

.ozon-quick-cities {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}

.chip-city {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s;
}

.chip-city:hover {
  border-color: #005bff;
  color: #005bff;
}

.chip-city.active {
  background: #005bff;
  color: #ffffff;
  border-color: #005bff;
}

/* СПИСОК ТОЧЕК В САЙДБАРЕ */
.ozon-points-sidebar {
  flex: 1;
  overflow-y: auto;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
  min-height: 120px;
}

.ozon-points-sidebar::-webkit-scrollbar {
  width: 5px;
}

.ozon-points-sidebar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.ozon-point-card {
  padding: 10px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #ffffff;
}

.ozon-point-card:hover {
  border-color: #005bff;
  background: #f0f7ff;
}

.ozon-point-card.selected {
  border-color: #005bff;
  background: #e6f0ff;
  box-shadow: 0 0 0 1.5px #005bff;
}

.ozon-point-card-addr {
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
}

.ozon-point-card-info {
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
}

.ozon-point-card-sched {
  font-size: 11px;
  color: #10b981;
  font-weight: 700;
  margin-top: 3px;
}

/* НИЖНИЙ БЛОК ВЫБОРА */
.ozon-sidebar-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ozon-selected-summary {
  font-size: 12px;
  color: #0f172a;
  font-weight: 700;
  line-height: 1.35;
  background: #f8fafc;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.btn-confirm-pvz {
  background: #005bff;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(0, 91, 255, 0.35);
  text-align: center;
}

.btn-confirm-pvz:hover:not(:disabled) {
  background: #004bd9;
  box-shadow: 0 6px 18px rgba(0, 91, 255, 0.45);
}

.btn-confirm-pvz:disabled {
  background: #cbd5e1;
  cursor: not-allowed;
  box-shadow: none;
  color: #64748b;
}

/* ПРАВАЯ ОБЛАСТЬ КАРТЫ */
.ozon-map-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  min-height: 100%;
  background: #e2e8f0;
}

#ozonMapContainer {
  width: 100%;
  height: 100%;
  min-height: 480px;
}

.ozon-brand-watermark {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: 20px;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.15);
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.ozon-brand-text {
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: #005bff;
}

.ozon-brand-box {
  font-size: 13px;
}

.ozon-brand-label {
  font-weight: 800;
  font-size: 13px;
  color: #0f172a;
}

@media (max-width: 820px) {
  .ozon-modal-dialog.ozon-official-theme {
    flex-direction: column-reverse;
    height: 94vh;
    max-height: 94vh;
  }
  .ozon-sidebar-panel {
    width: 100%;
    max-width: 100%;
    height: 45vh;
    border-right: none;
    border-top: 1px solid #e2e8f0;
    padding: 14px;
  }
  .ozon-map-wrapper {
    height: 50vh;
    min-height: 220px;
  }
}



/* ============================================================
   СТИЛИ ПРЕДОСМОТРА МАКЕТА И КРУПНОГО МОДАЛЬНОГО ОКНА
   ============================================================ */
.btn-mockup-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2563eb;
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid #3b82f6;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  outline: none;
  text-decoration: none;
}

.btn-mockup-preview:hover {
  background: #1d4ed8;
  border-color: #60a5fa;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.btn-mockup-preview:active {
  background: #1e40af;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3), inset 0 1px 2px rgba(0, 0, 0, 0.2);
  transform: translateY(1px);
}

.large-banner-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeInModal 0.2s ease;
}

.large-banner-modal-dialog {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 16px;
  max-width: 960px;
  width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}

.large-banner-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #1e293b;
  background: #1e293b;
}

.large-modal-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.large-modal-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #38bdf8;
  text-transform: uppercase;
}

.large-modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #f8fafc;
}

.large-modal-close-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s;
}
.large-modal-close-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.large-banner-modal-body {
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #090d16;
  min-height: 280px;
  overflow: auto;
}

.large-banner-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.large-banner-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-top: 1px solid #1e293b;
  background: #131d2e;
  flex-wrap: wrap;
  gap: 10px;
}

.large-modal-specs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.spec-tag {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}

.btn-large-modal-close {
  background: #2563eb;
  color: #ffffff;
  border: none;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-large-modal-close:hover {
  background: #1d4ed8;
}

.step6-mockup-preview-card:hover #step6BannerStage {
  box-shadow: 0 0 0 2px #2563eb;
}


/* Чистый вид без рамок редактирования в модалке и в шаге 6 */
#step6BannerStage .banner-content-box.free-layout .b-title,
#step6BannerStage .banner-content-box.free-layout .b-phone,
#step6BannerStage .banner-content-box.free-layout .b-extra,
#largeBannerStage .banner-content-box.free-layout .b-title,
#largeBannerStage .banner-content-box.free-layout .b-phone,
#largeBannerStage .banner-content-box.free-layout .b-extra {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  cursor: pointer !important;
}
#step6BannerStage .banner-content-box.free-layout .b-title::after,
#step6BannerStage .banner-content-box.free-layout .b-phone::after,
#step6BannerStage .banner-content-box.free-layout .b-extra::after,
#step6BannerStage .banner-content-box.free-layout .b-title::before,
#step6BannerStage .banner-content-box.free-layout .b-phone::before,
#step6BannerStage .banner-content-box.free-layout .b-extra::before,
#largeBannerStage .banner-content-box.free-layout .b-title::after,
#largeBannerStage .banner-content-box.free-layout .b-phone::after,
#largeBannerStage .banner-content-box.free-layout .b-extra::after,
#largeBannerStage .banner-content-box.free-layout .b-title::before,
#largeBannerStage .banner-content-box.free-layout .b-phone::before,
#largeBannerStage .banner-content-box.free-layout .b-extra::before {
  display: none !important;
}


/* Выпадающие подсказки поиска городов и ПВЗ (как на Ozon) */
.ozon-map-suggest-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.18), 0 6px 12px -4px rgba(0, 0, 0, 0.1);
  max-height: 280px;
  overflow-y: auto;
  z-index: 1000;
}
.ozon-map-suggest-item {
  padding: 10px 14px;
  font-size: 13px;
  color: #1e293b;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.12s;
  text-align: left;
}
.ozon-map-suggest-item:hover, .ozon-map-suggest-item.active {
  background: #f0f7ff;
  color: #005bff;
}
.ozon-map-suggest-item:last-child {
  border-bottom: none;
}
.ozon-map-suggest-icon {
  font-size: 15px;
  flex-shrink: 0;
}
.ozon-map-suggest-title {
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
}
.ozon-map-suggest-sub {
  font-size: 11.5px;
  color: #64748b;
  margin-top: 2px;
  line-height: 1.25;
}

/* ============================================================
   ПВЗ OZON ПО ВСЕЙ РОССИИ И ОПЛАТА OZON PAY (v4.0)
   ============================================================ */
/* ID-селектор перебивает мобильное правило padding для input */
#ozonMapSearchInput.ozon-official-search { padding: 10px 84px 10px 40px !important; }
.ozon-search-go {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: #005bff; color: #fff; border: none; border-radius: 9px;
  padding: 7px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; z-index: 5;
}
.ozon-search-go:hover { background: #004ecc; }
.ozon-view-counter { font-size: 11.5px; color: #64748b; font-weight: 600; padding: 4px 2px 6px; min-height: 18px; }
.ozon-list-head { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .4px; padding: 4px 2px 8px; }
.ozon-list-empty { padding: 22px 14px; text-align: center; color: #64748b; font-size: 13px; line-height: 1.5; }
.ozon-map-suggest-hint, .ozon-suggest-hint { padding: 12px 14px; color: #64748b; font-size: 12.5px; line-height: 1.45; }
.ozon-suggest-section { padding: 8px 14px 4px; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .4px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.ozon-suggest-map-row { background: #f0f7ff; color: #005bff; font-weight: 700; justify-content: center; gap: 8px; border-top: 1px solid #e0f2fe; }
.ozon-spin { display: inline-block; animation: ozonSpin 1s infinite linear; }
@keyframes ozonSpin { to { transform: rotate(360deg); } }

.ozon-srv-cluster {
  position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%;
  background: #005bff; color: #fff; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid rgba(255,255,255,.95); box-shadow: 0 2px 10px rgba(0,91,255,.45); cursor: pointer;
  box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.ozon-balloon-head { font-weight: 800; color: #0f172a; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.ozon-balloon-badge { background: #005bff; color: #fff; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 900; }
.ozon-balloon-body { font-size: 13px; line-height: 1.45; color: #0f172a; max-width: 300px; }
.ozon-balloon-addr { font-weight: 700; margin: 6px 0 4px; }
.ozon-balloon-hours { color: #047857; font-weight: 600; font-size: 12px; }
.ozon-balloon-meta { color: #64748b; font-size: 12px; margin-top: 2px; }
.ozon-balloon-desc { color: #64748b; font-size: 11.5px; margin-top: 6px; max-height: 64px; overflow: auto; }
.ozon-balloon-btn { background: #005bff; color: #fff; border: none; border-radius: 8px; padding: 9px 16px; font-weight: 700; font-size: 13px; cursor: pointer; width: 100%; margin-top: 4px; }
.ozon-map-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: #0f172a; color: #fff;
  padding: 10px 22px; border-radius: 30px; font-size: 13px; font-weight: 700; z-index: 999999;
  box-shadow: 0 10px 25px rgba(0,0,0,.3); pointer-events: none; transition: opacity .3s; opacity: 0; max-width: calc(100vw - 32px); text-align: center;
}

.ozonpay-box { background: #eff6ff; border: 2px solid #005bff; border-radius: 12px; padding: 22px 16px; text-align: center; margin-top: 16px; }
.ozonpay-box h3 { color: #0f172a; font-size: 18px; margin: 0 0 8px; font-weight: 800; }
.ozonpay-box p { font-size: 13px; color: #475569; margin: 0 0 16px; line-height: 1.5; }
.ozonpay-box-error { background: #fff7ed; border-color: #f97316; }
.ozonpay-box-ok { background: #f0fdf4; border-color: #16a34a; }
.ozonpay-box-ok p { margin-bottom: 0; }
.ozonpay-logo { font-size: 20px; font-weight: 900; color: #005bff; margin-bottom: 6px; }
.ozonpay-btn {
  display: inline-block; background: #005bff; color: #fff; font-weight: 800; padding: 13px 26px; border-radius: 8px;
  text-decoration: none; font-size: 15px; border: none; cursor: pointer; box-shadow: 0 4px 12px rgba(0,91,255,.3);
}
.ozonpay-btn:disabled { opacity: .6; cursor: default; }
.ozonpay-note { font-size: 11.5px; color: #64748b; margin-top: 12px; }

.pending-order-bar {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 99999;
  display: flex; align-items: center; gap: 10px; background: #0f172a; color: #fff;
  padding: 10px 12px 10px 18px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.3);
  font-size: 13.5px; max-width: calc(100vw - 32px); box-sizing: border-box;
}
.pending-order-pay { background: #005bff; color: #fff; border: none; border-radius: 8px; padding: 8px 14px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.pending-order-close { background: transparent; color: #94a3b8; border: none; font-size: 16px; cursor: pointer; padding: 4px 6px; }
.ozon-hl { color: #005bff; font-weight: 800; }
#ozonSuggestDropdown, #ozonMapSuggestDropdown { max-height: 360px; overflow-y: auto; }

/* 152-ФЗ: Баннер согласия на Cookie */
.cookie-notice-banner {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 860px;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #f8fafc;
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  z-index: 99999;
  font-size: 13px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-sizing: border-box;
}
.cookie-notice-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.cookie-notice-content span {
  flex: 1;
  min-width: 260px;
  line-height: 1.45;
}
.cookie-notice-content a {
  color: #38bdf8;
  text-decoration: underline;
  font-weight: 600;
}
.cookie-notice-content a:hover {
  color: #7dd3fc;
}
.cookie-notice-btn {
  background: #005bff;
  color: #ffffff;
  border: none;
  padding: 8px 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.cookie-notice-btn:hover {
  background: #004ed4;
  transform: translateY(-1px);
}



/* Слой логотипа «под текстом» (в печатном файле логотип рисуется до текста) */
.banner-canvas.logo-below .banner-movable-logo { z-index: 1; }

/* Рамка выделения элемента на живом макете: перетаскивание + уголки для размера */
.sel-box {
  position: absolute;
  z-index: 20;
  border: 1.5px solid #2563eb;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
  pointer-events: none;
  box-sizing: border-box;
}
.sel-box .sel-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: #2563eb;
  color: #fff;
  font: 600 10.5px/1.4 Arial, sans-serif;
  padding: 1px 7px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
}
.sel-box .sel-grip {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid #2563eb;
  border-radius: 3px;
  box-sizing: border-box;
  pointer-events: auto;
  touch-action: none;
}
.sel-box .sel-grip.nw { left: -7px; top: -7px; cursor: nwse-resize; }
.sel-box .sel-grip.ne { right: -7px; top: -7px; cursor: nesw-resize; }
.sel-box .sel-grip.sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.sel-box .sel-grip.se { right: -7px; bottom: -7px; cursor: nwse-resize; }
/* Боковые ручки — растянуть / сжать по ширине (у логотипа их нет: картинку не искажаем) */
.sel-box .sel-grip.w,
.sel-box .sel-grip.e { width: 10px; height: 22px; top: 50%; margin-top: -11px; border-radius: 5px; cursor: ew-resize; background: #2563eb; border-color: #fff; }
.sel-box .sel-grip.w { left: -6px; }
.sel-box .sel-grip.e { right: -6px; }
.sel-box .sel-grip.w::after,
.sel-box .sel-grip.e::after { content: ''; position: absolute; left: 50%; top: 5px; bottom: 5px; width: 2px; margin-left: -1px; background: #fff; border-radius: 1px; }
.sel-box .sel-grip.n,
.sel-box .sel-grip.s { width: 22px; height: 10px; left: 50%; margin-left: -11px; border-radius: 5px; cursor: ns-resize; background: #2563eb; border-color: #fff; }
.sel-box .sel-grip.n { top: -6px; }
.sel-box .sel-grip.s { bottom: -6px; }
.sel-box .sel-grip.n::after,
.sel-box .sel-grip.s::after { content: ''; position: absolute; top: 50%; left: 5px; right: 5px; height: 2px; margin-top: -1px; background: #fff; border-radius: 1px; }

.sel-box.label-below .sel-label { bottom: auto; top: calc(100% + 8px); }
@media (pointer: coarse) {
  .sel-box .sel-grip { width: 20px; height: 20px; }
  .sel-box .sel-grip.nw { left: -11px; top: -11px; }
  .sel-box .sel-grip.ne { right: -11px; top: -11px; }
  .sel-box .sel-grip.sw { left: -11px; bottom: -11px; }
  .sel-box .sel-grip.se { right: -11px; bottom: -11px; }
  .sel-box .sel-grip.w,
  .sel-box .sel-grip.e { width: 16px; height: 30px; margin-top: -15px; }
  .sel-box .sel-grip.w { left: -9px; }
  .sel-box .sel-grip.e { right: -9px; }
  .sel-box .sel-grip.n,
  .sel-box .sel-grip.s { width: 30px; height: 16px; margin-left: -15px; }
  .sel-box .sel-grip.n { top: -9px; }
  .sel-box .sel-grip.s { bottom: -9px; }
}

.mockup-edit-hint {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 12px;
  line-height: 1.45;
  color: #1e3a8a;
}

.mockup-edit-hint ul { margin: 6px 0; padding: 0; list-style: none; }
.mockup-edit-hint li { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.mockup-edit-hint .hint-ico { flex: 0 0 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: #2563eb; box-sizing: border-box; }
.mockup-edit-hint .hint-corner { width: 11px; height: 11px; flex-basis: 11px; margin: 0 2px 0 3px; background: #fff; border: 2px solid #2563eb; border-radius: 3px; }
.mockup-edit-hint .hint-side { width: 8px; height: 16px; flex-basis: 8px; margin: 0 4px; background: #2563eb; border-radius: 4px; }

.mockup-edit-hint .hint-top { width: 16px; height: 8px; flex-basis: 16px; background: #2563eb; border-radius: 4px; }

/* Ширина макета меняется мгновенно: анимация ширины мешала замерам строк */
.banner-wrapper { transition: box-shadow 0.2s ease-out !important; }

/* Поле печати (2% от края) и направляющие примагничивания — вне #bannerCanvas */
.ed-safe {
  position: absolute; left: 2%; right: 2%; top: 2%; bottom: 2%;
  border: 1px dashed rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.25);
  pointer-events: none; z-index: 15; display: none;
}
.banner-wrapper.ed-active .ed-safe,
body.banner-editor-open .ed-safe { display: block; }
.ed-guide { position: absolute; pointer-events: none; z-index: 16; display: none; background: #ec4899; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6); }
.ed-guide.v { top: 0; bottom: 0; width: 1px; margin-left: -0.5px; }
.ed-guide.h { left: 0; right: 0; height: 1px; margin-top: -0.5px; }

/* Строка под макетом: подсказка + кнопки */
.ed-notice {
  display: flex; flex-direction: column; gap: 6px;
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 6px;
  padding: 7px 10px; font-size: 11.5px; color: #1e40af; font-weight: 600; margin-bottom: 8px;
}
.ed-notice-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-btn {
  background: #fff; border: 1px solid #93c5fd; color: #1d4ed8; border-radius: 6px;
  padding: 5px 9px; font-size: 12px; font-weight: 700; cursor: pointer; line-height: 1.2;
  font-family: inherit;
}
.ed-btn:hover:not(:disabled) { background: #dbeafe; }
.ed-btn:disabled { opacity: 0.45; cursor: default; }
.ed-btn-primary { background: #2563eb; border-color: #2563eb; color: #fff; flex: 1 1 auto; }
.ed-btn-primary:hover:not(:disabled) { background: #1d4ed8; }
.ed-btn-done { background: #16a34a; border-color: #16a34a; color: #fff; margin-left: auto; }
.ed-btn-done:hover:not(:disabled) { background: #15803d; }

/* Редактор на весь экран */
.ed-toolbar { display: none; }
body.banner-editor-open { overflow: hidden; }
#bannerPreviewCard.editor-open {
  position: fixed; inset: 0; z-index: 20000; margin: 0; border-radius: 0; /* выше нижней панели шагов (9999) */
  width: auto; max-width: none; display: flex; flex-direction: column; gap: 10px;
  padding: 12px 16px; overflow: hidden; box-sizing: border-box;
}
#bannerPreviewCard.editor-open .ed-toolbar { display: flex; flex-direction: column; gap: 8px; flex: none; }
#bannerPreviewCard.editor-open .preview-header,
#bannerPreviewCard.editor-open #freeLayoutBannerNotice { display: none !important; }
#bannerPreviewCard.editor-open .banner-stage { flex: 1 1 auto; min-height: 0; padding: 36px 28px 28px; }
#bannerPreviewCard.editor-open .banner-info-bar { flex: none; margin-top: 0; }
.ed-tb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ed-tb-title { font-size: 15px; font-weight: 800; color: #fff; margin-right: 6px; }
.ed-tb-group { display: flex; gap: 6px; flex-wrap: wrap; }
.ed-tb-texts label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; color: #cbd5e1; flex: 1 1 180px; }
.ed-tb-texts input {
  background: #0f172a; border: 1px solid #475569; color: #fff; border-radius: 6px;
  padding: 7px 10px; font-size: 14px; font-family: inherit; width: 100%; box-sizing: border-box;
}
.ed-tb-texts input:focus { outline: none; border-color: #60a5fa; box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.35); }
.ed-tb-hint { font-size: 11.5px; color: #94a3b8; line-height: 1.4; }
@media (max-width: 640px) {
  #bannerPreviewCard.editor-open { padding: 8px 10px; gap: 6px; }
  #bannerPreviewCard.editor-open .banner-stage { padding: 30px 12px 18px; }
  .ed-tb-title { display: none; }
  .ed-tb-hint { display: none; }
  .ed-btn { padding: 6px 8px; white-space: nowrap; }
  /* кнопки — одной строкой с прокруткой, «Готово» всегда видно справа */
  #edToolbar .ed-tb-row:first-child { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; scrollbar-width: none; }
  #edToolbar .ed-tb-row:first-child::-webkit-scrollbar { display: none; }
  #edToolbar .ed-tb-row:first-child .ed-tb-group { flex-wrap: nowrap; }
  #edToolbar .ed-btn-done { position: sticky; right: 0; box-shadow: -8px 0 8px #1e293b; }
  /* поля текста — подпись слева, компактно */
  .ed-tb-texts { gap: 4px; }
  .ed-tb-texts label { flex: 1 1 100%; flex-direction: row; align-items: center; gap: 8px; }
  .ed-tb-texts label span { flex: 0 0 66px; }
  .ed-tb-texts input { padding: 6px 8px; font-size: 14px; }
  #bannerPreviewCard.editor-open .banner-info-bar { display: none; }
}


/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ (телефоны и планшеты) — последний слой, перекрывает старые правила
   ============================================================ */

/* Подсказка под макетом (раскрывающаяся) */
.ed-help { background: #fff; border: 1px solid #bfdbfe; border-radius: 6px; color: #1e3a8a; font-weight: 500; }
.ed-help summary { cursor: pointer; padding: 6px 10px; font-weight: 700; color: #1d4ed8; list-style: none; display: flex; align-items: center; gap: 6px; }
.ed-help summary::-webkit-details-marker { display: none; }
.ed-help summary::before { content: 'ⓘ'; font-size: 13px; }
.ed-help summary::after { content: '▾'; margin-left: auto; transition: transform 0.15s; }
.ed-help[open] summary::after { transform: rotate(180deg); }
.ed-help-body { padding: 0 10px 8px; font-size: 11.5px; line-height: 1.45; }
.ed-help-body ul { margin: 6px 0; padding: 0; list-style: none; }
.ed-help-body li { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.ed-help-body .hint-ico { flex: 0 0 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: #2563eb; box-sizing: border-box; }
.ed-help-body .hint-corner { width: 11px; height: 11px; flex-basis: 11px; margin: 0 2px 0 3px; background: #fff; border: 2px solid #2563eb; border-radius: 3px; }
.ed-help-body .hint-side { width: 8px; height: 16px; flex-basis: 8px; margin: 0 4px; background: #2563eb; border-radius: 4px; }
.ed-help-body .hint-top { width: 16px; height: 8px; flex-basis: 16px; background: #2563eb; border-radius: 4px; }
.ed-lbl-short { display: none; }

/* Ползунки размеров не распирают карточку */
.field-size-range { min-width: 0; width: auto; }

@media (max-width: 991px) {
  /* Полоса шагов больше не шире экрана */
  .wizard-stepper { min-width: 0 !important; }

  /* Компактная карточка макета: без заголовка и строки характеристик (они есть в шагах и на шаге 6) */
  .preview-card .preview-header,
  .preview-card .banner-info-bar { display: none !important; }
  .preview-card { padding: 8px !important; border-radius: 10px; }
  .banner-stage { min-height: 0 !important; padding: 8px 6px !important; }
  .ed-notice { margin: 8px 0 0 !important; padding: 6px !important; gap: 6px; }

  /* Шаги 1–4: макет закреплён сверху, пока листаешь поля */
  body.wz-sticky:not(.kb-open) .sticky-preview-column {
    position: sticky !important; top: 0; z-index: 60;
  }
  body.wz-sticky:not(.kb-open) .sticky-preview-column .preview-card { box-shadow: 0 8px 18px rgba(15, 23, 42, 0.28); }
  .wizard-step-pane, .form-group, .field-size-control { scroll-margin-top: calc(var(--sticky-h, 0px) + 12px); }
  html { scroll-padding-top: calc(var(--sticky-h, 0px) + 12px); }
}
@media (max-width: 991px) and (max-height: 520px) {
  /* Телефон боком — экран низкий, макет не закрепляем */
  body.wz-sticky .sticky-preview-column { position: static !important; }
}

@media (max-width: 900px) {
  /* Кнопки «Назад/Далее» — в нижней панели, в карточке шага их не дублируем */
  .wizard-step-pane .step-nav-footer { display: none !important; }
  .mobile-bottom-bar { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) !important; gap: 10px; }
  #mobileBottomBar .mobile-price-badge { display: flex !important; flex-direction: column; min-width: 0; }
  .mobile-price-badge .price { white-space: nowrap; }
  .mobile-nav-buttons { flex: 0 1 auto; }
  .mobile-btn-prev, .mobile-btn-next { min-height: 44px; white-space: nowrap; }
}

@media (max-width: 767px) {
  /* Компактная шапка: логотип и телефон в строку, адрес — строкой ниже, значок слева от текста */
  .aprint-header { padding-top: 8px !important; padding-bottom: 8px !important; }
  .header-row { flex-direction: row !important; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px !important; text-align: left !important; }
  .header-col-logo { flex: 0 1 auto; text-align: left !important; }
  .aprint-logo-img { max-height: 40px; width: auto; margin: 0 !important; }
  .header-col-contacts { flex: 0 1 auto; text-align: right !important; }
  .aprint-phone { font-size: 16px !important; white-space: nowrap; }
  .header-col-address { flex: 1 1 100%; text-align: center !important; }
  .aprint-address-box {
    display: inline-block; text-align: left; font-size: 12px; line-height: 1.4;
    background-position: 0 50% !important; background-size: auto 24px; padding: 0 0 0 26px !important;
  }
}

@media (max-width: 640px) {
  /* Шаги: кружки 1–6, название только у текущего */
  .wizard-header { padding: 0 !important; margin-bottom: 10px !important; }
  .wizard-stepper { padding: 4px !important; gap: 0 !important; justify-content: space-between; }
  .wizard-step-btn { display: inline-flex !important; align-items: center; gap: 5px !important; padding: 5px 4px !important; }
  .wizard-step-btn:not(.active) .step-name { display: none; }
  .step-arrow-divider { font-size: 9px !important; margin: 0 !important; color: #cbd5e1; }

  .ed-lbl-long { display: none; }
  .ed-lbl-short { display: inline; }

  /* Размер/ширина строки: подпись сверху, кнопки и ползунок — во всю ширину */
  .field-size-control { flex-wrap: wrap; row-gap: 4px; }
  .field-size-title { flex: 1 1 100%; min-width: 0 !important; }
}
@media (max-width: 360px) {
  .step-arrow-divider { display: none; }
}
@media (pointer: coarse) {
  .btn-field-size-step { width: 34px !important; height: 34px !important; font-size: 17px !important; }
  .ed-btn { min-height: 36px; }
}

/* Логотип: рамка не прибавляет ширины (иначе на экране он на 3px больше, чем в печати), без увеличения при перетаскивании */
.banner-movable-logo { border: 0 !important; box-sizing: border-box; }
.banner-movable-logo:hover { outline: 1.5px dashed rgba(255, 255, 255, 0.85); outline-offset: 0; }
.banner-movable-logo.dragging { transform: translate(-50%, -50%) !important; outline: 1.5px solid #2563eb; }

/* Слой логотипа в редакторе на весь экран — только когда логотип загружен */
.ed-logo-group { display: none; align-items: center; }
body.has-logo .ed-logo-group { display: flex; }
.ed-tb-label { font-size: 12px; font-weight: 700; color: #cbd5e1; }
.ed-btn.chip-logo-layer.active { background: #2563eb; border-color: #2563eb; color: #fff; }

@media (max-width: 767px) {
  .contact-phones-wrap > div { display: none; } /* «Консультации и приём заказов» — телефон помещается рядом с логотипом */
}
@media (max-width: 640px) {
  /* Подсказка — кнопкой в строке с кнопками макета; раскрытая — на всю ширину */
  .ed-notice { flex-direction: row !important; flex-wrap: wrap; align-items: flex-start; }
  .ed-notice-actions { flex: 1 1 auto; flex-wrap: nowrap; }
  .ed-btn-primary { flex: 0 1 auto !important; }
  .ed-help { flex: 0 0 auto; }
  .ed-help summary { min-height: 36px; box-sizing: border-box; padding: 0 8px; }
  .ed-help summary::after { display: none; }
  .ed-help[open] { flex-basis: 100%; }
}
@media (max-width: 767px) {
  .aprint-logo-img { max-height: 34px !important; }
  .aprint-phone { font-size: 15px !important; }
  #mTotalCostDisplay { white-space: nowrap; }
}
@media (max-width: 374px) {
  .header-row { justify-content: center !important; }
  .header-col-contacts { text-align: center !important; }
}
@media (max-width: 900px) {
  /* Значок адреса — слева от текста, а не поверх него */
  .aprint-address-box {
    display: inline-block; text-align: left;
    background-position: 0 50% !important; background-size: auto 26px; padding: 0 0 0 28px !important;
  }
}


/* ============================================================
   ШАГ 2 «МАКЕТ БАННЕРА» — редактор
   ============================================================ */
/* На шаге 2 макет переезжает в шаг: правая колонка не нужна, шаг во всю ширину */
body.wz-step-3 .sticky-preview-column { display: none !important; }
@media (min-width: 992px) {
  body.wz-step-3 .main-layout { grid-template-columns: minmax(0, 1fr) !important; }
}
.editor-slot { position: sticky; top: 0; z-index: 40; margin: 0 0 12px; }
@media (min-width: 992px) { .editor-slot { top: 8px; } }
body.kb-open .editor-slot { position: static; }
.editor-slot .preview-card { margin: 0 !important; padding: 8px !important; border-radius: 10px; }
.editor-slot .preview-header,
.editor-slot .banner-info-bar { display: none !important; }
.editor-slot .banner-stage { min-height: 0 !important; padding: 26px 10px 14px !important; }
.ed-hint {
  display: flex; align-items: center; gap: 8px; margin: -4px 0 12px;
  background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; border-radius: 8px;
  padding: 6px 8px 6px 10px; font-size: 12px; line-height: 1.35;
}
.ed-hint span { flex: 1; }
.ed-hint-close { flex: none; border: 0; background: transparent; color: #1e40af; font-size: 14px; cursor: pointer; width: 28px; height: 28px; border-radius: 6px; }
.ed-hint-close:hover { background: #dbeafe; }
.sel-box .sel-label { font-size: 11px; }

/* Настройки выбранного элемента */
.insp-sel { border: 1.5px solid #bfdbfe; background: #f8fbff; border-radius: 10px; padding: 10px 12px; margin-bottom: 16px; }
.insp-sel-empty { font-size: 12.5px; color: #64748b; }
.insp-sel-body { display: none; }
.insp-sel.has-sel .insp-sel-empty { display: none; }
.insp-sel.has-sel .insp-sel-body { display: block; }
.insp-sel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.insp-sel-head b { font-size: 14px; color: #1d4ed8; }
.insp-sel-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.insp-btn {
  background: #fff; border: 1px solid #cbd5e1; color: #0f172a; border-radius: 6px;
  padding: 5px 10px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.insp-btn:hover { background: #f1f5f9; }
.insp-btn-danger { color: #dc2626; border-color: #fca5a5; background: #fff5f5; }
.insp-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: 12.5px; color: #334155; font-weight: 600; }
.insp-row > span { flex: 0 0 64px; }
.insp-row input[type=range] { flex: 1; min-width: 0; accent-color: #2563eb; height: 22px; }
.insp-row > b { flex: 0 0 auto; min-width: 44px; text-align: right; font-size: 12px; color: #0f172a; }
.insp-logo-only { display: none; }
.insp-sel.is-logo .insp-logo-only { display: flex; }
.insp-seg { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 7px; overflow: hidden; }
.insp-seg button { border: 0; background: #fff; padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer; color: #334155; font-family: inherit; }
.insp-seg button + button { border-left: 1px solid #cbd5e1; }
.insp-seg button.active { background: #2563eb; color: #fff; }

/* Разделы шага */
.mk-section { margin-bottom: 18px; }
.mk-title { font-size: 13px; font-weight: 800; color: #0f172a; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.4px; }
.mk-opt { font-size: 11px; font-weight: 600; color: #94a3b8; text-transform: none; letter-spacing: 0; }
.txt-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 6px 8px; border-radius: 8px; margin: 0 -8px; }
.txt-row.active { background: #eff6ff; }
.txt-row > label { font-size: 13px; font-weight: 700; color: #334155; padding-top: 10px; }
.txt-field { min-width: 0; }
.txt-field input { width: 100%; box-sizing: border-box; }
.txt-suggest { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0 !important; }
.txt-suggest .chip { padding: 3px 9px !important; font-size: 11px !important; }
.mk-logo-upload {
  width: 100%; border: 2px dashed #94a3b8; background: #fff; border-radius: 8px; padding: 10px 14px;
  cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: inherit;
}
.mk-logo-upload:hover { border-color: #0f172a; background: #f8fafc; }
.mk-logo-upload b { font-size: 13px; color: #1e293b; }
.mk-logo-upload span { font-size: 11px; color: #64748b; }
.mk-logo-row { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 10px; }
.mk-logo-thumb { width: 40px; height: 40px; flex: none; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mk-logo-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mk-logo-name { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-presets { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; margin-bottom: 10px; }
.mk-presets .color-preset-card { padding: 8px 6px !important; }
.mk-presets .preset-name { font-size: 11.5px !important; }
.mk-design-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: end; }
.mk-design-row .custom-colors-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.mk-font { display: flex; flex-direction: column; gap: 4px; }
.mk-font label { font-size: 12px; font-weight: 700; color: #334155; }
.mk-font select { width: 100%; box-sizing: border-box; }

@media (max-width: 640px) {
  .txt-row { grid-template-columns: minmax(0, 1fr); }
  .txt-row > label { padding-top: 0; }
  /* примеры — одной строкой с прокруткой */
  .txt-suggest { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .txt-suggest::-webkit-scrollbar { display: none; }
  .txt-suggest .chip { flex: none; }
  .mk-design-row { grid-template-columns: 1fr; }
  .mk-presets .color-circle-split { width: 18px !important; height: 18px !important; }
  .insp-sel { padding: 8px 10px; }
  .editor-slot .banner-stage { padding: 24px 6px 12px !important; }
}

.editor-slot { background: #fff; }

.mk-note { font-size: 12px; color: #64748b; margin-top: 6px; }
.mk-section select#materialSelect { width: 100%; box-sizing: border-box; }
.mk-logo-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }

/* Живой макет сбоку — только предпросмотр (редактирование — в шаге «Макет») */
.sticky-preview-column #bannerWrapper { pointer-events: none; }
.sticky-preview-column .sel-box,
.sticky-preview-column .ed-safe,
.sticky-preview-column .ed-guide { display: none !important; }
/* Компактнее и ближе к краям: меньше отступов вокруг баннера */
.sticky-preview-column .preview-card { padding: 10px !important; }
.sticky-preview-column .preview-header { margin-bottom: 8px; }
.sticky-preview-column .banner-stage { padding: 6px !important; min-height: 0 !important; }
.sticky-preview-column .banner-info-bar { margin-top: 8px; padding-top: 8px; }
/* Люверсы — размер задаёт масштаб баннера */
#eyeletsLayer .eyelet { width: var(--eyelet-size, 7px); height: var(--eyelet-size, 7px); border-width: 0.5px; }

/* Способы оплаты: карта / СБП */
.pm-icon { font-size: 11px; font-weight: 900; padding: 5px 8px; border-radius: 6px; letter-spacing: 0.5px; color: #fff; min-width: 50px; text-align: center; }
.pm-icon-card { background: #005bff; }
.pm-icon-sbp { background: linear-gradient(135deg, #1d9e3f, #5b2d90); }
.pay-method-card.pm-disabled { opacity: 0.55; cursor: not-allowed; }
.pay-method-card.pm-disabled input { pointer-events: none; }
.sbp-box { text-align: center; }
.sbp-logo { display: inline-block; font-weight: 900; color: #fff; background: linear-gradient(135deg, #1d9e3f, #5b2d90); padding: 4px 12px; border-radius: 6px; margin-bottom: 8px; }
.sbp-qr { display: block; margin: 10px auto; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; padding: 6px; }
.sbp-btn { background: linear-gradient(135deg, #1d9e3f, #5b2d90) !important; }
.sbp-alt { margin-top: 10px; background: none; border: 0; color: #005bff; text-decoration: underline; font-weight: 600; cursor: pointer; font-family: inherit; }
.sticky-preview-column .b-title,
.sticky-preview-column .b-phone,
.sticky-preview-column .b-extra,
.sticky-preview-column .banner-movable-logo { pointer-events: none !important; cursor: default !important; }


/* ============================================================
   ПУЛЬТ ПОД БАННЕРОМ (шаг «Макет»)
   ============================================================ */
.pult { border: 1.5px solid #bfdbfe; background: #f8fbff; border-radius: 12px; padding: 10px; margin-bottom: 18px; }
.pult-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.pult-tab {
  min-height: 44px; border: 1.5px solid #cbd5e1; background: #fff; color: #334155; border-radius: 9px;
  font-size: 13px; font-weight: 800; cursor: pointer; font-family: inherit; padding: 4px 6px; line-height: 1.15;
}
.pult-tab.active { background: #2563eb; border-color: #2563eb; color: #fff; box-shadow: 0 3px 10px rgba(37, 99, 235, 0.3); }
.pult-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
.pult-panel { display: none; }
.pult-panel.active { display: block; }
.pult-panel > label { display: block; font-size: 13px; font-weight: 800; color: #0f172a; margin-bottom: 6px; }
.pult-panel input[type=text], .pult-panel input[type=tel] { width: 100%; box-sizing: border-box; }
.pult-panel .txt-suggest { margin-top: 8px !important; }

.pult-move { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.pult-dpad { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); gap: 4px; flex: none; }
.pult-key {
  border: 1.5px solid #93c5fd; background: #fff; color: #1d4ed8; border-radius: 10px; font-size: 16px; font-weight: 900;
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; font-family: inherit; padding: 0;
}
.pult-key:active { background: #dbeafe; }
.pult-key.up { grid-column: 2; grid-row: 1; }
.pult-key.left { grid-column: 1; grid-row: 2; }
.pult-key.mid { grid-column: 2; grid-row: 2; font-size: 15px; }
.pult-key.right { grid-column: 3; grid-row: 2; }
.pult-key.down { grid-column: 2; grid-row: 3; }
.pult-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex: 1; min-width: 0; }
.pult-qbtn {
  min-height: 40px; border: 1px solid #cbd5e1; background: #fff; color: #0f172a; border-radius: 8px;
  font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; padding: 4px 6px;
}
.pult-qbtn:hover, .pult-key:hover { background: #eff6ff; }
.pult-reset { color: #64748b; }

.pult-row { display: grid; grid-template-columns: 64px 36px minmax(0, 1fr) 36px 50px; align-items: center; gap: 6px; margin: 6px 0; }
.pult-row > span { font-size: 12.5px; font-weight: 700; color: #334155; }
.pult-row > b { font-size: 12px; text-align: right; color: #0f172a; }
.pult-pm {
  width: 36px; height: 36px; border: 1px solid #cbd5e1; background: #fff; border-radius: 8px; font-size: 18px; font-weight: 800;
  color: #0f172a; cursor: pointer; padding: 0; font-family: inherit;
}
.pult-row input[type=range] { width: 100%; min-width: 0; height: 30px; accent-color: #2563eb; margin: 0; }
.pult-row input[type=range]::-webkit-slider-thumb { width: 24px; height: 24px; }
.pult-row input[type=range]::-moz-range-thumb { width: 22px; height: 22px; }
.pult.is-logo .pult-text-only { display: none; }
.pult-empty-note { display: none; font-size: 12.5px; color: #64748b; margin-top: 6px; }
.pult.no-item .pult-ctrl .pult-move, .pult.no-item .pult-ctrl .pult-sliders { opacity: 0.4; pointer-events: none; }
.pult.no-item .pult-empty-note { display: block; }

/* Безопасная зона — всегда видна в шаге «Макет» */
.editor-slot .ed-safe { display: block; border-color: rgba(255, 255, 255, 0.95); }
.editor-slot .ed-safe::after {
  content: 'безопасная зона'; position: absolute; left: 4px; top: 2px; font-size: 9px; line-height: 1;
  color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, 0.6); opacity: 0.85; font-weight: 700; letter-spacing: 0.3px;
}
.sel-box.narrow .sel-grip.w, .sel-box.narrow .sel-grip.e,
.sel-box.short .sel-grip.n, .sel-box.short .sel-grip.s { display: none; }

/* Шаг «Люверсы»: пояснения */
.mk-info { background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; font-size: 12.5px; color: #334155; line-height: 1.45; }
.mk-info b { display: block; color: #0f172a; margin-bottom: 2px; }
.mk-info-zone { border-color: #bfdbfe; background: #eff6ff; }
.mk-section select#eyeletsSelect { width: 100%; box-sizing: border-box; }

@media (max-width: 767px) {
  .pult { padding: 8px; }
  .pult-body { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pult-tab { font-size: 11px; min-height: 46px; padding: 4px 2px; }
  .pult-dpad { grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(3, 48px); }
  .pult-row { grid-template-columns: 58px 40px minmax(0, 1fr) 40px 44px; }
  .pult-pm { width: 40px; height: 40px; }
  .pult-row input[type=range] { height: 36px; }
  .pult-row input[type=range]::-webkit-slider-thumb { width: 28px; height: 28px; }
  /* баннер почти во всю ширину экрана */
  .editor-slot .preview-card { padding: 4px !important; }
  .editor-slot .banner-stage { padding: 20px 12px 12px !important; } /* место для ручек рамки у края */
  #stepPane3.card { padding-left: 10px !important; padding-right: 10px !important; }
}

@media (max-height: 519px) {
  .editor-slot { position: static !important; } /* телефон боком: закреплённый баннер занял бы почти весь экран */
}
@media (max-width: 374px) {
  /* самые узкие телефоны: быстрые места — строкой под крестовиной */
  .pult-move { flex-wrap: wrap; justify-content: center; }
  .pult-quick { flex: 1 1 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pult-qbtn { font-size: 11px; padding: 4px 2px; }
  .pult-tab { font-size: 10px; letter-spacing: -0.2px; }
  .pult-row { grid-template-columns: 54px 36px minmax(0, 1fr) 36px 40px; gap: 4px; }
  .pult-pm { width: 36px; height: 36px; }
}


/* ============================================================
   ПАЛЬЦЫ: масштаб баннера, во весь экран, без крестовины на сенсорных
   ============================================================ */
.banner-stage { position: relative; }
.zoom-ctl { display: none; position: absolute; right: 8px; bottom: 6px; z-index: 30; gap: 4px; }
.editor-slot .zoom-ctl, .editor-open .zoom-ctl { display: flex; }
.zoom-btn {
  min-width: 36px; height: 34px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(15, 23, 42, 0.82);
  color: #fff; border-radius: 8px; font-size: 16px; font-weight: 800; cursor: pointer; font-family: inherit; padding: 0 8px;
}
.zoom-val { font-size: 12px; min-width: 52px; }
.zoom-full { font-size: 17px; background: #2563eb; border-color: #2563eb; }
.editor-slot .banner-stage { touch-action: none; } /* жесты пальцами — для макета, а не для прокрутки страницы */
.banner-wrapper { transform-origin: center center; }
/* при приближении ручки и подпись рамки остаются обычного размера */
.banner-wrapper .sel-box .sel-grip { transform: scale(calc(1 / var(--vz, 1))); }
.banner-wrapper .sel-box .sel-label { transform: translateX(-50%) scale(calc(1 / var(--vz, 1))); transform-origin: bottom center; }
.banner-wrapper .sel-box { border-width: calc(1.5px / var(--vz, 1)); }

.hint-touch { display: none; }
@media (pointer: coarse) {
  .hint-touch { display: inline; }
  .hint-mouse { display: none; }
  /* крестовина на сенсорных не нужна — двигают пальцем; остаются быстрые места и ползунки */
  .pult-dpad { display: none !important; }
  .pult-quick { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; flex: 1 1 100%; }
  .zoom-btn { min-width: 42px; height: 40px; }
}
/* Во весь экран на телефоне: только баннер и «Готово»; подсказка повернуть телефон */
@media (max-width: 991px) {
  #bannerPreviewCard.editor-open .ed-tb-texts,
  #bannerPreviewCard.editor-open .ed-tb-hint,
  #bannerPreviewCard.editor-open .ed-logo-group,
  #bannerPreviewCard.editor-open .ed-tb-row .ed-tb-group:nth-of-type(2) { display: none !important; }
  #bannerPreviewCard.editor-open .banner-stage { padding: 16px 10px 54px !important; }
}
@media (max-width: 991px) and (orientation: portrait) {
  #bannerPreviewCard.editor-open .ed-toolbar::after {
    content: '📱↻ Поверните телефон горизонтально — баннер станет крупнее';
    display: block; font-size: 12px; color: #cbd5e1; text-align: center; padding: 2px 0;
  }
}

/* Способы оплаты: значки СБП и карты */
.pm-logo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 64px; min-width: 64px; height: 50px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  font-size: 10.5px; font-weight: 800; color: #0f172a; padding: 2px;
}
.pm-logo svg { display: block; }
.pay-method-card .pay-method-icon.pm-logo { background: #fff !important; }
/* Кнопки масштаба — полосой над баннером, не поверх него (иначе перехватывают касания) */
.zoom-ctl { top: 6px !important; bottom: auto !important; right: 8px; }
.editor-slot .banner-stage { padding-top: 50px !important; }
#bannerPreviewCard.editor-open .banner-stage { padding-top: 54px !important; }
@media (pointer: coarse) { .editor-slot .banner-stage { padding-top: 54px !important; } }

/* Телефон: баннер в шаге «Макет» от края до края экрана — область для пальцев крупнее */
@media (max-width: 767px) {
  #stepPane3 .editor-slot { width: 100vw; margin-left: calc(50% - 50vw); }
  #stepPane3 .editor-slot .preview-card { border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; }
  #stepPane3 .editor-slot .banner-stage { border-radius: 0 !important; padding: 50px 6px 8px !important; }
  #stepPane3 .editor-slot .zoom-ctl { top: 6px !important; }
}
/* Недоступная СБП: значок остаётся чётким, бледнеет только подпись */
.pay-method-card.pm-disabled { opacity: 1; }
.pay-method-card.pm-disabled .pay-method-text, .pay-method-card.pm-disabled input { opacity: 0.55; }
.pay-method-card.pm-disabled .pm-logo { filter: grayscale(0.35); opacity: 0.8; }
/* Телефон боком, «во весь экран»: баннер на всю высоту, кнопки масштаба — в верхней строке */
@media (max-height: 520px) {
  #bannerPreviewCard.editor-open { padding: 6px 10px !important; gap: 4px !important; }
  #bannerPreviewCard.editor-open .ed-tb-title { display: none; }
  #bannerPreviewCard.editor-open .ed-btn { padding: 4px 10px; min-height: 34px; }
  #bannerPreviewCard.editor-open .banner-stage { padding: 6px !important; }
  #bannerPreviewCard.editor-open .zoom-ctl { position: fixed; top: 6px !important; right: 112px; z-index: 20001; }
  #bannerPreviewCard.editor-open .zoom-btn { height: 34px; min-width: 38px; }
  #bannerPreviewCard.editor-open .banner-info-bar { display: none !important; }
}
/* Прокрутка к полю не прячет его под закреплённым макетом — на любой ширине (--sticky-h считает app.js) */
html { scroll-padding-top: calc(var(--sticky-h, 0px) + 12px); }

/* ============================================================
   7.4: заметнее заголовки, пульт без крестовины, шаг «Тираж»
   ============================================================ */
.mk-title {
  font-size: 15px; font-weight: 900; color: #0f172a; letter-spacing: 0.3px;
  border-left: 4px solid #2563eb; padding-left: 9px; line-height: 1.25; margin-bottom: 10px;
}
.pult-tab { font-size: 14px; color: #0f172a; border-width: 2px; }
.pult-tab:not(.active):hover { border-color: #2563eb; color: #1d4ed8; background: #eff6ff; }
.pult-panel > label, .pult-sub { display: block; font-size: 15px; font-weight: 900; color: #0f172a; margin-bottom: 7px; }
.pult-sub { margin-top: 14px; }
.pult-sub-first { margin-top: 0; }
.pult-row > span { font-size: 13.5px; font-weight: 800; color: #0f172a; }
.pult-row > b { font-size: 13px; font-weight: 800; color: #1d4ed8; }
.pult-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pult-qbtn { min-height: 42px; font-size: 13.5px; font-weight: 800; border: 1.5px solid #cbd5e1; }
.pult.no-item .pult-place, .pult.no-item .pult-ctrl .pult-sliders, .pult.no-item .pult-ctrl .pult-sub { opacity: 0.4; pointer-events: none; }
@media (max-width: 767px) {
  .pult-tab { font-size: 12.5px; }
}
@media (max-width: 374px) {
  .pult-tab { font-size: 11px; }
  .pult-quick { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .pult-qbtn { font-size: 11.5px; padding: 4px 2px; }
}

.qty-step .qty-control { margin-top: 4px; }
.qty-summary { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 14px; font-size: 14px; color: #334155; }
.qty-summary b { font-size: 17px; color: #0f172a; }
.delivery-soon-note { color: #b45309; font-weight: 600; }

/* Шаг «Контакты»: две отдельные галочки — политика и согласие на ПДн */
.consent-list { margin: 14px 0; font-size: 12.5px; color: #334155; line-height: 1.5; background: #f8fafc; border: 1.5px solid #cbd5e1; border-radius: 8px; padding: 10px 14px; }
.consent-item { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-weight: 500; padding: 6px 0; }
.consent-item + .consent-item { border-top: 1px dashed #cbd5e1; }
.consent-item input { margin-top: 2px; width: 20px; height: 20px; accent-color: #005bff; flex-shrink: 0; cursor: pointer; }
.consent-item a { color: #005bff; font-weight: 700; text-decoration: underline; }
.consent-optional span { color: #475569; }
.consent-optional i { color: #64748b; font-style: normal; font-size: 12px; }

/* Цена на телефоне — только на шаге «Оплата» */
body:not(.wz-step-7) #mobileBottomBar .mobile-price-badge { display: none !important; }
body:not(.wz-step-7) .mobile-nav-buttons { flex: 1 1 auto; width: 100%; }
body:not(.wz-step-7) .mobile-nav-buttons .mobile-btn-next { flex: 1 1 auto; }
.receipt-email-note { margin: 4px 0 12px; color: #047857; font-weight: 600; }

/* Шаг «Оплата»: утверждение макета */
.layout-approval { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 14px; padding: 12px 14px; border: 2px solid #f59e0b; background: #fffbeb; border-radius: 10px; font-size: 13px; line-height: 1.5; color: #334155; cursor: pointer; }
.layout-approval input { width: 22px; height: 22px; margin-top: 1px; flex-shrink: 0; accent-color: #16a34a; cursor: pointer; }
.layout-approval b { color: #0f172a; }
.layout-approval.ok { border-color: #22c55e; background: #f0fdf4; }

/* Подписка на заказ в MAX (после оплаты) */
.max-sub-box { background: #f5f3ff; border: 2px solid #7c3aed; border-radius: 12px; padding: 20px 16px; text-align: center; margin-top: 14px; }
.max-sub-box h3 { color: #0f172a; font-size: 18px; margin: 0 0 8px; font-weight: 800; }
.max-sub-box p { font-size: 13.5px; color: #475569; margin: 0 0 14px; line-height: 1.5; }
.max-sub-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 26px; background: #7c3aed; color: #fff !important; border-radius: 10px; font-weight: 800; font-size: 16px; text-decoration: none; box-shadow: 0 4px 14px rgba(124,58,237,.3); }
.max-sub-btn:hover { background: #6d28d9; }
.max-sub-note { font-size: 12px; color: #64748b; margin-top: 12px; line-height: 1.5; }
.max-sub-note code { background: #ede9fe; padding: 2px 6px; border-radius: 4px; font-size: 12px; user-select: all; word-break: break-all; }
.max-sub-done { background: #f0fdf4; border-color: #16a34a; }
.max-sub-done p { margin-bottom: 0; }

/* Обратная связь */
.feedback-open-btn { background: #d90429; border: none; color: #fff; border-radius: 10px; padding: 11px 16px; font-weight: 800; font-size: 14.5px; cursor: pointer; min-height: 44px; box-shadow: 0 6px 18px rgba(217,4,41,.35); }
.feedback-open-btn:hover { background: #b80322; }
.feedback-window { position: relative; max-width: 520px; padding: 22px 18px 18px; text-align: left; }
.feedback-window h3 { font-size: 19px; font-weight: 800; color: #0f172a; margin: 0 0 6px; padding-right: 30px; }
.feedback-lead { font-size: 13.5px; color: #64748b; margin: 0 0 12px; }
.feedback-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: none; background: #f1f5f9; border-radius: 50%; font-size: 15px; cursor: pointer; color: #334155; }
.feedback-types { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.feedback-types label { display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border: 1px solid #cbd5e1; border-radius: 20px; font-size: 13px; cursor: pointer; min-height: 36px; }
.feedback-types label:has(input:checked) { border-color: #0f172a; background: #0f172a; color: #fff; }
.feedback-types input { accent-color: #be3726; }
#feedbackForm textarea, #feedbackForm input[type="text"] { width: 100%; box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 12px; font-size: 16px; font-family: inherit; }
#feedbackForm textarea { resize: vertical; min-height: 110px; margin-bottom: 8px; }
.feedback-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 560px) { .feedback-row { grid-template-columns: 1fr; } }
.feedback-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: #475569; margin-top: 10px; line-height: 1.4; cursor: pointer; }
.feedback-consent input { margin-top: 2px; width: 18px; height: 18px; flex-shrink: 0; }
.feedback-error { color: #b91c1c; font-size: 13px; min-height: 18px; margin: 8px 0 4px; }
.feedback-submit { width: 100%; min-height: 48px; background: #be3726; color: #fff; border: none; border-radius: 10px; font-weight: 800; font-size: 16px; cursor: pointer; }
.feedback-submit:disabled { opacity: .6; cursor: default; }
.feedback-done { text-align: center; padding: 10px 0; }
.feedback-done p { color: #475569; font-size: 14px; margin: 0 0 14px; }
.feedback-after-pay { display: block; width: 100%; margin-top: 12px; background: #fff; border: 1px dashed #94a3b8; border-radius: 10px; padding: 12px; font-size: 14px; font-weight: 700; color: #334155; cursor: pointer; min-height: 48px; }
.feedback-after-pay:hover { border-color: #0f172a; color: #0f172a; }
#feedbackModal { z-index: 5000; }

/* Подписка MAX до оплаты: зачем бот */
.max-sub-tag { display: inline-block; background: #7c3aed; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; margin-bottom: 8px; }
.max-sub-steps { list-style: none; padding: 0; margin: 0 auto 14px; display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; text-align: left; font-size: 13.5px; color: #334155; }
@media (max-width: 480px) { .max-sub-steps { grid-template-columns: 1fr; } }

/* Плавающая кнопка обратной связи */
.fb-fab-wrap { position: fixed; right: 18px; bottom: 18px; z-index: 9990; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; }
.fb-fab-wrap > * { pointer-events: auto; }
.fb-fab { display: inline-flex; align-items: center; gap: 9px; background: #d90429; color: #fff; border: none; border-radius: 30px; padding: 12px 20px 12px 16px; min-height: 52px; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 26px rgba(217,4,41,.38), 0 2px 6px rgba(15,23,42,.18); transition: transform .15s, background .15s; }
.fb-fab:hover { background: #b80322; transform: translateY(-2px); }
.fb-fab:focus-visible { outline: 3px solid #fde047; outline-offset: 2px; }
.fb-bubble { position: relative; max-width: 270px; background: #fff; color: #0f172a; border-radius: 16px 16px 4px 16px; padding: 12px 34px 12px 14px; font-size: 13.5px; line-height: 1.45; box-shadow: 0 12px 30px rgba(15,23,42,.22); border: 1px solid #e2e8f0; animation: fbBubbleIn .35s ease-out; }
.fb-bubble-text { cursor: pointer; }
.fb-bubble-close { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: none; background: #f1f5f9; border-radius: 50%; color: #64748b; font-size: 12px; cursor: pointer; }
@keyframes fbBubbleIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fb-bubble { animation: none; } .fb-fab { transition: none; } }
/* телефон: круглая кнопка над нижней панелью заказа */
@media (max-width: 900px) {
  .fb-fab-wrap { right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); }
  .fb-fab { width: 54px; height: 54px; padding: 0; justify-content: center; border-radius: 50%; }
  .fb-fab-label { display: none; }
  .fb-bubble { max-width: 230px; font-size: 13px; }
}
/* окно обратной связи открыто — кнопку прячем */
body.fb-open .fb-fab-wrap { display: none; }

/* Договор-оферта на шаге оплаты */
.offer-note { font-size: 12.5px; color: #64748b; margin: 8px 0 0; line-height: 1.45; }
.offer-note a, .layout-approval a { color: #be3726; text-decoration: underline; }

/* Телефон: плашка cookie — над нижней панелью заказа, не закрывает «Оплатить» */
@media (max-width: 900px) {
  .cookie-notice-banner { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
.layout-approval.field-shake-error { border-color: #dc2626; background: #fef2f2; box-shadow: 0 0 0 4px rgba(220,38,38,.18); }