/* =====================================================================
   Bg Remover — shared site style (clean, light, centered layout)
   Loaded after each page's own styles, so these rules win.
   ===================================================================== */
:root{
  --primary:#3A5BFF;
  --secondary:#3A5BFF;
  --accent:#3A5BFF;
  --bg-light:#F5F6FA;
  --ink:#0E1220;
  --muted:#5B6275;
  --line:#E4E7EE;
  --card:#FFFFFF;
  --soft:#E9EEFF;
  --border-light:#E4E7EE;
}
html.dark{
  --bg-dark:#0B0D12;
  --ink:#F1F3F8;
  --muted:#9AA3B5;
  --line:#242A3A;
  --card:#131722;
  --soft:#1C2340;
}
html{ scroll-padding-top:88px; }
body{ background:var(--bg-light) !important; color:var(--ink) !important; font-family:'Inter',system-ui,sans-serif; }
html.dark body{ background:var(--bg-dark) !important; color:var(--ink) !important; }
h1,h2,h3,h4,.font-display{ font-family:'Schibsted Grotesk','Inter',system-ui,sans-serif !important; letter-spacing:-.02em; }

/* brand accents: solid blue instead of gradients */
.grad-text{ background:none !important; -webkit-text-fill-color:currentColor; color:var(--primary) !important; }
.grad-btn{ background:var(--primary) !important; box-shadow:0 8px 20px -8px rgba(58,91,255,.6) !important; border-radius:10px !important; }
.grad-btn:hover{ transform:none !important; filter:brightness(1.07); box-shadow:0 10px 22px -8px rgba(58,91,255,.7) !important; }
.grad-btn:active{ transform:scale(.98) !important; }
.blob{ display:none !important; }

