/* =====================================================
   Background Remover tool — mobile-first, then scaled up
   ===================================================== */

.bgr-alert{max-width:700px;margin:0 auto 18px;background:rgba(255,107,107,0.1);border:1px solid rgba(255,107,107,0.35);color:#ff9d9d;padding:12px 16px;border-radius:10px;font-size:.85rem;text-align:center;display:none}
.bgr-alert.show{display:block}

/* ---- Dropzone ---- */
.bgr-dropzone{position:relative;max-width:640px;margin:0 auto;border:2px dashed var(--card-border);border-radius:var(--radius);padding:36px 16px;text-align:center;cursor:pointer;background:var(--card-bg);transition:var(--transition-fast)}
.bgr-dropzone:hover,.bgr-dropzone:focus{outline:0;border-color:var(--gold-dark,var(--gold));background:var(--card-bg-hover)}
.bgr-dropzone.dragover{border-color:var(--gold);background:var(--gold-glow-soft,rgba(252,192,10,0.08))}
.bgr-dropzone input[type="file"]{display:none}
.bgr-dropzone > i{display:block;font-size:2rem;color:var(--gold);margin-bottom:14px}
.bgr-dropzone-title{color:var(--text-light);font-weight:600;font-size:1rem;margin-bottom:6px;padding:0 4px}
.bgr-dropzone-sub{color:var(--text-muted);font-size:.8rem;padding:0 4px}

/* ---- Progress ---- */
.bgr-progress-wrap{max-width:640px;margin:0 auto 24px}
.bgr-progress-track{width:100%;height:8px;border-radius:20px;background:var(--black-soft);overflow:hidden}
.bgr-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--gold-dark),var(--gold));border-radius:20px;transition:width .25s ease}
.bgr-progress-text{text-align:center;color:var(--text-muted);font-size:.8rem;margin-top:8px}

/* ---- Compare panels (mobile default: stacked) ---- */
.bgr-compare{display:flex;flex-direction:column;gap:14px;align-items:center;max-width:900px;margin:0 auto}
.bgr-panel{width:100%;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);overflow:hidden}
.bgr-panel-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--card-border);font-weight:600;font-size:.85rem;color:var(--text-light)}
.bgr-panel-head i{color:var(--gold)}
.bgr-panel-body{position:relative;display:flex;align-items:center;justify-content:center;min-height:180px;max-height:60vh;overflow:hidden;padding:10px}
.bgr-panel-body img{max-width:100%;max-height:56vh;width:auto;height:auto;object-fit:contain;display:block}
.bgr-swap-arrow{color:var(--gold);font-size:1.1rem;transform:rotate(90deg)}

/* Checkerboard behind transparent result, scoped so it never bleeds into other pages */
.bgr-checkerboard{
  background-color:#2b2b2b;
  background-image:
    linear-gradient(45deg,#3a3a3a 25%,transparent 25%),
    linear-gradient(-45deg,#3a3a3a 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#3a3a3a 75%),
    linear-gradient(-45deg,transparent 75%,#3a3a3a 75%);
  background-size:20px 20px;
  background-position:0 0,0 10px,10px -10px,-10px 0;
}
.bgr-spinner{display:none;position:absolute;inset:0;align-items:center;justify-content:center;color:var(--gold);font-size:1.6rem;background:rgba(0,0,0,0.25)}
#bgrResultPanel.is-loading .bgr-spinner{display:flex}
#bgrResultPanel.is-loading img{opacity:0}

.bgr-dims{text-align:center;color:var(--text-faint);font-size:.75rem;margin-top:10px}

/* ---- Actions ---- */
.bgr-actions{display:flex;flex-direction:column;align-items:center;gap:12px;margin:22px 0}
.bgr-actions .btn{width:100%;max-width:340px}
.bgr-actions .btn:disabled{opacity:.55;cursor:not-allowed;transform:none !important}
.bgr-reset-btn{background:transparent;border:1px solid var(--card-border);color:var(--text-muted);padding:10px 18px;border-radius:8px;font-size:.85rem;cursor:pointer;transition:var(--transition-fast);display:inline-flex;align-items:center;gap:8px;width:100%;max-width:340px;justify-content:center}
.bgr-reset-btn:hover{border-color:var(--gold);color:var(--gold)}

/* =====================================================
   Small phones — tighten spacing, keep tap targets big
   ===================================================== */
@media(max-width:480px){
  .bgr-dropzone{padding:28px 12px;border-radius:12px}
  .bgr-dropzone > i{font-size:1.6rem;margin-bottom:10px}
  .bgr-dropzone-title{font-size:.9rem}
  .bgr-dropzone-sub{font-size:.74rem}
  .bgr-panel-head{padding:10px 12px;font-size:.8rem}
  .bgr-panel-body{min-height:150px;padding:8px}
  .bgr-panel-body img{max-height:42vh}
  .bgr-swap-arrow{transform:rotate(90deg);font-size:1rem}
  .bgr-actions .btn,.bgr-reset-btn{max-width:100%;font-size:.9rem}
  .ad-slot{margin:22px auto;min-height:70px}
}

/* =====================================================
   Tablets and up — panels sit side by side
   ===================================================== */
@media(min-width:701px){
  .bgr-compare{flex-direction:row;align-items:stretch}
  .bgr-panel{width:calc(50% - 20px)}
  .bgr-swap-arrow{transform:rotate(0)}
  .bgr-panel-body img{max-height:420px}
  .bgr-actions{flex-direction:row;justify-content:center}
  .bgr-actions .btn,.bgr-reset-btn{width:auto;min-width:230px}
}

/* =====================================================
   Laptop / desktop — a bit more breathing room
   ===================================================== */
@media(min-width:1025px){
  .bgr-dropzone{padding:44px 20px}
  .bgr-panel-body img{max-height:480px}
}