/* MK Detailing V157 - Mini mobile flow + modal zapytania */

/* Publiczna strona: Mini ma być jednym z najmocniejszych elementów mobile. */
@media (max-width:780px){
  .mini-detailer-banner-inner{
    padding:26px 18px 28px!important;
    gap:18px!important;
  }
  .mini-detailer-banner-copy{
    grid-template-columns:138px minmax(0,1fr)!important;
    gap:16px!important;
    align-items:center!important;
  }
  .mini-detailer-banner-mark{
    width:138px!important;
    height:138px!important;
    flex-basis:138px!important;
    border-radius:26px!important;
    box-shadow:0 18px 44px rgba(239,9,23,.20)!important;
  }
  .mini-detailer-banner-copy p{font-size:.76rem!important;letter-spacing:.18em!important}
  .mini-detailer-banner-copy h2{font-size:1.55rem!important;line-height:1.02!important}
  .mini-detailer-banner-copy small{font-size:.92rem!important;line-height:1.42!important}
  .mini-detailer-banner .button{
    width:100%!important;
    max-width:none!important;
    min-height:62px!important;
    font-size:1.08rem!important;
    border-radius:18px!important;
  }
  /* Na telefonie pływający avatar dublował duży moduł Mini i nachodził na CTA. */
  .mini-detailer-floating{display:none!important}
}

@media (max-width:430px){
  .mini-detailer-banner-copy{grid-template-columns:124px minmax(0,1fr)!important;gap:14px!important}
  .mini-detailer-banner-mark{width:124px!important;height:124px!important;flex-basis:124px!important}
  .mini-detailer-banner-copy h2{font-size:1.42rem!important}
  .mini-detailer-banner-copy small{font-size:.86rem!important}
}

/* Kreator: pełna postać tylko na wejściu. Kolejne kroki mają kompaktowy pasek doradcy,
   żeby pytanie było od razu na ekranie, bez przewijania przez ten sam duży avatar. */
