/* Unified spacing system for every product configurator and order field. */

/* The form intro must end before the actual settings surface begins. */
.order-step-form .compact-dialog-copy{
  margin-bottom:48px!important;
}
.order-step-form .compact-dialog-copy>p:last-child{
  margin-top:24px!important;
}
.order-form-layout{
  align-items:start!important;
  gap:32px!important;
}
.order-form-main{
  display:grid!important;
  gap:24px!important;
  min-width:0!important;
}

/* Configurator: consistent outer rhythm for every selected product. */
.product-configurator{
  padding:24px!important;
  border-radius:24px!important;
}
.configurator-showcase{
  margin:0 0 32px!important;
}
.configurator-fields-heading{
  grid-template-columns:44px minmax(0,1fr)!important;
  align-items:center!important;
  gap:16px!important;
  margin:0!important;
  padding:24px 0!important;
}
.configurator-fields-heading>div{
  display:grid!important;
  align-content:center!important;
  gap:6px!important;
}
.configurator-fields-heading small{
  margin:0!important;
}
.configurator-fields-heading h4{
  margin:0!important;
}
.configurator-fields{
  gap:20px!important;
  padding-top:4px!important;
}

/* Every generated product setting uses the same internal spacing. */
.config-field{
  display:grid!important;
  align-content:start!important;
  gap:18px!important;
  padding:24px!important;
}
.config-field-top{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  margin:0!important;
}
.config-field-top>span:first-child{
  order:initial!important;
  flex:0 0 auto!important;
  margin:0!important;
  text-align:right!important;
}
.config-field-label{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
  margin:0!important;
}
.config-field-label small{
  display:inline-flex!important;
  align-items:center!important;
  min-height:28px!important;
  margin:0!important;
  padding:4px 10px!important;
  border:1px solid rgba(177,145,255,.25)!important;
  border-radius:999px!important;
  background:rgba(139,92,246,.08)!important;
  line-height:1.2!important;
}
.modern-options,
.phone-picker,
.config-text-field{
  margin:0!important;
}
.modern-options{
  gap:12px!important;
}
.phone-picker{
  gap:16px!important;
}
.phone-brand-tabs{
  gap:10px!important;
}
.phone-model-grid{
  gap:10px!important;
}
.modern-option{
  min-height:68px!important;
  padding:14px 16px!important;
}
.config-text-field{
  display:grid!important;
  gap:10px!important;
}

/* Details and validation belong to the configurator, not to the next section. */
.configurator-validation{
  margin:20px 0 0!important;
}
.product-details{
  margin:24px 0 0!important;
}

/* Main order sections: identical spacing regardless of product type. */
#inquiryForm{
  gap:24px!important;
}
.form-section{
  gap:28px!important;
  padding:28px!important;
}
.form-section-head{
  grid-template-columns:44px minmax(0,1fr)!important;
  align-items:center!important;
  gap:16px!important;
  padding:0 0 24px!important;
}
.form-section-head>div{
  display:grid!important;
  align-content:center!important;
  gap:8px!important;
}
.form-section-head h3,
.form-section-head p{
  margin:0!important;
}

/* Labels and required badges: never collide or sit on different baselines. */
.modern-field-group,
.modern-field{
  display:grid!important;
  align-content:start!important;
  gap:12px!important;
  margin:0!important;
}
.modern-field-label,
.modern-field>span{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:10px!important;
  margin:0!important;
}
.modern-field-label small,
.modern-field>span small{
  display:inline-flex!important;
  align-items:center!important;
  min-height:28px!important;
  margin:0!important;
  padding:4px 10px!important;
  border:1px solid rgba(177,145,255,.25)!important;
  border-radius:999px!important;
  background:rgba(139,92,246,.08)!important;
  line-height:1.2!important;
}
.occasion-options{
  gap:12px!important;
  margin:0!important;
}
.occasion-pill{
  min-height:56px!important;
  padding:13px 16px!important;
}
.contact-grid{
  gap:24px 18px!important;
}
.modern-field input,
.modern-field textarea,
.modern-field select,
.config-text-field input{
  margin:0!important;
}
.modern-field textarea{
  min-height:150px!important;
}
.upload-card{
  margin:0!important;
  padding:24px!important;
}
.submit-panel{
  margin-top:0!important;
}

/* Tablet */
@media (max-width:960px){
  .order-step-form .compact-dialog-copy{margin-bottom:40px!important}
  .order-form-layout{gap:24px!important}
  .product-configurator{padding:22px!important}
  .form-section{padding:24px!important}
}

