/* Final dark-mode and ordering polish for the v2 Bazar editor. */
@media(max-width:760px){
  html[data-theme="dark"] .modal-wrap:has(#bazarForm){
    align-items:flex-end!important;
    background:rgba(2,10,18,.58)!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
  }
  html[data-theme="dark"] .modal-wrap:has(#bazarForm) .modal{
    height:auto!important;
    min-height:0!important;
    max-height:92dvh!important;
    padding-top:14px!important;
    background:#0d1d2d!important;
    border-radius:28px 28px 0 0!important;
    overflow-y:auto!important;
  }

  /* Dark-theme legacy .modal-title rules were expanding the green title hero.
     Keep Add Bazar's title identical to the compact light-mode sheet. */
  html[data-theme="dark"] .modal-wrap:has(#bazarForm) .final-bazar-modal-title.bazar-v2-title{
    position:sticky!important;
    top:0!important;
    z-index:20!important;
    width:auto!important;
    height:66px!important;
    min-height:66px!important;
    max-height:66px!important;
    margin:-14px -14px 10px!important;
    padding:10px 14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    overflow:hidden!important;
    border-radius:28px 28px 0 0!important;
    background:linear-gradient(135deg,#132a40,#102a2d)!important;
    box-sizing:border-box!important;
  }
  html[data-theme="dark"] .modal-wrap:has(#bazarForm) .final-bazar-modal-title.bazar-v2-title::before,
  html[data-theme="dark"] .modal-wrap:has(#bazarForm) .final-bazar-modal-title.bazar-v2-title::after{
    display:none!important;
    content:none!important;
  }
  html[data-theme="dark"] .modal-wrap:has(#bazarForm) .final-bazar-modal-title.bazar-v2-title h2{
    margin:0!important;
    padding:0!important;
    line-height:1.05!important;
    font-size:22px!important;
  }
  html[data-theme="dark"] .modal-wrap:has(#bazarForm) .final-bazar-modal-title.bazar-v2-title .icon-btn{
    width:42px!important;
    height:42px!important;
    min-height:42px!important;
    flex:0 0 42px!important;
    margin:0!important;
  }
}

/* Keep the native date input tappable, but render one stable one-line label.
   This avoids iOS/Android native date text wrapping in the compact half-width box. */
.modal-wrap:has(#bazarForm) .bazar-v2-date-control{
  position:relative!important;
}
.modal-wrap:has(#bazarForm) .bazar-v2-date-control>input[type="date"]{
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  width:100%!important;
  height:100%!important;
  opacity:0!important;
  cursor:pointer!important;
}
.modal-wrap:has(#bazarForm) .bazar-v2-date-display{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  display:flex!important;
  align-items:center!important;
  padding:0 11px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  color:#173052!important;
  font-size:16px!important;
  line-height:1!important;
  pointer-events:none!important;
}
html[data-theme="dark"] .modal-wrap:has(#bazarForm) .bazar-v2-date-display{
  color:#edf5fd!important;
}