#modal_categorySEO {
    z-index: 9999 !important;
}

.modal-backdrop.show {
    z-index: 9998 !important;
}

/* --- Modal window styling --- */
#modal_categorySEO .modal-content {
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    border: none;
/*    max-height: 85vh;  Lower modal height for better UX */
/*    overflow-y: auto;*/
}
#modal_categorySEO .modal-header {
    background: linear-gradient(135deg, #5257a8, #fff);
    padding: 1rem 1.5rem;
    border-bottom: none;
}
#modal_categorySEO .modal-body {
    padding: 1.5rem;
    background-color: #f9fafb;
}
#modal_categorySEO label { font-weight: 600; color: #343a40; }
#modal_categorySEO input.form-control,
#modal_categorySEO textarea.form-control {
    border-radius: 8px;
    border: 1px solid #ced4da;
    transition: all 0.2s ease;
}
#modal_categorySEO input.form-control:focus,
#modal_categorySEO textarea.form-control:focus {
    border-color: #6c63ff;
    box-shadow: 0 0 0 0.2rem rgba(108,99,255,0.15);
}

/* --- SEO meters and progress visualization --- */
.seo-meter {
    position: relative;
    height: 6px; background-color:
        #e9ecef; border-radius: 4px; 
    overflow: hidden;
}
.seo-meter-bar { position: absolute; height: 100%; width: 0; background-color: #dc3545; transition: width 0.3s, background-color 0.3s; }

/* --- Circular SEO score indicator --- */
.seo-score-circle {
    width: 60px; height: 60px; border-radius: 50%; background: #ccc;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: bold; font-size: 14px; transition: background 0.4s ease;
}
.seo-score-circle.pulse { animation: pulse 1.4s ease-out; }
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(40,167,69,0.6); }
    70% { box-shadow: 0 0 0 10px rgba(40,167,69,0); }
    100% { box-shadow: 0 0 0 0 rgba(40,167,69,0); }
}

/* --- Recommendation checklist --- */
.seo-checklist { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 8px; margin-top: 1rem; }
.seo-check-item { padding: 6px 10px; border-radius: 6px; font-size: 13px; display: flex; align-items: center; gap: 6px; transition: all 0.3s ease; }
.seo-check-item.good { background: #e8f5e9; color: #2e7d32; }
.seo-check-item.warn { background: #fff3cd; color: #856404; }
.seo-check-item.bad { background: #fdecea; color: #b71c1c; }

/* --- High z-index to ensure modal overlays everything --- */
.modal.fade#modal_categorySEO {
    z-index: 110000 !important;
}
.modal-backdrop.show.modal-backdrop-seo {
    z-index: 109999 !important;
}