/* =========================================================
   MIREORA ORDER FORMS — FINAL SPACING & ALIGNMENT PASS
   Loaded last. Establishes one spacing rhythm for every order form,
   product configurator and responsive breakpoint.
   ========================================================= */
:root{
  --order-gap:1.25rem;
  --order-pad:1.35rem;
  --order-pad-small:1rem;
  --order-radius:1.35rem;
  --order-line:rgba(195,179,255,.17);
  --order-surface:linear-gradient(145deg,rgba(28,21,44,.82),rgba(9,8,13,.94));
  --order-control:rgba(7,6,10,.62);
}

/* Keep large modal headings inside their panels at every width. */
.dialog-copy{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  padding:clamp(1.5rem,3vw,2.5rem)!important;
}
.dialog-copy h2{
  width:min(100%,14ch)!important;
  max-width:100%!important;
  margin:1.1rem 0 0!important;
  padding:0!important;
  overflow:visible!important;
  
  line-height:.98!important;
  letter-spacing:-.04em!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
  text-wrap:balance!important;
}
.dialog-copy h2 em{display:inline!important}
.dialog-copy>p:last-child{margin:1.15rem 0 0!important}

/* One vertical rhythm between every major form block. */
.order-step.is-active{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:var(--order-gap)!important;
}
.order-step.is-active>*{min-width:0!important;margin-block:0!important}
.selected-order,
.product-configurator,
.form-section,
.choice-actions,
.submit-panel{box-sizing:border-box!important;width:100%!important}

/* Product configurator: one full-width section per characteristic. */
.product-configurator{
  padding:var(--order-pad)!important;
}
.configurator-showcase{
  gap:var(--order-gap)!important;
  margin:0 0 var(--order-gap)!important;
}
.configurator-fields-heading{
  align-items:flex-start!important;
  padding:1.25rem .15rem 1rem!important;
}
.configurator-fields-heading h4{
  line-height:1.08!important;
  text-wrap:balance!important;
}
.configurator-fields{
  grid-template-columns:minmax(0,1fr)!important;
  gap:var(--order-gap)!important;
  margin:0!important;
}
.config-field,
.config-field.is-wide,
.config-text-field,
.config-field-phone{
  grid-column:1/-1!important;
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:var(--order-pad)!important;
  overflow:hidden!important;
  border:1px solid var(--order-line)!important;
  border-radius:var(--order-radius)!important;
  background:var(--order-surface)!important;
}
.config-field-top,
.config-text-field>.config-field-top{
  box-sizing:border-box!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:.55rem!important;
  margin:0 0 1rem!important;
  padding:0 0 .95rem!important;
  border-bottom:1px solid var(--order-line)!important;
  background:transparent!important;
}
.config-field-top>span:first-child{
  margin:0!important;
  color:#9b8fa7!important;
}
.config-field-label{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:.45rem!important;
  width:100%!important;
  margin:0!important;
  color:#f4eff9!important;
  text-align:left!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}
.config-field-label small{
  flex:0 0 auto!important;
  margin:0!important;
  white-space:nowrap!important;
}