/* Mobile: preserve hierarchy while reducing only container padding. */
@media (max-width:760px){
  .order-step-form .compact-dialog-copy{margin-bottom:32px!important}
  .order-step-form .compact-dialog-copy>p:last-child{margin-top:20px!important}
  .product-configurator{padding:18px!important;border-radius:20px!important}
  .configurator-showcase{margin-bottom:24px!important}
  .configurator-fields-heading,
  .form-section-head{
    grid-template-columns:40px minmax(0,1fr)!important;
    gap:14px!important;
  }
  .form-step-number{width:40px!important;height:40px!important}
  .configurator-fields-heading{padding:20px 0!important}
  .config-field{gap:16px!important;padding:20px!important}
  .config-field-top{align-items:flex-start!important;flex-direction:column!important;gap:8px!important}
  .config-field-top>span:first-child{text-align:left!important}
  .form-section{gap:24px!important;padding:20px!important}
  .form-section-head{align-items:start!important;padding-bottom:20px!important}
  .contact-grid{grid-template-columns:1fr!important;gap:20px!important}
  .occasion-options{gap:10px!important}
  .upload-card{padding:20px!important}
}

@media (max-width:430px){
  .product-configurator{padding:16px!important}
  .config-field,.form-section{padding:18px!important}
  .configurator-fields-heading,
  .form-section-head{grid-template-columns:36px minmax(0,1fr)!important;gap:12px!important}
  .form-step-number{width:36px!important;height:36px!important}
  .modern-field-label,
  .modern-field>span,
  .config-field-label{gap:8px!important}
}

/* =========================================================
   Settings spacing aligned with the "Выбор формата" rhythm.
   The setup step uses the same generous section cadence and
   container breathing room as the product-choice screen.
   ========================================================= */
.order-step-form .compact-dialog-copy{
  margin-bottom:64px!important;
}
.order-form-layout{
  gap:40px!important;
}
.order-form-main{
  gap:32px!important;
}
.product-configurator{
  padding:32px!important;
  border-radius:28px!important;
}
.configurator-showcase{
  margin-bottom:40px!important;
}
.configurator-fields-heading{
  gap:18px!important;
  padding:0 0 28px!important;
  margin:0 0 28px!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important;
}
.configurator-fields{
  gap:24px!important;
  padding-top:0!important;
}
.config-field{
  gap:22px!important;
  padding:28px!important;
  border-radius:22px!important;
}
.config-field-top{
  gap:18px!important;
}
.modern-options,
.phone-picker{
  gap:14px!important;
}
.product-details{
  margin-top:32px!important;
}
#inquiryForm{
  gap:32px!important;
}
.form-section{
  gap:32px!important;
  padding:32px!important;
  border-radius:28px!important;
}
.form-section-head{
  gap:18px!important;
  padding:0 0 28px!important;
  margin:0!important;
}
.modern-field-group,
.modern-field{
  gap:14px!important;
}
.occasion-options{
  gap:14px!important;
}
.contact-grid{
  gap:28px 20px!important;
}
.upload-card{
  padding:28px!important;
}

@media (max-width:960px){
  .order-step-form .compact-dialog-copy{margin-bottom:48px!important}
  .order-form-layout{gap:28px!important}
  .order-form-main,#inquiryForm{gap:28px!important}
  .product-configurator,.form-section{padding:26px!important}
  .config-field{padding:24px!important}
}

@media (max-width:760px){
  .order-step-form .compact-dialog-copy{margin-bottom:40px!important}
  .order-form-layout{gap:24px!important}
  .order-form-main,#inquiryForm{gap:24px!important}
  .product-configurator,.form-section{
    padding:20px!important;
    border-radius:22px!important;
  }
  .configurator-showcase{margin-bottom:28px!important}
  .configurator-fields-heading,
  .form-section-head{
    gap:14px!important;
    padding-bottom:22px!important;
    margin-bottom:22px!important;
  }
  .configurator-fields{gap:18px!important}
  .config-field{
    gap:18px!important;
    padding:20px!important;
    border-radius:18px!important;
  }
  .form-section{gap:26px!important}
  .contact-grid{gap:22px!important}
  .upload-card{padding:20px!important}
}

@media (max-width:430px){
  .order-step-form .compact-dialog-copy{margin-bottom:36px!important}
  .product-configurator,.form-section{padding:18px!important}
  .config-field{padding:18px!important}
  .configurator-fields-heading,
  .form-section-head{margin-bottom:20px!important;padding-bottom:20px!important}
}