/* ═══════════════════════════════════════════
   PRODUCT MANUALS PAGE
   Same structure and scale as productpage.css
   Colors, fonts and type tokens come from global.css
═══════════════════════════════════════════ */

/* ═══ PAGE HEADER — identical to productpage ═══ */

.page-hdr{
  background:#fff;
  padding:32px 0 28px;
  border-bottom:1px solid var(--border);
}

.page-hdr h1{
  font-family:var(--fh);font-size:var(--fs-h3);font-weight:var(--fw-bold);
  color:var(--ink);letter-spacing:-.5px;margin-bottom:10px;
  line-height:var(--lh-h3);
}

.page-hdr p{
  font-family:var(--fb);font-size:var(--fs-body);color:var(--g2);
  line-height:var(--lh-body);max-width:700px;margin-bottom:0;
}

.page-hdr-meta{
  display:flex;align-items:center;gap:14px;
  margin-top:14px;flex-wrap:wrap;
}

/* FIXED: was missing border-radius/padding, so badges rendered as plain boxes */
.page-hdr-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:30px;padding:5px 12px;
  font-family:var(--fb);font-size:var(--fs-tag);font-weight:var(--fw-med);
  color:var(--g1);white-space:nowrap;
}

.page-hdr-badge i{color:var(--red);font-size:12px;}

/* ═══ LAYOUT: SIDEBAR + CONTENT ═══ */

.manuals-wrap{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:0;
  min-height:600px;
}

/* ═══ SIDEBAR — identical to productpage sidebar ═══ */

.manuals-sidebar{
  border-right:1px solid var(--border);
  padding:28px 0;
  background:#fff;
  position:sticky;
  top:73px;
  height:calc(100vh - 73px);
  overflow-y:auto;
  min-width:0;
}

.manuals-sidebar::-webkit-scrollbar{width:4px;}
.manuals-sidebar::-webkit-scrollbar-track{background:transparent;}
.manuals-sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}

.sb-section{padding:0 20px 20px;border-bottom:1px solid var(--border);margin-bottom:0;}
.sb-section:last-child{border-bottom:none;}

.sb-section-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 0 12px;cursor:pointer;
}

.sb-section-title{
  font-family:var(--fh);font-size:var(--fs-small);font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:.6px;
  color:var(--ink);
}

.sb-toggle{font-size:var(--fs-tag);color:var(--g3);transition:transform .2s;}
.sb-toggle.open{transform:rotate(180deg);}

.sb-body{display:block;}
.sb-body.closed{display:none;}

.sb-check{
  display:flex;align-items:center;gap:9px;
  padding:6px 0;cursor:pointer;
  font-family:var(--fb);font-size:var(--fs-tag);
  color:var(--g1);transition:color .15s;
}

.sb-check:hover{color:var(--red);}

.sb-check input[type=checkbox]{
  width:16px;height:16px;flex-shrink:0;
  accent-color:var(--red);cursor:pointer;
}

.sb-count{margin-left:auto;font-size:var(--fs-tag);color:var(--g3);}

/* ═══ MAIN CONTENT ═══ */

.manuals-main{
  padding:24px 28px 48px;
  background:var(--surface);
  min-width:0;
}

/* Toolbar — same as productpage listing toolbar */

.manuals-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  padding-bottom:20px;
  border-bottom:1px solid var(--border);
  margin-bottom:24px;
  background:var(--surface);
  position:sticky;
  top:73px;
  z-index:30;
  padding-top:8px;
}

.manuals-count{
  font-family:var(--fb);font-size:var(--fs-small);color:var(--g2);
  flex-shrink:0;
}

.manuals-count strong{color:var(--ink);font-weight:var(--fw-bold);}

/* FIXED: this rule had NO SELECTOR in the original file — the declarations
   were orphaned after .manuals-count strong, so the browser discarded them
   and the mobile filter button had no styling at all. */
.mob-filter-btn{
  display:none;align-items:center;gap:8px;
  background:#fff;color:var(--ink);
  border:1.5px solid var(--border);
  border-radius:6px;padding:0 16px;
  height:38px;
  font-family:var(--fb);font-size:var(--fs-tag);font-weight:var(--fw-bold);
  cursor:pointer;flex-shrink:0;
  transition:border-color .18s,color .18s,background .18s;
}

.mob-filter-btn:hover{border-color:var(--red);color:var(--red);background:var(--red-bg);}
.mob-filter-btn i{font-size:14px;}

.manual-search{
  display:flex;align-items:center;
  background:#fff;border:1.5px solid var(--border);
  border-radius:6px;overflow:hidden;
  height:38px;min-width:0;
  transition:border-color .2s;
}

.manual-search input{
  border:none;outline:none;font-family:var(--fb);font-size:var(--fs-tag);
  color:var(--ink);padding:0 12px;width:220px;max-width:100%;background:transparent;
}

.manual-search button{
  background:none;border:none;cursor:pointer;
  padding:0 12px;color:var(--g3);font-size:var(--fs-small);
}

.manual-search:focus-within{border-color:var(--red);}

/* ═══ MANUALS GRID — matches .prod-grid ═══ */

.manuals-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

/* ═══ MANUAL CARD — matches .prod-card ═══ */

.manual-card{
  background:#fff;
  border-radius:10px;
  border:1.5px solid var(--border);
  overflow:hidden;
  display:flex;flex-direction:column;
  position:relative;min-width:0;
  transition:border-color .22s,box-shadow .22s,transform .22s;
}

.manual-card:hover{
  border-color:var(--red);
  box-shadow:0 10px 36px rgba(192,57,43,.1);
  transform:translateY(-4px);
}

/* Red top bar on hover — same as prod-card */
.manual-card::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:3px;background:var(--red);
  transform:scaleX(0);transform-origin:left;
  transition:transform .25s cubic-bezier(.16,1,.3,1);z-index:2;
}

.manual-card:hover::before{transform:scaleX(1);}

.manual-card-img-wrap{
  background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  height:180px;
  position:relative;
  overflow:hidden;
}

.manual-card-img-wrap img{
  max-width:140px;max-height:130px;object-fit:contain;
  mix-blend-mode:multiply;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.12));
  transition:transform .4s cubic-bezier(.16,1,.3,1),filter .4s;
}

.manual-card:hover .manual-card-img-wrap img{
  transform:scale(1.08) translateY(-4px);
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.18));
}

.manual-card-body{
  padding:16px 16px 18px;
  flex:1;display:flex;flex-direction:column;
  border-top:1px solid var(--border);
}

/* matches .prod-cat */
.manual-card-brand{
  font-family:var(--fb);font-size:var(--fs-verysmall);font-weight:var(--fw-med);
  letter-spacing:1.5px;text-transform:uppercase;
  color:var(--red);margin-bottom:5px;
}

/* matches .prod-name */
.manual-card-name{
  font-family:var(--fh);font-size:var(--fs-h6);font-weight:var(--fw-bold);
  color:var(--ink);line-height:var(--lh-snug);
  margin-bottom:6px;transition:color .18s;
}

.manual-card:hover .manual-card-name{color:var(--red);}

/* matches .prod-tag */
.manual-card-tag{
  display:inline-flex;align-items:center;gap:4px;
  align-self:flex-start;
  font-family:var(--fb);font-size:var(--fs-verysmall);font-weight:var(--fw-med);
  color:var(--g2);
  background:var(--surface);border:1px solid var(--border);
  border-radius:3px;padding:3px 8px;margin-bottom:14px;
  text-transform:uppercase;
}

.manual-card-tag i{font-size:10px;color:var(--red);}

/* matches .btn-view */
.manual-card-dl{
  margin-top:auto;
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 18px;
  background:var(--red);color:#fff;
  border:none;border-radius:5px;
  font-family:var(--fb);font-size:var(--fs-small);font-weight:var(--fw-bold);
  cursor:pointer;text-decoration:none;
  transition:background .18s,box-shadow .18s;
}

.manual-card-dl:hover{background:var(--red-d);color:#fff;box-shadow:0 5px 16px rgba(192,57,43,.28);}
.manual-card-dl i{font-size:14px;}

/* ═══ EMPTY STATE ═══ */

.manuals-empty{
  text-align:center;padding:60px 20px;color:var(--g3);
  font-family:var(--fb);font-size:var(--fs-body);grid-column:1/-1;
}

.manuals-empty i{font-size:40px;display:block;margin-bottom:12px;color:var(--g4);}
.manuals-empty p{font-size:var(--fs-small);margin-bottom:16px;}

.manuals-empty button{
  padding:9px 20px;background:var(--red);color:#fff;
  border:none;border-radius:6px;font-family:var(--fb);
  font-size:var(--fs-tag);font-weight:var(--fw-bold);cursor:pointer;
}

/* "no manuals at all" block — was inline styles in the blade */
.manuals-none{grid-column:1/-1;text-align:center;padding:60px 20px;}
.manuals-none > i{font-size:48px;color:var(--border);display:block;margin-bottom:16px;}
.manuals-none h3{font-family:var(--fh);font-size:var(--fs-h5);font-weight:var(--fw-bold);color:var(--ink);margin-bottom:6px;}
.manuals-none p{font-family:var(--fb);font-size:var(--fs-small);color:var(--g3);}

/* ════════════════════════════════════════
   RESPONSIVE — same breakpoints as productpage
   1060 | 900 | 576
════════════════════════════════════════ */

@media(max-width:1060px){
  .manuals-grid{grid-template-columns:repeat(2,1fr);}
  .manual-search input{width:160px;}
}

@media(max-width:900px){
  .manuals-wrap{grid-template-columns:1fr;}
  .manuals-sidebar{display:none;}
  .manuals-main{padding:20px 16px 48px;}
  .manuals-grid{grid-template-columns:repeat(2,1fr);}

  .mob-filter-btn{
    display:flex !important;
    flex:1;justify-content:center;
    height:42px;font-size:var(--fs-small);
  }
  .manual-search{flex:1;}
  .manual-search input{width:100%;}
}

@media(max-width:576px){
  .manuals-grid{grid-template-columns:1fr;}
  .manuals-count{font-size:var(--fs-tag);width:100%;order:3;}
  .manuals-toolbar{gap:8px;}
}

/* ════════════════════════════════════════
   MOBILE FILTER DRAWER
   (was entirely inline-styled in the blade)
════════════════════════════════════════ */

.mfd-back{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.5);z-index:8000;
}
.mfd-back.open{display:block;}

.mfd{
  position:fixed;top:0;right:0;
  width:300px;max-width:90vw;height:100dvh;
  background:#fff;z-index:8001;
  padding:24px;overflow-y:auto;
  box-shadow:-4px 0 24px rgba(0,0,0,.15);
  box-sizing:border-box;
  transform:translateX(100%);
  visibility:hidden;
  transition:transform .3s cubic-bezier(.16,1,.3,1),visibility .3s;
}
.mfd.open{transform:translateX(0);visibility:visible;}

.mfd-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}

.mfd-title{font-family:var(--fh);font-size:var(--fs-h5);font-weight:var(--fw-bold);color:var(--ink);}

.mfd-close{
  background:none;border:none;cursor:pointer;
  font-size:24px;line-height:1;color:var(--ink);padding:0;
}

.mfd-section{margin-bottom:20px;}

.mfd-label{
  font-family:var(--fb);font-size:var(--fs-eye);font-weight:var(--fw-bold);
  color:var(--ink);margin-bottom:10px;
  text-transform:uppercase;letter-spacing:1.5px;
}

.mfd-check{
  display:flex;align-items:center;gap:8px;padding:6px 0;
  font-family:var(--fb);font-size:var(--fs-small);color:var(--g1);
  cursor:pointer;
}
.mfd-check input[type=checkbox]{width:16px;height:16px;accent-color:var(--red);cursor:pointer;flex-shrink:0;}

.mfd-actions{margin-top:24px;display:flex;gap:10px;}

.mfd-clear,.mfd-apply{
  flex:1;min-width:0;padding:12px;border-radius:8px;
  font-family:var(--fb);font-size:var(--fs-small);cursor:pointer;
  box-sizing:border-box;
}
.mfd-clear{background:var(--surface);border:1.5px solid var(--border);color:var(--g1);}
.mfd-apply{background:var(--red);color:#fff;border:none;font-weight:var(--fw-bold);}

/* ════════════════════════════════════════
   MANUAL REQUEST MODAL
   (was a <style> block in the blade)
════════════════════════════════════════ */

.manual-modal-backdrop{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.5);z-index:9000;
}
.manual-modal-backdrop.open{display:flex;align-items:center;justify-content:center;}

.manual-modal{
  background:#fff;border-radius:16px;padding:36px;
  width:100%;max-width:480px;margin:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.2);
  box-sizing:border-box;max-height:90dvh;overflow-y:auto;
}

.manual-modal h3{
  font-family:var(--fh);font-size:var(--fs-h4);font-weight:var(--fw-bold);
  color:var(--ink);margin-bottom:6px;line-height:var(--lh-h4);
}

.manual-modal > div > p{
  font-family:var(--fb);font-size:var(--fs-small);color:var(--g3);
  margin-bottom:24px;line-height:var(--lh-body);
}

.mf-field{margin-bottom:16px;}

.mf-field label{
  display:block;font-family:var(--fb);font-size:var(--fs-eye);
  font-weight:var(--fw-bold);color:var(--g1);margin-bottom:6px;
  text-transform:uppercase;letter-spacing:1.5px;
}

.mf-field label .req{color:var(--red);}

.mf-field input{
  width:100%;padding:11px 14px;
  border:1.5px solid var(--border);border-radius:8px;
  font-family:var(--fb);font-size:var(--fs-small);color:var(--ink);
  outline:none;box-sizing:border-box;
  transition:border-color .2s;
}
.mf-field input:focus{border-color:var(--red);}

.manual-modal-actions{display:flex;gap:10px;margin-top:20px;}

.mf-submit{
  flex:1;min-width:0;padding:13px;
  background:var(--red);color:#fff;border:none;border-radius:8px;
  font-family:var(--fb);font-size:var(--fs-btn);font-weight:var(--fw-bold);
  cursor:pointer;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:background .18s;
}
.mf-submit:hover{background:var(--red-d);}

.mf-cancel{
  padding:13px 20px;
  background:var(--surface);color:var(--g2);
  border:1.5px solid var(--border);border-radius:8px;
  font-family:var(--fb);font-size:var(--fs-btn);cursor:pointer;
  box-sizing:border-box;flex-shrink:0;
}

.mf-close-btn{margin-top:16px;width:100%;}

.mf-success{display:none;text-align:center;padding:20px 0;}
.mf-success.show{display:block;}
.mf-success i{font-size:48px;color:#25a244;display:block;margin-bottom:12px;}
.mf-success h4{font-family:var(--fh);font-size:var(--fs-h5);font-weight:var(--fw-bold);color:var(--ink);margin-bottom:8px;}
.mf-success p{font-family:var(--fb);font-size:var(--fs-small);color:var(--g2);line-height:var(--lh-body);}

/* empty state toggled by class, not inline style */
.manuals-empty{display:none;}
.manuals-empty.show{display:block;}

@media(max-width:480px){
  .manual-modal{padding:26px 20px;margin:14px;}
  .manual-modal-actions{flex-direction:column;}
  .mf-cancel{width:100%;}
}