/* Predictable option grids: no lonely, randomly positioned cards. */
.modern-options{
  width:100%!important;
  min-width:0!important;
  gap:.75rem!important;
}
.modern-options.is-cards,
.modern-options.is-pills{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.modern-options.is-cards.options-count-1,
.modern-options.is-pills.options-count-1{grid-template-columns:minmax(0,1fr)!important}
.modern-options.is-cards.options-count-3,
.modern-options.is-pills.options-count-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.modern-options.is-cards.options-count-4,
.modern-options.is-pills.options-count-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.modern-options.is-pills.options-count-5{grid-template-columns:repeat(5,minmax(0,1fr))!important}
.modern-options.is-pills.options-count-6{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.modern-options.is-pills.options-count-7,
.modern-options.is-pills.options-count-8{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.modern-options.is-pills.options-count-9{grid-template-columns:repeat(5,minmax(0,1fr))!important}

.modern-option{
  box-sizing:border-box!important;
  min-width:0!important;
  min-height:5.15rem!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 1.75rem!important;
  align-items:center!important;
  gap:1rem!important;
  padding:1rem!important;
  border-radius:1rem!important;
  background:var(--order-control)!important;
}
.modern-options.is-pills .modern-option{min-height:4.25rem!important}
.option-copy{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:.35rem!important;
}
.modern-option strong,
.option-meta,
.option-price{
  max-width:100%!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}
.modern-option strong{line-height:1.35!important}
.option-meta{line-height:1.4!important}
.option-price{
  display:inline-flex!important;
  align-items:center!important;
  min-height:1.7rem!important;
  margin-top:.1rem!important;
  padding:.25rem .55rem!important;
  border-radius:.55rem!important;
  background:rgba(139,92,246,.17)!important;
  color:#d7c9ff!important;
}
.option-check{
  align-self:center!important;
  justify-self:end!important;
  margin:0!important;
}

/* Colour, phone and text controls follow the same padding. */
.modern-options.is-colors{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(4.6rem,4.6rem))!important;
  gap:.75rem!important;
}
.phone-picker{gap:1rem!important}
.phone-brand-tabs,
.phone-model-grid{gap:.75rem!important}
.phone-model-grid{padding:0!important}
.phone-brand,
.phone-model{
  box-sizing:border-box!important;
  padding:.85rem 1rem!important;
}
.config-text-field input,
.modern-field input,
.modern-field textarea,
.modern-field select{
  box-sizing:border-box!important;
  width:100%!important;
  margin:0!important;
  padding:.9rem 1rem!important;
}

/* Customer-data forms use the exact same rhythm as configurator fields. */
.form-section{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:var(--order-gap)!important;
  padding:var(--order-pad)!important;
}
.form-section-head{
  margin:0!important;
  padding:0 0 1rem!important;
}
.form-section-head h3,
.form-section-head p{margin-inline:0!important}
.modern-field-group{margin:0!important}
.modern-field-label,
.modern-field>span{
  margin:0 0 .65rem!important;
  line-height:1.35!important;
}
.occasion-options{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:.75rem!important;
}
.occasion-pill{
  min-height:3.25rem!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:.75rem 1rem!important;
  text-align:center!important;
}
.contact-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:var(--order-gap)!important;
}
.modern-field{min-width:0!important;margin:0!important}
.field-wide{grid-column:1/-1!important}
.upload-card{
  box-sizing:border-box!important;
  width:100%!important;
  margin:0!important;
  padding:1.15rem!important;
  gap:1rem!important;
}
.product-details{margin-top:var(--order-gap)!important}
.configurator-validation{margin:var(--order-gap) 0 0!important}

/* Sticky action areas align with all cards instead of touching their edges. */
.choice-actions,
.submit-panel{
  gap:1rem!important;
  padding:1rem var(--order-pad)!important;
}

@media (max-width:64rem){
  :root{--order-gap:1rem;--order-pad:1.1rem}
  .modern-options.is-pills.options-count-5,
  .modern-options.is-pills.options-count-9{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .modern-options.is-pills.options-count-7,
  .modern-options.is-pills.options-count-8{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .occasion-options{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media (max-width:760px){
  :root{--order-gap:.8rem;--order-pad:.85rem}
  .order-step.is-active{gap:.8rem!important}
  .dialog-copy{padding:1.35rem 1.05rem!important}
  .dialog-copy h2{
    width:100%!important;
    
    line-height:1!important;
  }
  .product-configurator,
  .form-section{padding:var(--order-pad)!important}
  .configurator-fields-heading{padding:1rem .1rem .75rem!important}
  .config-field,
  .config-field.is-wide,
  .config-text-field,
  .config-field-phone{padding:.9rem!important}
  .modern-options.is-cards,
  .modern-options.is-pills,
  .modern-options.is-cards[class*="options-count-"],
  .modern-options.is-pills[class*="options-count-"]{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .modern-options.is-cards.options-count-1,
  .modern-options.is-pills.options-count-1{grid-template-columns:1fr!important}
  .modern-option{
    min-height:4.6rem!important;
    padding:.8rem!important;
    gap:.7rem!important;
  }
  .modern-option strong{}
  .option-meta{}
  .contact-grid{grid-template-columns:1fr!important}
  .field-wide{grid-column:1!important}
  .occasion-options{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .upload-card{grid-template-columns:auto minmax(0,1fr)!important;padding:1rem!important}
}

@media (max-width:430px){
  :root{--order-gap:.7rem;--order-pad:.75rem}
  .modern-options.is-cards,
  .modern-options.is-pills,
  .modern-options.is-cards[class*="options-count-"],
  .modern-options.is-pills[class*="options-count-"],
  .phone-model-grid,
  .occasion-options{grid-template-columns:1fr!important}
  .modern-option{min-height:4.15rem!important}
  .upload-card{grid-template-columns:1fr!important;text-align:center!important}
  .upload-action{grid-column:1!important;justify-self:center!important}
}

/* Keep the configurator section heading in one predictable left-aligned stack. */
.configurator-fields-heading{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:.55rem!important;
}
.configurator-fields-heading h4{margin:0!important;text-align:left!important}

/* =========================================================
   PRICE / ACTION RECOMPOSITION
   Removes the detached preliminary-price card, lets the product
   presentation occupy the complete showcase and places the live price
   directly beside the application button.
   ========================================================= */
.configurator-showcase{
  grid-template-columns:minmax(15rem,31%) minmax(0,1fr)!important;
  gap:var(--order-gap)!important;
}
.configurator-intro{
  position:relative!important;
  isolation:isolate;
  overflow:hidden;
  min-height:19rem;
  justify-content:center!important;
  padding:clamp(1.55rem,3vw,2.65rem)!important;
  border:1px solid rgba(196,179,255,.15);
  border-radius:1.45rem;
  background:
    linear-gradient(110deg,rgba(25,18,42,.91),rgba(9,8,14,.86)),
    rgba(9,8,13,.76);
}
.configurator-intro::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0;
  opacity:.36;
  background-image:
    linear-gradient(rgba(192,174,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(192,174,255,.07) 1px,transparent 1px);
  background-size:3rem 3rem;
  mask-image:linear-gradient(90deg,transparent 0%,#000 40%,#000 100%);
}
.configurator-intro::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:25rem;
  aspect-ratio:1;
  right:-8rem;
  bottom:-13rem;
  border:1px solid rgba(194,174,255,.16);
  border-radius:50%;
  box-shadow:
    0 0 0 3.5rem rgba(154,111,244,.035),
    0 0 0 7rem rgba(154,111,244,.022),
    0 0 5rem rgba(116,73,217,.13);
}
.configurator-intro>*{position:relative;z-index:1}
.configurator-intro h3{max-width:16ch!important}
.configurator-summary,.configurator-note{max-width:48rem!important}
.configurator-decoration{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin-top:1.35rem;
}
.configurator-decoration span{
  display:block;
  height:1px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(183,157,255,.82),rgba(183,157,255,.08));
}
.configurator-decoration span:nth-child(1){width:4.5rem}
.configurator-decoration span:nth-child(2){width:1.5rem;opacity:.65}
.configurator-decoration span:nth-child(3){width:.45rem;height:.45rem;border:1px solid rgba(190,167,255,.5);background:rgba(145,96,245,.22)}

.submit-panel{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
}
.submit-panel-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.25rem;
}
.submit-panel-action{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.8rem;
}
.submit-price{
  min-width:7.6rem;
  min-height:3.25rem;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:.12rem;
  padding:.55rem .85rem;
  border:1px solid rgba(196,179,255,.19);
  border-radius:1rem;
  background:rgba(9,7,14,.58);
  box-shadow:inset 0 1px rgba(255,255,255,.035);
}
.submit-price small{
  color:#93899e;
  font-family:var(--sans);
  
  font-weight:700;
  line-height:1;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.submit-price strong{
  color:#f8f3ff;
  font-family:var(--serif);
  
  font-weight:400;
  line-height:1!important;
}
.submit-panel-action .button{
  min-width:12.5rem!important;
  min-height:3.65rem;
}

@media (max-width:64rem){
  .configurator-showcase{grid-template-columns:minmax(12rem,30%) minmax(0,1fr)!important}
  .configurator-intro{min-height:16rem;padding:1.5rem!important}
}
@media (max-width:760px){
  .configurator-showcase{grid-template-columns:1fr!important}
  .configurator-intro{min-height:0;padding:1.2rem 1rem!important}
  .submit-panel{grid-template-columns:1fr!important;gap:.85rem!important}
  .submit-panel-copy{align-items:center;text-align:center}
  .submit-panel-action{width:100%;justify-content:stretch}
  .submit-price{flex:0 0 auto;min-width:6.8rem;align-items:flex-start}
  .submit-panel-action .button{flex:1 1 auto;width:auto!important;min-width:0!important}
}
@media (max-width:430px){
  .submit-panel-action{display:grid;grid-template-columns:1fr!important}
  .submit-price{width:100%;box-sizing:border-box;align-items:center}
  .submit-panel-action .button{width:100%!important}
}

/* Protect the horizontal price + CTA composition from older generic panel rules. */
.submit-panel-action{
  flex-direction:row!important;
  min-width:0!important;
}
.submit-panel-copy{flex-direction:column!important}
@media (max-width:430px){
  .submit-panel-action{display:grid!important;flex-direction:initial!important}
}

/* Choice status: keep the confirmation and price as two clearly separated groups. */
.choice-status{
  display:grid!important;
  grid-template-columns:minmax(0,auto) auto!important;
  align-items:center!important;
  column-gap:24px!important;
}
.choice-status>p{
  position:relative;
  padding-right:24px!important;
  white-space:nowrap;
}
.choice-status>p::after{
  content:"";
  position:absolute;
  top:50%;
  right:0;
  width:1px;
  height:22px;
  transform:translateY(-50%);
  background:rgba(255,255,255,.11);
}
.choice-price{
  display:grid!important;
  grid-template-columns:auto auto!important;
  align-items:center!important;
  column-gap:10px!important;
  min-height:32px;
}
.choice-price small,
.choice-price strong{
  display:block;
  margin:0!important;
  padding:0!important;
}
.choice-price small{
  line-height:1.25!important;
  white-space:nowrap;
}
.choice-price strong{
  font-size:22px!important;
  line-height:1!important;
  white-space:nowrap;
  transform:none!important;
}

@media (max-width:760px){
  .choice-status{
    grid-template-columns:1fr!important;
    row-gap:10px!important;
  }
  .choice-status>p{
    padding-right:0!important;
    white-space:normal;
  }
  .choice-status>p::after{display:none}
  .choice-price{
    justify-content:start!important;
  }
}