/* ===== AI BACKGROUND REMOVER CSS ===== */

.bgrem-wrapper { margin-bottom: 30px; }

/* Model Loading Banner */
.bgrem-model-banner {
    background: linear-gradient(135deg, #1e1b4b, #312e81, #4338ca);
    border-radius: 16px;
    padding: 28px 30px;
    color: #fff;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bgrem-model-spinner {
    width: 40px; height: 40px;
    border: 4px solid rgba(255,255,255,0.2);
    border-top-color: #a5b4fc;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
    margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.bgrem-model-info { text-align: center; }
.bgrem-model-info strong { display: block; font-size: 18px; margin-bottom: 4px; }
.bgrem-model-info span   { font-size: 13px; opacity: 0.8; }
.bgrem-model-bar  { background: rgba(255,255,255,0.2); height: 8px; border-radius: 999px; overflow: hidden; }
.bgrem-model-fill { height: 100%; background: linear-gradient(90deg,#a5b4fc,#818cf8); border-radius: 999px; transition: width 0.8s ease; }

/* Upload Zone */
.bgrem-upload-zone {
    border: 3px dashed #d1d5db;
    border-radius: 20px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    padding: 60px 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 24px;
    min-height: 300px;
    align-items: center;
    justify-content: center;
}
.bgrem-upload-zone:hover,
.bgrem-upload-zone.bgrem-drag-over {
    border-color: #6366f1;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    transform: scale(1.01);
}
.bgrem-upload-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bgrem-upload-icon  { font-size: 64px; }
.bgrem-upload-title { font-size: 24px; font-weight: 800; color: #1f2937; }
.bgrem-upload-sub   { font-size: 14px; color: #6b7280; }
.bgrem-upload-types { font-size: 12px; color: #9ca3af; background: #f3f4f6; padding: 4px 16px; border-radius: 20px; }
.bgrem-upload-btn {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff; border: none; border-radius: 12px;
    padding: 14px 32px; font-size: 16px; font-weight: 700;
    cursor: pointer; margin-top: 8px; transition: all 0.25s;
    box-shadow: 0 4px 16px rgba(99,102,241,0.3);
}
.bgrem-upload-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(99,102,241,0.4); }

/* Result Section */
.bgrem-result-section { margin-bottom: 24px; }

.bgrem-processing {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 20px;
    padding: 50px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.bgrem-spinner {
    width: 60px; height: 60px;
    border: 5px solid #e5e7eb;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}
.bgrem-proc-title { font-size: 20px; font-weight: 800; color: #1f2937; }
.bgrem-proc-sub   { font-size: 14px; color: #6b7280; }
.bgrem-proc-bar   { width: 280px; height: 8px; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
.bgrem-proc-fill  { height: 100%; background: linear-gradient(90deg,#6366f1,#8b5cf6); border-radius: 999px; transition: width 0.8s ease; }

/* Compare Grid */
.bgrem-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
.bgrem-img-card       { border-radius: 16px; overflow: hidden; border: 2px solid #e5e7eb; background: #fff; }
.bgrem-result-card    { border-color: #6366f1; box-shadow: 0 4px 20px rgba(99,102,241,0.15); }
.bgrem-img-label      { padding: 10px 16px; font-size: 13px; font-weight: 700; color: #374151; border-bottom: 1px solid #f3f4f6; background: #f8fafc; }
.bgrem-result-card .bgrem-img-label { background: linear-gradient(135deg,#eef2ff,#e0e7ff); color: #4338ca; }
.bgrem-img-wrap       { padding: 10px; min-height: 240px; display: flex; align-items: center; justify-content: center; }
.bgrem-img-wrap img, .bgrem-img-wrap canvas { max-width: 100%; max-height: 380px; object-fit: contain; border-radius: 8px; }
.bgrem-checker {
    background-image: linear-gradient(45deg,#d1d5db 25%,transparent 25%),
                      linear-gradient(-45deg,#d1d5db 25%,transparent 25%),
                      linear-gradient(45deg,transparent 75%,#d1d5db 75%),
                      linear-gradient(-45deg,transparent 75%,#d1d5db 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    background-color: #f9fafb;
    transition: background-color 0.3s;
}

/* Actions */
.bgrem-actions { background: #fff; border: 2px solid #e5e7eb; border-radius: 16px; padding: 20px; margin-bottom: 20px; }
.bgrem-bg-options { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.bgrem-bg-label   { font-size: 13px; font-weight: 700; color: #374151; }
.bgrem-bg-btn {
    width: 32px; height: 32px; border-radius: 8px;
    border: 2px solid #e5e7eb; cursor: pointer; transition: all 0.2s;
}
.bgrem-bg-btn:hover { transform: scale(1.15); border-color: #6366f1; }
.bgrem-bg-btn.active { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.3); }
.bgrem-bg-transparent {
    background-image: linear-gradient(45deg,#d1d5db 25%,transparent 25%),
                      linear-gradient(-45deg,#d1d5db 25%,transparent 25%),
                      linear-gradient(45deg,transparent 75%,#d1d5db 75%),
                      linear-gradient(-45deg,transparent 75%,#d1d5db 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0;
    background-color: #f9fafb;
}
.bgrem-download-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.bgrem-dl-btn {
    padding: 12px 22px; border-radius: 10px; border: none;
    font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s;
}
.bgrem-dl-png { background: linear-gradient(135deg,#6366f1,#4f46e5); color: #fff; box-shadow: 0 3px 12px rgba(99,102,241,0.3); }
.bgrem-dl-png:hover { transform: translateY(-2px); }
.bgrem-dl-jpg { background: #f0fdf4; color: #15803d; border: 2px solid #86efac; }
.bgrem-dl-jpg:hover { background: #dcfce7; }
.bgrem-try-btn { background: #f8fafc; color: #374151; border: 2px solid #e5e7eb; padding: 12px 20px; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; }
.bgrem-try-btn:hover { border-color: #6366f1; color: #4338ca; }

/* Error */
.bgrem-error { background: #fff5f5; border: 2px solid #fca5a5; border-radius: 16px; padding: 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bgrem-error-icon { font-size: 36px; }
.bgrem-error-text { font-size: 14px; color: #7f1d1d; font-weight: 500; max-width: 400px; }
.bgrem-retry-btn  { background: linear-gradient(135deg,#ef4444,#dc2626); color: #fff; border: none; border-radius: 10px; padding: 10px 24px; font-size: 14px; font-weight: 700; cursor: pointer; }

/* Use Cases */
.bgrem-usecases { background: #f8fafc; border-radius: 16px; padding: 22px; border: 2px solid #e5e7eb; }
.bgrem-uc-title { font-size: 15px; font-weight: 800; color: #1f2937; margin-bottom: 14px; text-align: center; }
.bgrem-uc-grid  { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.bgrem-uc-item  { background: #fff; border-radius: 12px; padding: 14px 8px; text-align: center; border: 2px solid #e5e7eb; font-size: 26px; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: all 0.2s; }
.bgrem-uc-item:hover { border-color: #6366f1; transform: translateY(-2px); }
.bgrem-uc-item span  { font-size: 11px; font-weight: 700; color: #374151; line-height: 1.3; }
.bgrem-uc-item small { font-size: 10px; color: #9ca3af; font-weight: 400; }

/* Info Box */
.info-box { background: linear-gradient(135deg,#eef2ff,#e0e7ff); border-radius: 16px; padding: 28px; margin-bottom: 24px; }
.info-box h4 { color: #3730a3; font-size: 20px; margin-bottom: 18px; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.info-item { background: #fff; border-radius: 12px; padding: 16px; color: #374151; font-size: 14px; line-height: 1.6; }
.info-item strong { display: block; color: #4f46e5; font-size: 14px; font-weight: 700; margin-bottom: 4px; }

/* Responsive */
@media (max-width: 768px) {
    .bgrem-compare-grid  { grid-template-columns: 1fr; }
    .bgrem-uc-grid       { grid-template-columns: repeat(3, 1fr); }
    .bgrem-download-btns { flex-direction: column; }
    .bgrem-upload-zone   { padding: 40px 16px; min-height: 220px; }
    .info-grid           { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .bgrem-uc-grid    { grid-template-columns: repeat(2, 1fr); }
    .bgrem-upload-title { font-size: 18px; }
}