/*
 F24 final layout compatibility.
 Visual/layout only.
*/

/* ===== CHAT ===== */

.f24-messages-panel-card{
  align-items:stretch!important;
}

.f24-chat-thread-pane{
  min-width:0!important;
  min-height:0!important;
  align-self:stretch!important;
}

.f24-chat-message-list{
  min-height:0!important;
  overflow-y:auto!important;
}

@media (min-width:768px){
  .f24-chat-thread-pane{
    height:auto!important;
    min-height:550px!important;
    align-self:stretch!important;
  }

  .f24-chat-message-list{
    flex:1 1 0%!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
  }
}

/* ===== MARKETPLACE GLOBAL ===== */

.f24-market-page{
  width:100%!important;
  max-width:100vw!important;
  overflow-x:hidden!important;
}

.f24-market-header-inner,
.f24-market-main,
.f24-market-category-scroll,
.f24-market-filterbar,
.f24-market-product-grid{
  box-sizing:border-box!important;
  min-width:0!important;
  max-width:100%!important;
}

.f24-market-category-scroll{
  width:100%!important;
  scrollbar-width:none;
}

.f24-market-category-scroll::-webkit-scrollbar{
  display:none;
}

.f24-market-filterbar > *{
  min-width:0!important;
  max-width:100%!important;
}

.f24-market-product-grid{
  width:100%!important;
}

/* ===== MARKET MOBILE/TABLET NAV ===== */

@media (max-width:1023px){
  .f24-market-mobile-nav{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:100!important;

    display:grid!important;
    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr)
      auto
      minmax(0,1fr)!important;

    width:100%!important;
    max-width:100vw!important;

    height:calc(
      4rem + env(safe-area-inset-bottom,0px)
    )!important;

    padding:
      0 .25rem
      env(safe-area-inset-bottom,0px)
      .25rem!important;

    background:rgba(255,255,255,.97)!important;
  }

  .f24-market-mobile-nav > *{
    min-width:0!important;
    max-width:100%!important;
  }

  .f24-global-mobile-nav,
  .f24-market-detail-mobile-nav{
    display:flex!important;
    width:100%!important;
    max-width:100%!important;
  }

  .f24-market-main{
    padding-bottom:
      calc(
        5.5rem +
        env(safe-area-inset-bottom,0px)
      )!important;
  }
}

/* ===== OWNER / CREATE MODALS ===== */

.f24-owner-modal-overlay,
.f24-create-modal-overlay,
.f24-owner-modal-panel,
.f24-create-modal-panel,
.f24-owner-modal-panel *,
.f24-create-modal-panel *{
  box-sizing:border-box!important;
}

.f24-owner-modal-panel,
.f24-create-modal-panel{
  min-width:0!important;
  max-width:100%!important;
}

.f24-owner-modal-panel input,
.f24-owner-modal-panel select,
.f24-owner-modal-panel textarea,
.f24-owner-modal-panel button,
.f24-create-modal-panel input,
.f24-create-modal-panel select,
.f24-create-modal-panel textarea,
.f24-create-modal-panel button{
  min-width:0!important;
  max-width:100%!important;
}

.f24-owner-card-main > *,
.f24-owner-edit-grid > *,
.f24-create-modal-body > *{
  min-width:0!important;
  max-width:100%!important;
}

.f24-owner-card-actions > button,
.f24-owner-card-actions > select{
  min-width:0!important;
  max-width:100%!important;
}

.f24-owner-edit-grid input,
.f24-owner-edit-grid select,
.f24-owner-edit-grid textarea,
.f24-create-modal-body input,
.f24-create-modal-body select,
.f24-create-modal-body textarea{
  width:100%!important;
  max-width:100%!important;
}

.f24-owner-edit-grid input[type="file"],
.f24-create-modal-body input[type="file"]{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
}

/* ===== PHONE 0—479 ===== */

