/* Image Upscaler — Tool Styles */

/* ── Hero ── */
.tool-hero {
  background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
  padding: 3rem 1.5rem 2.5rem;
  text-align: center;
  color: #fff;
}
.tool-hero h1 { font-size:2rem; font-weight:800; color:#fff!important; line-height:1.25; margin-bottom:0.5rem; max-width:700px; margin-left:auto; margin-right:auto; }
.tool-hero p  { color:rgba(255,255,255,0.85); font-size:1rem; max-width:520px; margin:0 auto; }
.tool-badge   { display:inline-flex; align-items:center; gap:0.4rem; background:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.3); border-radius:50px; padding:0.3rem 0.9rem; font-size:0.8rem; color:#fff; margin-bottom:1rem; }

/* ── Layout ── */
.tool-page { max-width:1000px; margin:0 auto; padding:2.5rem 1.5rem; }

/* ── Card ── */
.calc-card { background:var(--card-bg); border:1px solid var(--border); border-radius:18px; padding:2rem; box-shadow:var(--shadow); margin-bottom:1.5rem; }
.calc-card h2 { font-size:1.1rem; font-weight:700; color:var(--text); margin-bottom:1.5rem; display:flex; align-items:center; gap:0.5rem; }

/* ── Form ── */
.form-field { margin-bottom:1.25rem; }

/* ── Drop Zone ── */
.file-drop-zone {
  border:2.5px dashed rgba(99,102,241,0.3);
  background:rgba(99,102,241,0.03);
  border-radius:12px; padding:2.5rem 1.5rem; text-align:center; cursor:pointer; transition:all 0.2s; position:relative;
}
.file-drop-zone:hover, .file-drop-zone.is-dragover { border-color:#6366f1; background:rgba(99,102,241,0.07); }
.drop-zone-content i { color:#6366f1; display:block; }
.drop-zone-content p { font-weight:600; color:var(--text); margin-bottom:0.25rem; }
.file-input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }

/* ── Scale options ── */
.upscaler-scale-options { display:flex; gap:1rem; flex-wrap:wrap; }
.scale-option {
  flex:1; min-width:120px;
  border:2px solid var(--border); border-radius:12px; padding:1rem; text-align:center;
  cursor:pointer; transition:all 0.15s; user-select:none;
}
.scale-option input[type="radio"] { display:none; }
.scale-option:hover { border-color:#0ea5e9; }
.scale-option.active { border-color:#0ea5e9; background:rgba(14,165,233,0.06); }
.scale-label { font-size:1.5rem; font-weight:800; color:#0ea5e9; }
.scale-desc   { font-size:0.8rem; color:var(--text-muted); margin-top:0.2rem; }

/* ── Progress ── */
.progress { background-color:var(--border); border-radius:999px; overflow:hidden; }
.progress-fill { height:8px; background:linear-gradient(90deg,#0ea5e9,#6366f1); border-radius:999px; transition:width 0.4s; }

/* ── Status ── */
.bgr-status { padding:0.75rem 1rem; border-radius:8px; background:rgba(14,165,233,0.08); color:#0369a1; font-size:0.9rem; display:flex; align-items:center; gap:0.5rem; }
[data-theme="dark"] .bgr-status { background:rgba(14,165,233,0.15); color:#7dd3fc; }
.bgr-status.is-error   { background:rgba(239,68,68,0.08); color:#dc2626; }
.bgr-status.is-success { background:rgba(22,163,74,0.08); color:#15803d; }
[data-theme="dark"] .bgr-status.is-error   { background:rgba(239,68,68,0.15); color:#fca5a5; }
[data-theme="dark"] .bgr-status.is-success { background:rgba(22,163,74,0.15); color:#86efac; }

/* ── Tabs ── */
.bgr-tab-row { display:flex; gap:0.5rem; flex-wrap:wrap; }
.bgr-tab { padding:0.45rem 1rem; border-radius:6px; border:1px solid var(--border,#e2e8f0); background:transparent; color:#64748b; font-size:0.875rem; font-family:'Inter',sans-serif; cursor:pointer; transition:all 0.15s; }
.bgr-tab:hover { border-color:#0ea5e9; color:#0ea5e9; }
.bgr-tab.active { background:#0ea5e9; border-color:#0ea5e9; color:#fff; }

/* ── Preview ── */
.upscaler-preview-wrap { border-radius:10px; overflow:hidden; min-height:200px; display:flex; align-items:center; justify-content:center; padding:0.5rem; background:var(--card-bg); }

/* ── Compare slider ── */
.bgr-compare-wrap { width:100%; }
.bgr-compare {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  user-select: none;
  cursor: col-resize;
  background: #f8fafc;
  /* Height is set dynamically by JS based on the image's aspect ratio */
}
/* Both images fill the container at the same display size */
.bgr-compare-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.bgr-compare-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}
/* The overlay image must match the base image exactly */
.bgr-compare-overlay img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}
.bgr-compare-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  cursor: col-resize;
}
.bgr-compare-handle::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  background: #0ea5e9;
  transform: translateX(-50%);
}
.bgr-compare-handle i {
  background: #0ea5e9;
  color: #fff;
  border-radius: 50%;
  padding: 0.35rem 0.4rem;
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(14,165,233,0.4);
}

/* ── Result info ── */
.upscaler-result-info { font-size:0.82rem; color:var(--text-muted); background:rgba(14,165,233,0.05); border:1px solid rgba(14,165,233,0.12); border-radius:8px; padding:0.6rem 0.9rem; }

/* ── Buttons ── */
.buttons { display:flex; gap:0.75rem; }
.calc-btn { width:100%; background:linear-gradient(135deg,#0ea5e9,#6366f1); color:#fff; border:none; border-radius:12px; padding:0.9rem 1.5rem; font-size:1rem; font-weight:700; font-family:'Inter',sans-serif; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; justify-content:center; gap:0.5rem; }
.calc-btn:hover { opacity:0.92; transform:translateY(-1px); box-shadow:0 8px 20px rgba(14,165,233,0.35); }
.calc-btn-secondary { background:transparent!important; border:2px solid #0ea5e9!important; color:#0ea5e9!important; box-shadow:none!important; }
.calc-btn-secondary:hover { background:rgba(14,165,233,0.08)!important; transform:translateY(-1px); }

/* ── Info chips ── */
.bgr-info-chips { display:flex; flex-wrap:wrap; gap:0.5rem; }
.bgr-chip { padding:0.3rem 0.75rem; border-radius:999px; background:rgba(14,165,233,0.08); color:#0369a1; font-size:0.78rem; font-weight:600; display:flex; align-items:center; gap:0.35rem; }
[data-theme="dark"] .bgr-chip { background:rgba(14,165,233,0.18); color:#7dd3fc; }

/* ── Tip box ── */
.bgr-tip { background:rgba(14,165,233,0.05); border:1px solid rgba(14,165,233,0.15); border-radius:8px; padding:0.85rem 1rem; font-size:0.875rem; }
.bgr-tip p { margin-bottom:0.25rem; color:var(--text-muted); }
.bgr-tip ul { padding-left:1.2rem; color:var(--text-muted); margin-top:0.5rem; }
.bgr-tip li { margin-bottom:0.3rem; }

/* ── Steps ── */
.steps-box { background:var(--card-bg); border:1px solid var(--border); border-radius:14px; padding:1.5rem; }
.steps-box ol, .steps-box ul { padding-left:1.5rem; color:var(--text-muted); line-height:1.8; }
.steps-box li { margin-bottom:0.5rem; }

/* ── Related tools ── */
.related-tools-section { margin:3rem 0; }
.related-tools-section h2 { font-size:1.1rem; font-weight:700; color:var(--text); margin-bottom:1.5rem; display:flex; align-items:center; gap:0.5rem; }
.related-tools-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.tool-card { display:flex; flex-direction:column; align-items:center; gap:0.75rem; padding:1.5rem; background:var(--card-bg); border:1px solid var(--border); border-radius:18px; text-decoration:none!important; color:inherit!important; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); text-align:center; }
.tool-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-hover); border-color:#0ea5e9; }
.tool-card .icon-wrapper { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:0.25rem; }
.tool-card .tool-title { font-weight:700; font-size:1rem; color:var(--text); }
.tool-card .tool-desc  { font-size:0.85rem; color:var(--text-muted); line-height:1.4; }
@media (max-width:1024px) { .related-tools-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px)  { .related-tools-grid { grid-template-columns:1fr; } }

/* ── Content ── */
.content-section { margin-top:3rem; }
.content-section h2 { font-size:1.25rem; font-weight:800; color:var(--text); margin:2.5rem 0 1rem; border-left:4px solid #0ea5e9; padding-left:1rem; }
.content-section p  { color:var(--text-muted); line-height:1.8; font-size:1rem; margin-bottom:1.25rem; }
.feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin:1.5rem 0; }
@media (max-width:600px) { .feature-grid { grid-template-columns:1fr; } }
.feature-pill { background:rgba(14,165,233,0.06); border-radius:12px; padding:1.25rem; }
.feature-pill strong { color:#0ea5e9; display:flex; align-items:center; gap:0.5rem; font-size:1rem; margin-bottom:0.5rem; }
.feature-pill p { font-size:0.875rem; margin:0; }
.faq-item { background:var(--card-bg); border:1px solid var(--border); border-radius:14px; padding:1.5rem; margin-bottom:1rem; }
.faq-item h2 { font-size:1rem!important; font-weight:700; margin-bottom:0.5rem!important; border:none!important; padding:0!important; }
.related-list { list-style:none; padding:0; margin:1.5rem 0; }
.related-list li { border-bottom:1px solid var(--border); }
.related-list a { display:flex; align-items:center; gap:0.75rem; padding:0.85rem 0; color:var(--text-muted); text-decoration:none; transition:all 0.2s; }
.related-list a:hover { color:#0ea5e9; padding-left:0.5rem; }
.related-list a::before { content:"→"; color:#0ea5e9; font-weight:700; }