/* ============================================
   CRM Car Management – Optimized & Unified
   ============================================ */

/* ===============================
   FORM WRAPPERS
   =============================== */
#crm_add_car_wrapper, 
#crm_update_car_wrapper {
    margin: 40px auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 30px 40px;
    font-family: inherit;
}

/* Tiêu đề form */
#crm_add_car_wrapper h2,
#crm_update_car_wrapper h1 {
    text-align: center;
    margin-bottom: 25px;
    font-size: 24px;
    color: var(--primary-color);
    border-bottom: 2px solid var(--accent-color);
    display: inline-block;
    padding-bottom: 8px;
}

/* ===============================
   FORM ELEMENTS (Dùng lại từ common)
   =============================== */
#crm_add_car_wrapper label,
#crm_update_car_wrapper label {
    @extend .label;
}

#crm_add_car_wrapper input[type="text"],
#crm_add_car_wrapper input[type="number"],
#crm_update_car_wrapper input[type="text"],
#crm_update_car_wrapper input[type="number"],
#crm_add_car_wrapper select,
#crm_update_car_wrapper select,
#crm_add_car_wrapper textarea,
#crm_update_car_wrapper textarea {
    @extend .input;
    resize: vertical;
}

/* ===============================
   BUTTONS (Dùng chung từ common)
   =============================== */
#crm_add_car_wrapper button,
#crm_update_car_wrapper button {
    @extend .button-primary;
    font-size: 15px;
}

#crm_add_car_wrapper button:hover,
#crm_update_car_wrapper button:hover {
    @extend .button-primary:hover;
}

/* Link */
#crm_add_car_wrapper a,
#crm_update_car_wrapper a {
    /*color: var(--accent-color);*/
    text-decoration: none;
    transition: color 0.2s ease;
}

#crm_add_car_wrapper a:hover,
#crm_update_car_wrapper a:hover {
    text-decoration: underline;
}

/* ===============================
   IMAGE UPLOAD SECTIONS
   =============================== */
.crm_featured_wrapper,
.car-gallery-upload {
    margin-bottom: 20px;
}

.crm_featured_preview img {
    border-radius: 8px;
    border: 1px solid var(--border-color);
    max-width: 150px;
    box-shadow: var(--shadow);
}

#car_gallery_preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.car-gallery-item {
    position: relative;
}

.car-gallery-item img {
    border-radius: 6px;
    border: 1px solid var(--border-color);
    transition: transform 0.2s ease;
}

.car-gallery-item img:hover {
    transform: scale(1.05);
}

/* Nút xóa ảnh */
button.remove-car-img
{
    position: absolute;
    top: 0;
    right: 0;
    background: var(--secondary-color);
    color: #fff;
    border-radius: 1px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    /*width: 24px;
    height: 24px;
    line-height: 22px;*/
    text-align: center;
    transition: background 0.2s ease;
	padding: 5px 8px;
}

button.remove-car-img:hover,
#remove_featured_image:hover,
.delete-img-button:hover {
    background: #c0392b;
}

/* ===============================
   MESSAGE (Dùng từ common)
   =============================== */
#crm_add_car_message,
#crm_update_car_message {
    @extend .crm-message;
}

#crm_add_car_message.success,
#crm_update_car_message.success {
    @extend .crm-message.success;
}

#crm_add_car_message.error,
#crm_update_car_message.error {
    @extend .crm-message.error;
}

/* ===============================
   RESPONSIVE
   =============================== */
@media (max-width: 600px) {
    #crm_add_car_wrapper,
    #crm_update_car_wrapper {
        padding: 20px;
    }

    #crm_add_car_wrapper h2,
    #crm_update_car_wrapper h1 {
        font-size: 20px;
    }
}