/* ===== AIWheelTech shared theme for the fitment tools =====
   Loaded AFTER each calculator's inline <style>, so these :root overrides
   win — instantly re-skinning the existing markup to match the homepage. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:#05070e;
  --bg-card:rgba(255,255,255,0.045);
  --bg-input:rgba(255,255,255,0.04);
  --accent:#22d3ee;
  --accent-hover:#67e8f9;
  --accent-dim:rgba(34,211,238,0.15);
  --accent-border:rgba(34,211,238,0.28);
  --accent-faint:rgba(34,211,238,0.06);
  --text-h:#eaf0fb;
  --text-body:#c3cddd;
  --text-dim:rgba(255,255,255,0.42);
  --card-border:rgba(255,255,255,0.08);
  --font-head:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --indigo:#7c83ff;--violet:#a78bfa;--cyan:#22d3ee;--line:rgba(255,255,255,.08);
}
html{scroll-behavior:smooth}
body{background:var(--bg) !important;color:var(--text-body);overflow-x:hidden}

/* background layers (match homepage) */
#bg-canvas{position:fixed;inset:0;z-index:0;opacity:.7;pointer-events:none}
.aiwt-aura{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60vw 50vh at 80% -8%,rgba(34,211,238,.13),transparent 60%),radial-gradient(50vw 45vh at 10% 6%,rgba(124,131,255,.12),transparent 60%),radial-gradient(40vw 40vh at 50% 110%,rgba(167,139,250,.10),transparent 60%);
  animation:aiwtAura 22s ease-in-out infinite alternate}
@keyframes aiwtAura{0%{transform:scale(1)}100%{transform:scale(1.13) translate(-2%,1.5%)}}
#aiwt-grain{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.035;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* lift the calculator content above the background */
.container{position:relative;z-index:2}

/* injected header */
.aiwt-hdr{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;height:60px;backdrop-filter:blur(12px);background:rgba(5,7,14,.62);border-bottom:1px solid var(--line)}
.aiwt-logo{display:flex;align-items:center;gap:9px;text-decoration:none}
.aiwt-logo img{height:30px;display:block}
.aiwt-logo b{font-family:var(--font-head);font-weight:700;font-size:18px;letter-spacing:-.5px;color:#fff}
.aiwt-logo b i{font-style:normal;background:linear-gradient(90deg,#22d3ee,#7c83ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.aiwt-back{font-size:13.5px;color:var(--text-dim);text-decoration:none;font-family:var(--font-body);transition:.2s}
.aiwt-back:hover{color:#fff}

/* glass cards + gradient headline to match homepage */
.card{background:var(--bg-card) !important;border:1px solid var(--line) !important;backdrop-filter:blur(10px);
  box-shadow:0 18px 50px rgba(0,0,0,.35)}
.hero h1 span{background:linear-gradient(110deg,#22d3ee,#8ad9ff 30%,#7c83ff 70%,#a78bfa);background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:aiwtGrad 8s linear infinite}
@keyframes aiwtGrad{to{background-position:240% 0}}
.badge{background:rgba(34,227,160,.12) !important;color:#9ff0cf !important;border-color:rgba(34,227,160,.3) !important}

/* hide the old per-page back-link + powered line (replaced by injected header/footer) */
.back-link{display:none !important}
.powered{display:none !important}

/* injected footer */
.aiwt-ftr{position:relative;z-index:2;border-top:1px solid var(--line);margin-top:30px;padding:24px 20px;
  text-align:center;color:var(--text-dim);font-size:12.5px;font-family:var(--font-body)}
.aiwt-ftr a{color:var(--text-dim);text-decoration:none}
.aiwt-ftr a:hover{color:var(--accent)}