@media (max-width:900px){
  .mini-detailer-overlay[data-step="0"] .md-visual{
    min-height:440px!important;
    height:auto!important;
    max-height:none!important;
  }
  .mini-detailer-overlay[data-step="0"] .md-visual img{
    width:min(100%,440px)!important;
    max-height:430px!important;
  }

  .mini-detailer-overlay:not([data-step="0"]) .md-step{
    gap:14px!important;
  }
  .mini-detailer-overlay:not([data-step="0"]) .md-visual{
    min-height:112px!important;
    height:auto!important;
    max-height:none!important;
    display:block!important;
    padding:12px 12px 12px 108px!important;
    border-radius:20px!important;
    overflow:hidden!important;
    background:linear-gradient(135deg,rgba(255,28,45,.10),#0d0e14 62%)!important;
  }
  .mini-detailer-overlay:not([data-step="0"]) .md-visual:before{display:none!important}
  .mini-detailer-overlay:not([data-step="0"]) .md-character-name{display:none!important}
  .mini-detailer-overlay:not([data-step="0"]) .md-visual img{
    position:absolute!important;
    z-index:2!important;
    left:12px!important;
    top:12px!important;
    width:84px!important;
    height:88px!important;
    max-height:88px!important;
    object-fit:cover!important;
    object-position:center 18%!important;
    border-radius:16px!important;
    filter:none!important;
  }
  .mini-detailer-overlay:not([data-step="0"]) .md-speech{
    position:relative!important;
    z-index:3!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    min-height:88px!important;
    margin:0!important;
    padding:12px 13px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    border-radius:14px!important;
    box-shadow:none!important;
  }
  .mini-detailer-overlay:not([data-step="0"]) .md-speech-label{
    margin-bottom:4px!important;
    font-size:.64rem!important;
  }
  .mini-detailer-overlay:not([data-step="0"]) .md-speech p{
    font-size:.9rem!important;
    line-height:1.38!important;
  }
  .mini-detailer-overlay:not([data-step="0"]) .md-panel{
    padding-top:2px!important;
  }
  .mini-detailer-overlay:not([data-step="0"]) .md-title{
    font-size:clamp(2.25rem,11vw,3.25rem)!important;
  }
  .mini-detailer-overlay:not([data-step="0"]) .md-lead{
    margin-top:8px!important;
    font-size:.96rem!important;
  }

  /* Kliknięcia mają być stabilne: brak sztucznych przeskoków/focus-scroll. */
  .md-choice,.md-rec-select{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
}

@media (max-width:430px){
  .mini-detailer-overlay:not([data-step="0"]) .md-visual{
    min-height:104px!important;
    padding:10px 10px 10px 98px!important;
  }
  .mini-detailer-overlay:not([data-step="0"]) .md-visual img{
    left:10px!important;top:10px!important;width:76px!important;height:82px!important;max-height:82px!important;
  }
  .mini-detailer-overlay:not([data-step="0"]) .md-speech{min-height:82px!important;padding:10px 11px!important}
  .mini-detailer-overlay:not([data-step="0"]) .md-speech p{font-size:.84rem!important}
}

/* Po wyborze wariantu z Mini formularz otwiera się jako osobne okno. */
html.mini-booking-lock,body.mini-booking-lock{overflow:hidden!important}
.mini-booking-overlay{
  position:fixed;inset:0;z-index:10030;display:none;
  background:rgba(3,3,7,.94);backdrop-filter:blur(18px);
  padding:22px;color:#fff;
}
.mini-booking-overlay.is-open{display:grid;place-items:center}
.mini-booking-shell{
  width:min(940px,100%);max-height:calc(100dvh - 44px);
  display:grid;grid-template-rows:auto minmax(0,1fr);
  border:1px solid rgba(255,255,255,.09);border-radius:26px;overflow:hidden;
  background:linear-gradient(145deg,#0d0e14,#08090e 72%);
  box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 50px rgba(239,9,23,.07)
}
.mini-booking-header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(90deg,rgba(255,27,45,.10),rgba(255,255,255,.01));
}
.mini-booking-header>div{min-width:0;display:grid;gap:3px}
.mini-booking-header span{color:#ff4c5b;font-size:.66rem;font-weight:950;letter-spacing:.16em}
.mini-booking-header strong{font-size:1.32rem;line-height:1.05}
.mini-booking-header small{color:#9c9ca6;font-size:.75rem;line-height:1.4}
.mini-booking-close{
  flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;
  border-radius:50%;border:1px solid rgba(255,255,255,.12);background:#12131a;color:#fff;
  font-size:1.35rem;cursor:pointer
}
.mini-booking-body{min-height:0;overflow:auto;padding:18px 20px 24px;overscroll-behavior:contain}
.mini-booking-body .booking-form{
  width:100%!important;max-width:none!important;margin:0!important;opacity:1!important;transform:none!important;
  padding:20px!important;box-shadow:none!important;
}
.mini-booking-body .booking-from-mini .booking-selected-services{margin-top:0!important}

@media (max-width:780px){
  .mini-booking-overlay{padding:0!important;background:#08080d!important}
  .mini-booking-overlay.is-open{display:block!important}
  .mini-booking-shell{
    width:100%!important;height:100dvh!important;max-height:100dvh!important;
    border:0!important;border-radius:0!important;
  }
  .mini-booking-header{
    position:sticky;top:0;z-index:8;padding:13px 14px!important;
    background:rgba(8,8,13,.97)!important;backdrop-filter:blur(16px)
  }
  .mini-booking-header span{font-size:.62rem!important}
  .mini-booking-header strong{font-size:1.2rem!important}
  .mini-booking-header small{font-size:.72rem!important;white-space:normal!important}
  .mini-booking-close{width:40px;height:40px;flex-basis:40px}
  .mini-booking-body{padding:12px 12px 28px!important}
  .mini-booking-body .booking-form{padding:14px!important;border-radius:18px!important}
  .mini-booking-body .booking-form>label:first-of-type,
  .mini-booking-body .booking-form .form-row:first-of-type{scroll-margin-top:90px}
}