/**
 * Plugin Name: DAF Marketplace
 * File Name: archive-toolbar.css
 * Location: /wp-content/plugins/daf-marketplace/assets/front/archive-toolbar.css
 *
 * Purpose:
 * - Styles the archive toolbar shell used below marketplace/archive heroes.
 * - Keeps archive toolbar spacing aligned with the approved marketplace/archive layout.
 * - Forces tablet and mobile toolbar controls to remain in a single horizontal row.
 *
 * Responsibilities:
 * - Control archive toolbar wrapper spacing.
 * - Keep archive toolbar panel premium, compact, and responsive.
 * - Prevent multi-line wrapping on tablet/mobile.
 * - Allow horizontal overflow instead of broken second/third rows.
 * - Hide lower-priority archive toolbar parts on small screens when needed.
 *
 * Related Files:
 * - /wp-content/plugins/daf-marketplace/templates/marketplace/archive-marketplace.php
 * - /wp-content/plugins/daf-marketplace/templates/parts/marketplace-toolbar.php
 * - /wp-content/plugins/daf-marketplace/assets/front/toolbar.css
 *
 * Notes:
 * - This file controls archive-toolbar spacing/system layer only.
 * - Mobile and tablet must stay single-row.
 * - Do not allow second or third control row on small screens.
 */

/* archive toolbar shell */
.hdaf-archive-toolbar{
margin:28px 0 26px
}

.hdaf-archive-toolbar__head{
margin-bottom:18px
}

.hdaf-archive-toolbar__title{
margin:0 0 6px;
color:#0F172A;
font-size:34px;
font-weight:700
}

.hdaf-archive-toolbar__description{
margin:0;
color:#64748B;
font-size:15px
}

/* main panel */
.hdaf-archive-toolbar__panel{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:nowrap;
gap:16px;
padding:16px 18px;
background:#fff;
border:1px solid #E2E8F0;
border-radius:10px;
overflow:hidden
}

.hdaf-archive-toolbar__left{
display:flex;
align-items:center;
gap:16px;
flex:1 1 auto;
min-width:0;
overflow-x:auto;
overflow-y:hidden;
scrollbar-width:none;
white-space:nowrap
}

.hdaf-archive-toolbar__left::-webkit-scrollbar{
display:none
}

.hdaf-archive-toolbar__right{
display:flex;
align-items:center;
gap:14px;
flex:0 0 auto;
min-width:max-content;
margin-left:auto;
white-space:nowrap
}

/* button */
.hdaf-archive-toolbar__filters{
display:inline-flex;
align-items:center;
gap:8px;
flex:0 0 auto;
padding:8px 14px;
background:#2563EB;
border:0;
border-radius:8px;
color:#fff;
font-size:13px;
font-weight:600;
cursor:pointer;
white-space:nowrap
}

.hdaf-archive-toolbar__filters svg{
width:16px;
height:16px
}

/* summary */
.hdaf-archive-toolbar__summary{
display:flex;
flex-direction:column;
flex:0 0 auto;
font-size:13px;
white-space:nowrap
}

.hdaf-archive-toolbar__summary-label{
color:#0F172A;
font-weight:600
}

.hdaf-archive-toolbar__summary-count{
color:#64748B
}

/* controls */
.hdaf-archive-toolbar__views{
display:flex;
align-items:center;
flex:0 0 auto;
border:1px solid #E2E8F0;
border-radius:8px;
overflow:hidden;
white-space:nowrap
}

.hdaf-archive-toolbar__view{
display:flex;
align-items:center;
justify-content:center;
width:36px;
height:34px;
color:#64748B;
background:#fff
}

.hdaf-archive-toolbar__view svg{
width:16px;
height:16px
}

.hdaf-archive-toolbar__view.is-active{
background:#2563EB;
color:#fff
}

.hdaf-archive-toolbar__select{
position:relative;
flex:0 0 auto;
white-space:nowrap
}

.hdaf-archive-toolbar__select select{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
height:36px;
min-width:140px;
max-width:170px;
padding:7px 32px 7px 12px;
background:#fff;
border:1px solid #E2E8F0;
border-radius:8px;
color:#0F172A;
font-size:13px;
white-space:nowrap
}

.hdaf-archive-toolbar__select-icon{
position:absolute;
top:50%;
right:10px;
transform:translateY(-50%);
pointer-events:none;
color:#64748B
}

.hdaf-archive-toolbar__select-icon svg{
width:14px;
height:14px
}

/* tablet */
@media (max-width:1024px){
.hdaf-archive-toolbar{
margin:22px 0 22px
}

.hdaf-archive-toolbar__panel{
gap:10px;
padding:12px
}

.hdaf-archive-toolbar__left{
gap:10px
}

.hdaf-archive-toolbar__right{
gap:8px
}

.hdaf-archive-toolbar__filters{
padding:0 12px;
min-height:38px;
font-size:12px
}

.hdaf-archive-toolbar__select select{
height:38px;
min-width:124px;
max-width:146px;
padding:7px 28px 7px 10px;
font-size:12px
}

.hdaf-archive-toolbar__summary{
display:none
}

.hdaf-archive-toolbar__view{
width:34px;
height:34px
}
}

/* mobile */
@media (max-width:767px){
.hdaf-archive-toolbar{
margin:18px 0 18px
}

.hdaf-archive-toolbar__panel{
gap:8px;
padding:10px;
border-radius:12px
}

.hdaf-archive-toolbar__left{
gap:8px
}

.hdaf-archive-toolbar__right{
gap:6px
}

.hdaf-archive-toolbar__filters{
min-height:36px;
padding:0 10px;
font-size:11px
}

.hdaf-archive-toolbar__filters span:last-child{
display:none
}

.hdaf-archive-toolbar__select select{
height:36px;
min-width:108px;
max-width:126px;
padding:7px 26px 7px 10px;
font-size:11px
}

.hdaf-archive-toolbar__select-icon{
right:8px
}

.hdaf-archive-toolbar__select-icon svg{
width:12px;
height:12px
}

.hdaf-archive-toolbar__view{
width:32px;
height:32px
}
}

/* small mobile: remove low priority controls instead of allowing row break */
@media (max-width:560px){
.hdaf-archive-toolbar__select:nth-of-type(3){
display:none
}

.hdaf-archive-toolbar__select select{
min-width:96px;
max-width:112px
}
}

/* extra small mobile: keep only essential inline controls */
@media (max-width:420px){
.hdaf-archive-toolbar__panel{
gap:6px;
padding:8px
}

.hdaf-archive-toolbar__select:nth-of-type(2),
.hdaf-archive-toolbar__select:nth-of-type(3){
display:none
}

.hdaf-archive-toolbar__filters{
min-height:34px;
padding:0 8px
}

.hdaf-archive-toolbar__view{
width:28px;
height:28px
}
}