/* ============================================
FORM CONTAINER
============================================ */

.sell-object-page {
    padding: 40px 0;
}

.sell-object-page .container {
    max-width: 900px;
    margin: 0 auto;
}

/* ============================================
PAGE HEADER
============================================ */

.page-header {
    text-align: center;
    margin-bottom: 40px;
}

.page-header h1 {
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.page-header p {
    color: #777;
}

/* ============================================
FORM
============================================ */

.sell-object-form {
    background: #fff;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* ============================================
FORM GROUP
============================================ */

.form-group-section {
    margin-bottom: 40px;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
}

/* ============================================
FORM ROW
============================================ */

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-field.full-width {
    grid-column: 1 / -1;
}

/* ============================================
FIELDS
============================================ */

.form-field {
    display: flex;
    flex-direction: column;
}

.form-field label {
    font-size: 14px;
    margin-bottom: 6px;
}

.form-field input,
.form-field textarea,
.form-field select {

    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;

}

.form-field textarea {
    min-height: 120px;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {

    outline: none;
    border-color: #c89b6a;
}

/* ============================================
FILE UPLOAD
============================================ */

.file-upload-preview img {

    max-width: 200px;
    margin-top: 10px;
    border-radius: 6px;
}

/* ============================================
ERROR
============================================ */

.error-message {

    color: #e11d48;
    font-size: 13px;
    margin-top: 5px;
}

/* ============================================
BUTTON
============================================ */

.form-actions {

    text-align: center;
    margin-top: 30px;
}

.submit-btn {

    background: #c89b6a;
    color: white;
    border: none;
    padding: 14px 40px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

.submit-btn:hover {

    background: #b38755;
}

/* ============================================
MOBILE
============================================ */

@media (max-width: 768px) {

.form-row {
grid-template-columns: 1fr;
}

.sell-object-form {
padding: 25px;
}

}

/* ============================================
DRAG & DROP
============================================ */

.drop-zone{
border:2px dashed #ccc;
padding:40px;
text-align:center;
cursor:pointer;
border-radius:8px;
margin-top:10px;
}

.drop-zone.drag-over{
border-color:#c89b6a;
background:#faf7f3;
}

.preview-image{
width:120px;
height:90px;
object-fit:cover;
margin:10px;
border-radius:6px;
}

/* delete photo */

#imagePreview{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:10px;
}

.preview-item{
position:relative;
}

.preview-item img{
width:120px;
height:90px;
object-fit:cover;
border-radius:6px;
}

.remove-image{
position:absolute;
top:-6px;
right:-6px;

background:#000;
color:#fff;

width:20px;
height:20px;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;
cursor:pointer;
font-size:14px;
}