@media (max-width:479px){
  .f24-market-header-inner{
    display:flex!important;
    flex-wrap:wrap!important;

    width:100%!important;
    max-width:100%!important;

    height:auto!important;
    min-height:4rem!important;

    gap:.5rem!important;

    padding:
      .5rem .75rem!important;
  }

  .f24-market-header-inner > a:first-child{
    min-width:0!important;
    max-width:calc(100% - 5rem)!important;

    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  .f24-market-search{
    order:50!important;

    flex:1 0 100%!important;

    width:100%!important;
    min-width:0!important;
    max-width:none!important;

    margin-left:0!important;
  }

  .f24-market-category-scroll{
    width:calc(100% + 1.5rem)!important;
    max-width:none!important;

    margin-left:-.75rem!important;
    margin-right:-.75rem!important;

    padding-left:.75rem!important;
    padding-right:.75rem!important;
  }

  .f24-market-filterbar{
    display:grid!important;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr)!important;

    gap:.5rem!important;

    width:100%!important;
  }

  .f24-market-filterbar > button,
  .f24-market-filterbar > select{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }

  .f24-market-filterbar > button:last-of-type{
    grid-column:1 / -1!important;
  }

  .f24-market-filterbar > span{
    grid-column:1 / -1!important;

    margin-left:0!important;
    text-align:right!important;
  }

  .f24-market-product-grid{
    display:grid!important;

    grid-template-columns:
      minmax(0,1fr)!important;

    gap:.75rem!important;
  }

  .f24-owner-modal-overlay,
  .f24-create-modal-overlay{
    width:100vw!important;
    max-width:100vw!important;

    padding:0!important;

    overflow-x:hidden!important;
  }

  .f24-owner-modal-panel,
  .f24-create-modal-panel{
    width:100vw!important;
    max-width:100vw!important;

    min-height:100dvh!important;
    max-height:100dvh!important;

    margin:0!important;

    border-radius:0!important;

    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  .f24-owner-modal-header,
  .f24-create-modal-header{
    position:sticky!important;
    top:0!important;
    z-index:10!important;

    width:100%!important;

    padding:1rem!important;

    background:white!important;
  }

  .f24-owner-list-grid,
  .f24-owner-edit-grid,
  .f24-create-modal-body{
    display:grid!important;

    grid-template-columns:
      minmax(0,1fr)!important;

    width:100%!important;
  }

  .f24-owner-card-main{
    display:grid!important;

    grid-template-columns:
      4.5rem
      minmax(0,1fr)!important;

    gap:.75rem!important;

    padding:1rem!important;
  }

  .f24-owner-card-main > :first-child{
    width:4.5rem!important;
    height:4.5rem!important;
  }

  .f24-owner-card-actions{
    display:grid!important;

    grid-template-columns:
      minmax(0,1fr)!important;

    gap:.5rem!important;

    padding:
      0 1rem 1rem!important;
  }

  .f24-owner-card-actions > button,
  .f24-owner-card-actions > select{
    display:block!important;

    width:100%!important;
    min-width:0!important;
    max-width:100%!important;

    flex:none!important;
  }

  .f24-owner-edit-titlebar{
    display:grid!important;

    grid-template-columns:
      minmax(0,1fr)!important;

    gap:.5rem!important;
  }

  .f24-owner-edit-titlebar > *{
    min-width:0!important;
    max-width:100%!important;
  }

  .f24-owner-edit-titlebar button{
    width:100%!important;

    white-space:normal!important;
    text-align:left!important;
  }

  .f24-owner-media-grid,
  .f24-create-media-grid{
    display:grid!important;

    grid-template-columns:
      repeat(2,minmax(0,1fr))!important;

    gap:.5rem!important;
  }

  .f24-owner-options,
  .f24-create-options{
    display:grid!important;

    grid-template-columns:
      minmax(0,1fr)!important;

    gap:.5rem!important;
  }

  .f24-owner-options > label,
  .f24-create-options > label{
    width:100%!important;
    min-width:0!important;
  }

  .f24-owner-actions,
  .f24-create-actions{
    position:sticky!important;
    bottom:0!important;
    z-index:10!important;

    display:grid!important;

    grid-template-columns:
      repeat(2,minmax(0,1fr))!important;

    width:100%!important;

    gap:.5rem!important;

    margin:0!important;

    padding:
      .75rem 1rem
      calc(
        .75rem +
        env(safe-area-inset-bottom,0px)
      )
      1rem!important;

    background:white!important;
    border-top:1px solid #e2e8f0!important;
  }
}

/* ===== LARGE PHONE ===== */

@media (min-width:480px) and (max-width:767px){
  .f24-market-product-grid{
    display:grid!important;

    grid-template-columns:
      repeat(2,minmax(0,1fr))!important;

    gap:.75rem!important;
  }

  .f24-market-filterbar{
    flex-wrap:wrap!important;
  }

  .f24-owner-card-actions{
    flex-wrap:wrap!important;
  }

  .f24-owner-card-actions > button,
  .f24-owner-card-actions > select{
    flex:1 1 10rem!important;
  }
}

/* ===== TABLET ===== */

@media (min-width:768px) and (max-width:1023px){
  .f24-market-product-grid{
    display:grid!important;

    grid-template-columns:
      repeat(3,minmax(0,1fr))!important;

    gap:1rem!important;
  }

  .f24-market-filterbar{
    flex-wrap:wrap!important;
  }

  .f24-market-header-inner{
    width:100%!important;
    max-width:100%!important;

    flex-wrap:wrap!important;
  }

  .f24-market-search{
    flex:1 0 100%!important;

    width:100%!important;
    max-width:none!important;

    margin-left:0!important;
  }

  .f24-owner-card-actions{
    flex-wrap:wrap!important;
  }

  .f24-owner-card-actions > button,
  .f24-owner-card-actions > select{
    flex:1 1 10rem!important;
  }
}

/* ===== DESKTOP MARKET GRID ===== */

@media (min-width:1024px) and (max-width:1279px){
  .f24-market-product-grid{
    grid-template-columns:
      repeat(4,minmax(0,1fr))!important;
  }
}

@media (min-width:1280px) and (max-width:1535px){
  .f24-market-product-grid{
    grid-template-columns:
      repeat(5,minmax(0,1fr))!important;
  }
}

@media (min-width:1536px){
  .f24-market-product-grid{
    grid-template-columns:
      repeat(6,minmax(0,1fr))!important;
  }
}