/* SDEO Admin Custom Settings Page Styles */

/* General View Container */
.sdeo-custom-admin-view {
    background: #fff;
    padding: 20px 30px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}

/* --- Vendor Products List Specific Styles --- */
.sdeo-custom-admin-view .dokan-table th,
.sdeo-custom-admin-view .dokan-table td {
    vertical-align: middle;
}

.sdeo-product-image-cell img {
    height: 50px; 
    width: 50px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid #eee;
}

.sdeo-product-actions-cell {
    display: flex;
    gap: 8px; 
}

/* NEW: Style the Order and Delete buttons with your specified colors */
.sdeo-product-actions-cell .dokan-btn {
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff !important; /* Ensure text is always white */
}

.sdeo-product-actions-cell .dokan-btn.dokan-btn-theme {
    background-color: #124fa5 !important; /* Your specified blue */
    border-color: #124fa5 !important;
}

.sdeo-product-actions-cell .dokan-btn.dokan-btn-danger {
    background-color: #ff0000 !important; /* Your specified red */
    border-color: #ff0000 !important;
}
/* END NEW STYLES */


/* --- Generate Codes Page Styles --- */
.sdeo-codes-list {
    margin-top: 30px;
}
.sdeo-codes-list h3 {
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.sdeo-code-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sdeo-code-tag {
    font-family: monospace;
    padding: 5px 10px;
    border-radius: 4px;
    background: #f0f0f0;
    border: 1px solid #ddd;
}
.sdeo-code-tag.used {
    background: #e9e9e9;
    color: #999;
    text-decoration: line-through;
}

/* --- Geolocation Page Styles --- */
.sdeo-geo-country-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    background: #f9f9f9;
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 4px;
    max-height: 500px;
    overflow-y: auto;
}

.sdeo-country-item label {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Colors Page Styles --- */
.sdeo-colors-form-wrap {
    margin-top: 20px;
}
.sdeo-colors-form-wrap h3 {
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}
.sdeo-color-option {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}
.sdeo-color-option label {
    font-weight: 600;
    flex-basis: 200px;
}
.sdeo-colors-form-wrap .wp-picker-container .wp-color-result.button {
    height: 30px;
}


/* ===================================================================
 * MOBILE RESPONSIVE MEDIA QUERIES FOR SETTINGS PAGE (STACKED LAYOUT)
 * =================================================================== */
@media screen and (max-width: 768px) {
    /* Collapse the two-column table into a stacked block-level layout */
    .sdeo-custom-admin-view .form-table,
    .sdeo-custom-admin-view .form-table tbody,
    .sdeo-custom-admin-view .form-table tr,
    .sdeo-custom-admin-view .form-table th,
    .sdeo-custom-admin-view .form-table td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Style the heading (th) as a stacked card-like header label */
    .sdeo-custom-admin-view .form-table th {
        padding: 20px 0 8px 0 !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #1e293b !important;
        border-bottom: 2px solid #f1f5f9 !important;
        margin-bottom: 12px !important;
    }

    /* Clean spacing on the td blocks containing inputs */
    .sdeo-custom-admin-view .form-table td {
        padding: 0 0 25px 0 !important;
        border: none !important;
    }

    /* Stretch all textareas, dropdowns, and text/number inputs to full width */
    .sdeo-custom-admin-view .form-table textarea,
    .sdeo-custom-admin-view .form-table select,
    .sdeo-custom-admin-view .form-table input[type="text"],
    .sdeo-custom-admin-view .form-table input[type="number"],
    .sdeo-custom-admin-view .form-table input[type="email"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Stack flex boxes (customizable step blocks & upload assets) vertically */
    .sdeo-custom-admin-view fieldset {
        max-width: 100% !important;
    }

    /* Stack inline display flex divs (Color palettes and inputs) */
    .sdeo-custom-admin-view fieldset div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* Handle specific step banner & logo media uploads blocks */
    .sdeo-custom-admin-view .form-table td div[style*="display: flex; gap: 10px; align-items: center"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .sdeo-custom-admin-view .form-table td div[style*="display: flex; gap: 10px; align-items: center"] input {
        width: 100% !important;
    }

    .sdeo-custom-admin-view .form-table td div[style*="display: flex; gap: 10px; align-items: center"] button {
        width: 100% !important;
        height: 40px !important;
    }
}