/* Container & Global Rules */
.cpm-form-container { width: 100%; max-width: 800px; margin-top: 20px; background: #fff; padding: 25px; border: 1px solid #ccd0d4; box-shadow: 0 1px 1px rgba(0,0,0,.04); box-sizing: border-box; }
.form-row { width: 100%; display: block; margin-bottom: 25px; box-sizing: border-box; }
.field-title { display: block; width: 100%; font-weight: 600; font-size: 14px; margin-bottom: 8px; color: #2c3338; }
.field-placerbox { width: 100% !important; display: block; box-sizing: border-box; padding: 10px 15px !important; font-size: 14px; border: 1px solid #8c8f94; border-radius: 4px; background-color: #f6f7f7; transition: border-color 0.15s ease-in-out; }
.field-placerbox:focus { border-color: #2271b1; outline: none; background-color: #fff; box-shadow: 0 0 0 1px #2271b1; }

/* Categories Section */
.category-container { background: #f0f0f1; padding: 15px; border: 1px solid #dcdcde; border-radius: 4px; }
.category-checkbox-list { width: 100%; max-height: 200px; overflow-y: auto; margin-top: 15px; background: #fff; border: 1px solid #8c8f94; padding: 10px; box-sizing: border-box; }
.category-item { display: block; width: 100%; padding: 6px 0; font-size: 14px; cursor: pointer; }
.category-item input[type="checkbox"] { margin-right: 10px; }

/* Save Button */
.save-product-btn { width: 100%; display: block; background-color: #2271b1; color: #fff; border: none; padding: 15px; font-size: 16px; font-weight: bold; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; }
.save-product-btn:hover { background-color: #135e96; }

/* FIXED MEDIA UPLOAD BUTTONS */
.upload-btn { display: inline-block !important; background-color: #f0f0f1 !important; border: 1px solid #8c8f94 !important; padding: 10px 15px !important; border-radius: 4px !important; cursor: pointer !important; font-size: 14px !important; font-weight: 600 !important; color: #2c3338 !important; text-align: center !important; text-decoration: none !important; margin-bottom: 10px !important; }
.upload-btn:hover { background-color: #e6e6e6 !important; }

/* FIXED PREVIEW AREAS */
.media-preview-area { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 10px; }
.media-preview-item { position: relative; width: 150px; min-height: 150px; border: 1px solid #dcdcde; border-radius: 4px; background: #f6f7f7; display: flex; flex-direction: column; align-items: center; overflow: hidden; padding-bottom: 8px; }
.media-preview-item img, .media-preview-item video { width: 100%; height: 120px; object-fit: cover; }
.file-name-text { font-size: 11px; color: #555; text-align: center; margin-top: 5px; padding: 0 5px; word-break: break-all; line-height: 1.2; }

/* The "X" Delete Button */
.remove-media-btn { position: absolute; top: 5px; right: 5px; background: #d63638; color: #fff; border: none; border-radius: 50%; width: 24px; height: 24px; font-size: 12px; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; }
.remove-media-btn:hover { background: #b32d2e; }

/* COLOUR REPEATER STYLES */
.color-row-item { background: #f9f9f9; padding: 15px; border: 1px dashed #a0a5aa; border-radius: 4px; margin-top: 15px; position: relative; }
.remove-color-row { position: absolute; top: 10px; right: 10px; background: #d63638; color: #fff; border: none; border-radius: 4px; padding: 4px 8px; font-size: 12px; font-weight: bold; cursor: pointer; z-index: 10; }
.remove-color-row:hover { background: #b32d2e; }

/* DASHBOARD STYLES */
.cpm-dashboard-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.cpm-dashboard-table th, .cpm-dashboard-table td { border: 1px solid #dcdcde; padding: 12px; text-align: left; vertical-align: middle; }
.cpm-dashboard-table th { background: #f6f7f7; font-weight: 600; color: #2c3338; }
.cpm-dashboard-table img { border-radius: 4px; max-width: 60px; height: auto; }

/* SUCCESS MESSAGE BOX */
.cpm-success-msg { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; padding: 15px; margin-bottom: 25px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; font-size: 16px; }
.view-success-btn { background-color: #28a745 !important; color: #fff !important; border-color: #28a745 !important; margin-bottom: 0 !important; }
.view-success-btn:hover { background-color: #218838 !important; }

/* --- SECURITY & PERFORMANCE FIXES --- */
.cpm-tab-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }