/* ==========================================================
   ENERZEX — Manual Details page styles
   Red / Black / White brand theme, matches site-wide look
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --ez-red:#E31E24; --ez-red-dark:#A9141A; --ez-red-glow:rgba(227,30,36,0.35);
  --ez-black:#0B0B0D; --ez-charcoal:#17181C; --ez-ink:#111214;
  --ez-grey:#6B6E76; --ez-grey-light:#9A9DA6; --ez-line:#E8E8EA;
  --ez-green:#22C55E; --ez-amber:#FFB300; --ez-radius:16px;
}
.page-hero *, .manual-wrap *{ box-sizing:border-box; }

/* ---------- reveal-on-scroll (gated behind has-js so content never gets stuck) ---------- */
.has-js .manual-wrap .reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}
.has-js .manual-wrap .reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- READING PROGRESS + BACK TO TOP ---------- */
.progress-bar{position:fixed; top:0; left:0; height:3px; width:0%; z-index:200; background:linear-gradient(90deg, var(--ez-red), var(--ez-amber)); box-shadow:0 0 10px var(--ez-red-glow); transition:width .1s linear;}
.back-to-top{
  position:fixed; right:22px; bottom:22px; z-index:150; width:46px; height:46px; border-radius:50%;
  background:var(--ez-black); color:#fff; border:none; display:flex; align-items:center; justify-content:center;
  font-size:18px; cursor:pointer; box-shadow:0 10px 24px rgba(0,0,0,0.25);
  opacity:0; transform:translateY(14px) scale(.9); pointer-events:none; transition:opacity .3s, transform .3s, background .3s;
}
.back-to-top.show{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.back-to-top:hover{background:var(--ez-red);}

/* ---------- PAGE HERO ---------- */
.page-hero{
  position:relative; background:var(--ez-black); color:#fff; overflow:hidden; padding:64px 24px 52px; text-align:center;
}
.page-hero::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(600px 380px at 50% -10%, rgba(227,30,36,0.28), transparent 65%);}
.page-hero::after{
  content:""; position:absolute; inset:0; opacity:.3; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:42px 42px; mask-image:linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 85%);
}
.page-hero h1{position:relative; z-index:1; font-family:'Sora',sans-serif; font-weight:800; font-size:clamp(2rem,4.5vw,3rem); margin:0 0 14px; letter-spacing:-.02em; animation:ezFadeUp .6s ease both;}
.page-hero p{position:relative; z-index:1; color:#B7B9C0; font-family:'Inter',sans-serif; font-size:16px; max-width:640px; margin:0 auto; line-height:1.6; animation:ezFadeUp .6s ease .1s both;}
@keyframes ezFadeUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}
.hero-meta{position:relative; z-index:1; display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:22px;}
.hero-meta span{background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); color:#E5E6EA; font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:999px; opacity:0; animation:chipIn .5s ease forwards;}
.hero-meta span:nth-child(1){animation-delay:.15s;} .hero-meta span:nth-child(2){animation-delay:.26s;} .hero-meta span:nth-child(3){animation-delay:.37s;} .hero-meta span:nth-child(4){animation-delay:.48s;}
@keyframes chipIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}

/* ---------- SECTION / WRAP ---------- */
.section{position:relative; background:#fff; overflow:hidden; padding:56px 0 96px;}
.manual-wrap{max-width:1200px; margin:0 auto; padding:0 24px; position:relative; z-index:1; font-family:'Inter',sans-serif; color:var(--ez-ink);}
.section::before{content:""; position:absolute; width:440px; height:440px; border-radius:50%; z-index:0; background:radial-gradient(circle, rgba(227,30,36,0.05), transparent 70%); top:-160px; right:-160px; animation:ezDrift 17s ease-in-out infinite; pointer-events:none;}
@keyframes ezDrift{0%,100%{transform:translate(0,0);} 50%{transform:translate(-24px,30px);}}

/* ---------- LAYOUT ---------- */
html{ overflow-x:hidden; max-width:100%; }
body{ overflow-x:hidden; max-width:100%; }
.guide-layout{display:grid; grid-template-columns:280px 1fr; gap:44px; align-items:start; max-width:100%;}
@media(max-width:900px){ .guide-layout{grid-template-columns:1fr;} }
/* Classic CSS Grid overflow fix: without this, a grid item's intrinsic min-width
   (driven by the spec tables' min-width below) forces the whole 1fr track — and
   the page — wider than the viewport on mobile. */
.guide-layout > main{ min-width:0; max-width:100%; }
.guide-section{ min-width:0; max-width:100%; }

/* ---------- SIDEBAR ---------- */
.guide-sidebar{position:sticky; top:24px; max-height:calc(100vh - 48px); overflow-y:auto;}
@media(max-width:900px){ .guide-sidebar{position:static; max-height:none;} }
.guide-nav{background:#fff; border:1px solid var(--ez-line); border-radius:var(--ez-radius); padding:22px; box-shadow:0 10px 30px rgba(0,0,0,0.04);}
.guide-nav h4{font-family:'Sora',sans-serif; font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ez-grey); margin:0 0 14px;}
.guide-nav a{
  display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:9px; font-size:13.5px; font-weight:500;
  color:var(--ez-ink); border-left:2px solid transparent; transition:background .2s, border-color .2s, color .2s, transform .2s;
  text-decoration:none;
}
.guide-nav a:hover{background:#FFF4F4; color:var(--ez-red-dark); transform:translateX(3px);}
.guide-nav a.active{background:#FFF1F1; border-left-color:var(--ez-red); color:var(--ez-red-dark); font-weight:700;}
.read-progress-mini{display:flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ez-grey); margin-top:14px; padding-top:14px; border-top:1px solid var(--ez-line);}
.read-progress-track{flex:1; height:5px; border-radius:99px; background:#F0F0F1; overflow:hidden;}
.read-progress-fill{height:100%; width:0%; background:linear-gradient(90deg, var(--ez-red), var(--ez-amber)); border-radius:99px; transition:width .1s linear;}

.info-card{
  margin-top:16px; background:#fff; border:1px solid var(--ez-line) !important; border-radius:var(--ez-radius) !important;
  padding:20px !important; display:flex; gap:14px; align-items:flex-start; transition:transform .3s, box-shadow .3s;
}
.info-card:hover{transform:translateY(-4px); box-shadow:0 16px 30px rgba(0,0,0,0.06);}
.info-icon{flex:none; width:38px; height:38px; border-radius:10px; background:#FFF1F1; color:var(--ez-red); display:flex; align-items:center; justify-content:center; font-size:18px; animation:ezBreathe 3.2s ease-in-out infinite;}
@keyframes ezBreathe{0%,100%{transform:scale(1);} 50%{transform:scale(1.08);}}
.info-text h4{font-family:'Sora',sans-serif;}
.info-text p{color:var(--ez-grey);}
.info-text .btn{font-family:'Inter',sans-serif;}
.btn-primary{background:var(--ez-red) !important; color:#fff !important; border:none; border-radius:10px; display:inline-flex; align-items:center; gap:6px; font-weight:600; cursor:pointer; transition:transform .2s, box-shadow .2s, background .2s; text-decoration:none;}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 22px var(--ez-red-glow); background:var(--ez-red-dark) !important;}

/* ---------- GUIDE SECTIONS ---------- */
.guide-section{
  background:#fff; border:1px solid var(--ez-line); border-radius:20px; padding:32px;
  margin-bottom:24px; scroll-margin-top:24px; transition:box-shadow .3s;
}
.guide-section:hover{box-shadow:0 14px 34px rgba(0,0,0,0.05);}
.guide-section h2{font-family:'Sora',sans-serif; font-size:21px; font-weight:800; margin:0 0 16px; color:var(--ez-ink); letter-spacing:-.01em;}
.guide-section h3{font-family:'Sora',sans-serif; font-size:16px; font-weight:700; margin:24px 0 12px; color:var(--ez-ink);}
.guide-section > p{color:var(--ez-grey); font-size:15px; margin:0 0 14px; line-height:1.7;}

.warning-box{
  position:relative; background:#FFF4F4; border:1px solid #FFD3D4; border-left:4px solid var(--ez-red);
  border-radius:12px; padding:16px 18px; font-size:14.5px; color:var(--ez-ink); margin-bottom:14px;
  animation:ezWarnPulse 3s ease-in-out infinite;
}
@keyframes ezWarnPulse{0%,100%{box-shadow:0 0 0 0 rgba(227,30,36,0);} 50%{box-shadow:0 0 0 5px rgba(227,30,36,0.05);}}
.warning-box strong{color:var(--ez-red-dark);}

.step-list{display:flex; flex-direction:column; gap:14px; margin:16px 0; padding:0; list-style:none;}
.step-list li{display:flex; gap:14px; align-items:flex-start; opacity:0; transform:translateX(-10px); animation:stepIn .5s ease forwards; animation-play-state:paused;}
.has-js .guide-section.in .step-list li{animation-play-state:running;}
.has-js:not(.js-broken) .guide-section:not(.in) .step-list li{opacity:0;}
@keyframes stepIn{to{opacity:1; transform:translateX(0);}}
.step-list li:nth-child(1){animation-delay:.03s;} .step-list li:nth-child(2){animation-delay:.06s;}
.step-list li:nth-child(3){animation-delay:.09s;} .step-list li:nth-child(4){animation-delay:.12s;}
.step-list li:nth-child(5){animation-delay:.15s;} .step-list li:nth-child(6){animation-delay:.18s;}
.step-num{
  flex:none; width:28px; height:28px; border-radius:50%; background:var(--ez-ink); color:var(--ez-red);
  display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-weight:700;
  font-size:12.5px; transition:transform .3s, background .3s, color .3s;
}
.step-list li:hover .step-num{background:var(--ez-red); color:#fff; transform:rotate(-8deg) scale(1.08);}
.step-list li > div:last-child{font-size:14.5px; color:var(--ez-ink); padding-top:3px; line-height:1.6;}
.step-list a{color:var(--ez-red-dark); font-weight:600; text-decoration:underline; text-underline-offset:2px;}

/* ---------- SPEC TABLES ---------- */
.spec-table-wrap{overflow-x:auto; border:1px solid var(--ez-line); border-radius:14px; margin:16px 0; -webkit-overflow-scrolling:touch;}
table.spec-table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:520px;}
table.spec-table th{background:var(--ez-black); color:#fff; text-align:left; padding:12px 16px; font-family:'Sora',sans-serif; font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;}
table.spec-table td{padding:11px 16px; border-bottom:1px solid var(--ez-line); color:var(--ez-ink);}
table.spec-table tr:last-child td{border-bottom:none;}
table.spec-table tbody tr{transition:background .2s;}
table.spec-table tbody tr:nth-child(even){background:#FAFAFA;}
table.spec-table tbody tr:hover{background:#FFF4F4;}
table.spec-table td:first-child{font-weight:600; font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ez-red-dark);}

/* ---------- WHY-ITEM (troubleshooting / FAQ rows) ---------- */
.why-item{display:flex; gap:14px; align-items:flex-start; opacity:0; transform:translateY(10px); animation:stepIn2 .5s ease forwards; animation-play-state:paused;}
.has-js .guide-section.in .why-item{animation-play-state:running;}
@keyframes stepIn2{to{opacity:1; transform:translateY(0);}}
.why-item > div:first-child{
  transition:transform .3s, background .3s, color .3s; background:var(--ez-ink) !important; color:var(--ez-red) !important; font-weight:700;
}
.why-item:hover > div:first-child{background:var(--ez-red) !important; color:#fff !important; transform:rotate(-8deg) scale(1.1);}
.why-item h4{font-family:'Sora',sans-serif; color:var(--ez-ink); margin:0 0 3px;}
.why-item p{color:var(--ez-grey);}

@media(max-width:640px){ .guide-section{padding:24px 20px;} .section{padding:36px 0 64px;} }
@media (prefers-reduced-motion: reduce){ .page-hero *, .manual-wrap *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;} }