/* cards: flat white with a thin border */
.glass{ background:var(--card) !important; border:1px solid var(--line) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.card-hover:hover{ transform:translateY(-2px) !important; box-shadow:0 12px 28px -14px rgba(16,24,40,.22) !important; border-color:#CCD3E3 !important; }
html.dark .card-hover:hover{ border-color:#34405E !important; }

/* buttons with the ripple effect get soft corners like the reference */
.ripple.rounded-full, #themeToggle, #mobileMenuBtn{ border-radius:10px !important; }
.btn-outline{ display:inline-flex; align-items:center; justify-content:center; background:var(--card); border:1px solid var(--line); color:var(--ink); font-weight:600; font-size:.875rem; padding:.75rem 1.25rem; border-radius:10px; transition:border-color .2s ease, background .2s ease; }
.btn-outline:hover{ border-color:#C3CBDD; }

/* header: plain bar with a bottom line */
#navbar{ background:rgba(255,255,255,.88) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line) !important; box-shadow:none !important; }
html.dark #navbar{ background:rgba(11,13,18,.88) !important; }
#navbar.glass{ border-width:0 0 1px 0 !important; }
#navbar nav{ padding-top:.8rem !important; padding-bottom:.8rem !important; }
.nav-links{ margin:0 1.5rem; }
.nav-links a{ color:var(--muted); font-weight:500; transition:color .2s ease; }
.nav-links a:hover, .nav-links a.active{ color:var(--ink) !important; }
#mobileMenu{ background:var(--card) !important; }

/* small pill labels above headings */
.eyebrow{ display:inline-block; font-size:12px !important; font-weight:600 !important; letter-spacing:0 !important; text-transform:none !important; padding:4px 12px; border-radius:999px; background:var(--soft); color:var(--primary) !important; }
.hero-badge{ display:inline-block; font-size:13px; font-weight:600; padding:5px 12px; border-radius:999px; background:var(--soft); color:var(--primary); }
.muted{ color:var(--muted); }

/* hero */
.hero-title{ font-size:clamp(2rem,3.7vw,3.1rem); line-height:1.08; font-weight:800; }
.hero-figure img, .hero-figure .compare-wrap{ border-radius:18px; box-shadow:0 20px 40px -24px rgba(16,24,40,.45); }

/* upload card + dropzone */
.tool-card{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:1.5rem; box-shadow:0 1px 2px rgba(16,24,40,.04); }
@media (min-width:768px){ .tool-card{ padding:2rem; } }
#dropZone{ background:var(--bg-light); border-color:#C9D1E4 !important; border-radius:14px !important; }
html.dark #dropZone{ background:#0F121A; border-color:#2C3447 !important; }
.upload-icon{ width:56px; height:56px; border-radius:14px; background:var(--soft); color:var(--primary); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; animation:none !important; transform:none !important; }
.upload-icon svg{ color:var(--primary) !important; }

/* feature sections: text inside a white box next to the image */
.text-card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1rem 1.1rem; }
.text-card p{ color:var(--muted); font-size:.92rem; line-height:1.7; opacity:1 !important; }
figure img{ border-radius:16px; }
figure img.shadow-sm{ box-shadow:0 18px 36px -22px rgba(16,24,40,.45) !important; }

/* FAQ: simple divided list */
#faqList{ border-top:1px solid var(--line); }
#faqList > div, .faq-list > details{ background:transparent !important; border:0 !important; border-bottom:1px solid var(--line) !important; border-radius:0 !important; box-shadow:none !important; }
.faq-list{ border-top:1px solid var(--line); }
.faq-list > details{ padding-left:.25rem !important; padding-right:.25rem !important; }
#faqList > div + div, .faq-list > details + details{ margin-top:0 !important; }

/* slightly calmer section spacing */
section.py-20{ padding-top:4.5rem !important; padding-bottom:4.5rem !important; }

/* keep the header on one line */
#navbar nav a, #navbar nav button, .nav-links a{ white-space:nowrap; }
.nav-links{ gap:1.5rem !important; }
@media (max-width:1180px){ .nav-links{ gap:1.1rem !important; margin:0 .75rem; font-size:.84rem; } }

/* "Background Remover" dropdown in the header */
.nav-dd{ position:relative; }
.nav-dd-trigger{ display:inline-flex; align-items:center; gap:.3rem; }
.nav-dd-chev{ transition:transform .2s ease; opacity:.7; }
.nav-dd:hover .nav-dd-chev, .nav-dd:focus-within .nav-dd-chev, .nav-dd.open .nav-dd-chev{ transform:rotate(180deg); }
.nav-dd-menu{ position:absolute; top:100%; left:-14px; padding-top:12px; min-width:290px; opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:60; }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu, .nav-dd.open .nav-dd-menu{ opacity:1; visibility:visible; transform:none; }
.nav-dd-menu::before{ content:""; position:absolute; inset:12px 0 0 0; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 40px -16px rgba(16,24,40,.28); z-index:-1; }
.nav-dd-item{ display:flex; align-items:center; gap:.75rem; padding:.6rem .8rem; margin:0 .35rem; border-radius:10px; color:var(--ink) !important; }
.nav-dd-menu .nav-dd-item:first-child{ margin-top:.4rem; }
.nav-dd-menu .nav-dd-item:last-child{ margin-bottom:.4rem; }
.nav-dd-item:hover, .nav-dd-item.current{ background:var(--soft); }
.nav-dd-item .fmt{ flex:0 0 auto; width:42px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; letter-spacing:.03em; background:var(--soft); color:var(--primary); }
.nav-dd-item:hover .fmt, .nav-dd-item.current .fmt{ background:var(--primary); color:#fff; }
.nav-dd-item b{ display:block; font-size:.86rem; font-weight:600; }
.nav-dd-item small{ display:block; font-size:.74rem; color:var(--muted); margin-top:1px; }

/* header fit: never let the logo get squeezed under the menu */
#navbar nav > a:first-child{ flex-shrink:0; margin-right:.5rem; }
.nav-links{ gap:1.2rem !important; margin:0 .75rem !important; font-size:.86rem; }
@media (max-width:1180px){ .nav-links{ gap:.9rem !important; font-size:.8rem; } }

/* identical header on every page: logo left, menu exactly centered, buttons right */
@media (min-width:1024px){
  #navbar nav{ display:grid !important; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:1rem; }
  #navbar nav > a:first-child{ justify-self:start; margin-right:0; }
  #navbar nav > .nav-links{ justify-self:center; margin:0 !important; }
  #navbar nav > div:last-child{ justify-self:end; }
}
.nav-links{ gap:1.6rem !important; font-size:.88rem; }
@media (max-width:1180px){ .nav-links{ gap:1.1rem !important; font-size:.84rem; } }

/* ---- result preview on the editing tools: fits the screen instead of filling it ---- */
.result-stage{ display:flex; align-items:center; justify-content:center; min-height:0; padding:14px; background:var(--bg-light); border:1px solid var(--line); }
#toolCanvas{ width:auto !important; height:auto !important; max-width:100%; max-height:min(52vh,460px); border-radius:10px; box-shadow:0 10px 24px -14px rgba(16,24,40,.35);
  background-color:#eef0f6; background-image:linear-gradient(45deg,#c8ccd8 25%,transparent 25%),linear-gradient(-45deg,#c8ccd8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#c8ccd8 75%),linear-gradient(-45deg,transparent 75%,#c8ccd8 75%);
  background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0; }
/* background changer: options and download beside the picture */
.result-grid{ display:grid; gap:1.25rem; }
@media (min-width:768px){ .result-grid{ grid-template-columns:minmax(0,1fr) 250px; align-items:start; } }
.result-grid:has(#resultActions.hidden){ grid-template-columns:minmax(0,1fr); }
.result-grid:has(#resultActions.hidden) .result-side{ display:none; }
.result-side{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1rem; }

/* ---- main remover: background swatches next to Download ---- */
.bg-pick{ width:30px; height:30px; border-radius:8px; border:1px solid var(--line); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; transition:transform .15s ease, box-shadow .15s ease; background-size:12px 12px !important; }
.bg-pick:hover{ transform:scale(1.08); }
.bg-pick.on{ box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--primary); }
.bg-pick-custom{ position:relative; overflow:hidden; background:conic-gradient(#ff5f5f,#ffd25f,#5fff8f,#5fd7ff,#7f5fff,#ff5fd2,#ff5f5f) !important; }
.bg-pick-custom input{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }

/* ---- phone menu ---- */
.mobile-dd-btn{ display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; font-weight:500; }
.mobile-dd-chev{ transition:transform .2s ease; opacity:.7; }
.mobile-dd-btn.open .mobile-dd-chev{ transform:rotate(180deg); }
.mobile-dd:not(.hidden){ display:flex; flex-direction:column; gap:.85rem; margin:-.25rem 0 .1rem; padding-left:.85rem; border-left:2px solid var(--line); }
.mobile-sub{ font-size:.85rem; color:var(--muted); }
.mobile-sub.active{ color:var(--primary); font-weight:600; }

/* moving progress bar while the background is being removed */
.bar-indeterminate{ width:38% !important; animation:barSlide 1.3s ease-in-out infinite; }
@keyframes barSlide{ 0%{ transform:translateX(-110%); } 100%{ transform:translateX(280%); } }

/* uploaded photo keeps its exact shape: never cropped or stretched, never enlarged,
   and capped at a comfortable size so it does not cover the page */
#workCanvas{ display:block; width:auto !important; height:auto !important; max-width:100%; max-height:min(52vh,460px); }
.preview-frame{ line-height:0; box-shadow:0 10px 24px -14px rgba(16,24,40,.35); }

/* editing tools: the result box hugs the picture (no empty bars at the sides) */
.result-stage{ display:block !important; width:fit-content; max-width:100%; margin:0 auto; padding:0 !important; background:transparent !important; border:0 !important; min-height:0 !important; line-height:0; }

/* sharp previews: the full-size canvas stays hidden (used for downloads), a smooth copy is shown */
#toolCanvas, #workCanvas{ display:none !important; }
#toolPreview{ display:block; max-width:100%; height:auto; border-radius:10px; box-shadow:0 10px 24px -14px rgba(16,24,40,.35);
  background-color:#eef0f6; background-image:linear-gradient(45deg,#c8ccd8 25%,transparent 25%),linear-gradient(-45deg,#c8ccd8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#c8ccd8 75%),linear-gradient(-45deg,transparent 75%,#c8ccd8 75%);
  background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0; }
#workPreview{ display:block; max-width:100%; height:auto; }

/* download format menu */
.fmt-select{ display:inline-flex; align-items:center; gap:.45rem; font-size:.78rem; font-weight:600; color:var(--muted); }
.fmt-select select{ border:1px solid var(--line); border-radius:10px; padding:.55rem .65rem; background:var(--card); color:var(--ink); font-weight:600; font-size:.85rem; cursor:pointer; }
.fmt-select-wide{ width:100%; justify-content:space-between; margin-bottom:.25rem; }
.fmt-select-wide select{ flex:1; }

/* colour correction: colour mixer */
.mixer-dots{ display:flex; flex-wrap:wrap; gap:.5rem; }
.mixer-dot{ width:28px; height:28px; border-radius:999px; border:2px solid var(--card); box-shadow:0 0 0 1px var(--line); cursor:pointer; transition:transform .15s ease; }
.mixer-dot:hover{ transform:scale(1.1); }
.mixer-dot.on{ box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--primary); }
.mixer-dot.changed::after{ content:""; display:block; width:6px; height:6px; border-radius:99px; background:var(--card); margin:9px auto 0; }