/* ================= WRAPPER ================= */

.add-listing-wrapper{
max-width:760px;
margin:40px auto;
padding:0 16px;
font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}

.add-listing-wrapper h1{
font-size:28px;
margin-bottom:28px;
font-weight:600;
}

/* ================= FORM ================= */

.add-listing-form{
max-width:720px;
margin:auto;
}

/* ================= BLOCK ================= */

.listing-block{
margin-bottom:36px;
}

.listing-block h3{
font-size:20px;
margin-bottom:16px;
padding-bottom:6px;
border-bottom:1px solid #eee;
}

.listing-block label{
display:block;
font-weight:600;
margin-bottom:8px;
}

.listing-block small,
.helper-text{
font-size:13px;
color:#666;
}

.helper-text ul{
margin:6px 0 0 18px;
padding:0;
}

/* ================= INPUT ================= */

.listing-block input[type="text"],
.listing-block input[type="number"],
.listing-block select,
.listing-block textarea{
width:100%;
padding:10px 12px;
font-size:15px;
border:1px solid #ccc;
border-radius:6px;
transition:border .15s ease;
}

.listing-block input:focus,
.listing-block select:focus,
.listing-block textarea:focus{
outline:none;
border-color:#7a5cff;
}

/* ================= COUNTER ================= */

.char-counter{
font-size:12px;
color:#666;
margin-top:4px;
}

/* ================= UPLOAD BUTTON ================= */

.upload-btn{
padding:10px 14px;
border:1px dashed #999;
background:#fafafa;
cursor:pointer;
border-radius:6px;
font-size:14px;
}

.upload-btn:hover{
background:#f0f0f0;
}

/* ================= IMAGE PREVIEW ================= */

.image-preview,
.image-preview-grid{
margin-top:12px;
display:flex;
flex-wrap:wrap;
gap:12px;
}

/* one image */

.image-preview img{
width:140px;
height:140px;
object-fit:cover;
border-radius:6px;
}

/* gallery images */

.image-preview-grid img{
width:120px;
height:120px;
object-fit:cover;
border-radius:6px;
}

/* ================= IMAGE ITEM ================= */

.image-item{
position:relative;
display:inline-block;
margin:10px;
}

.image-item img{
width:150px;
height:150px;
object-fit:cover;
border-radius:8px;
cursor:pointer;
}

/* ================= REMOVE IMAGE BUTTON ================= */

.remove-image{
    position:absolute;
    top:4px;
    right:4px;

    width:18px;
    height:18px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none;
    background:#e53935;

    color:#fff;
    font-size:13px;
    font-weight:700;
    line-height:1;

    cursor:pointer;
    padding:0;
}

.remove-image:hover{
    background:#c62828;
}

/* ================= GALLERY GRID ================= */

#gallery-preview{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
gap:12px;
margin-top:12px;
}

#gallery-preview .image-item{
position:relative;
}

#gallery-preview img{
width:100%;
height:120px;
object-fit:cover;
border-radius:8px;
}

/* ================= MAIN IMAGE ================= */

#main-image-preview img{
width:160px;
height:160px;
object-fit:cover;
border-radius:10px;
}

/* ================= ERRORS ================= */

.field-error{
margin-top:6px;
font-size:13px;
color:#d63638;
}

.custom-error{
color:#d63638;
margin-top:8px;
font-size:14px;
}

.acf-error-message{
color:#d63638;
margin-top:8px;
font-size:14px;
}

.form-errors{
background:#c62828;
color:#fff;
padding:12px;
margin-bottom:20px;
border-radius:6px;
font-weight:500;
}

.form-errors.hidden{
display:none;
}

.acf-field.has-error{
border-left:4px solid #c62828;
padding-left:12px;
}

/* ================= ACF ONE COLUMN ================= */

.listing-block .acf-fields{
display:flex;
flex-direction:column;
gap:18px;
}

.listing-block .acf-field{
margin:0 !important;
}
/* ================= MOBILE ================= */

@media(max-width:700px){

.acf-fields{
grid-template-columns:1fr;
}

.image-preview img,
.image-preview-grid img{
width:100px;
height:100px;
}

}

/* ================= ACF LOGIC ================= */

.acf-field-wrap.hidden{
display:none;
}

/* ================= CHECKFRESH LINK ================= */

.checkfresh-link{
display:inline-block;
margin-top:6px;
font-size:14px;
text-decoration:none;
color:#555;
}

.checkfresh-link:hover{
text-decoration:underline;
}

/* ================= DRAG & DROP ================= */
.image-item.dragging{
opacity:0.5;
}