/* ------------------------------
   Manga gallery (shortcode)
--------------------------------*/
.hl-manga-gallery-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:10px; /* spacing like example */
}
@media (max-width: 768px){
  .hl-manga-gallery-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:10px;
  }
}
.hl-manga-thumb img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}

/* ------------------------------
   Reader page base
--------------------------------*/
body.hl-manga-reader-page{
  background:#000;
  color:#fff;
  margin:0;
}

/* Back to manga (centered above image; NOT fixed; more vertical breathing room) */
.hl-back-top{
  position:relative;
  display:flex;
  justify-content:center;
  margin:22px 0 20px !important; /* more space top+bottom */
  z-index:2;
}
.hl-back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-decoration:none;
  background:transparent;
  padding:8px 14px;
  border:1px solid transparent;
  border-radius:0;
  box-sizing:border-box;
  transition: color .12s ease, border-color .12s ease;
}
.hl-back:hover{
  color:#ff0000;
  border-color:#ff0000;
}

/* Main image container */
.hl-reader-main{
  position:relative;
  max-width:1200px;
  margin:0 auto;
  padding:0 10px 84px; /* leave room for bottom bar */
}
.hl-image-wrap{ margin:0; }
#hl-reader-img{
  width:100%;
  height:auto;
  display:block;
  margin:0 auto;
}

/* Click zones (prev/next by clicking image sides) */
.hl-click-zone{
  position:absolute;
  top:0;
  bottom:84px;
  width:35%;
  cursor:pointer;
}
.hl-click-zone.hl-left{ left:0; }
.hl-click-zone.hl-right{ right:0; }

/* ------------------------------
   Bottom navigation
--------------------------------*/
.hl-bottom-nav{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:64px;
  background:#000;
  border-top:1px solid rgba(255,255,255,0.12);
  display:flex;
  align-items:stretch;
  padding:0 12px;
  box-sizing:border-box;
  z-index:9998;
  font-size:16px;
  line-height:1;
}

.hl-nav-left,
.hl-nav-right{
  display:flex;
  align-items:stretch;
  gap:28px;
  flex:1 1 0;
}
.hl-nav-left{ justify-content:flex-start; }
.hl-nav-right{ justify-content:flex-end; }

/* Current page MUST be perfectly centered and never shift */
.hl-bottom-nav .hl-current{
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  transform:translateX(-50%);
}

.hl-bottom-nav .hl-btn,
.hl-bottom-nav .hl-current{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  margin:0;
  color:#fff;
  background:transparent;
  border:1px solid transparent; /* reserve border so hover doesn't shift */
  border-radius:0;
  box-sizing:border-box;
  text-decoration:none;
  cursor:pointer;
  transition: color .12s ease, border-color .12s ease;
  white-space:nowrap;
  -webkit-tap-highlight-color: transparent;
}

/* Hover effect: red text + square outline (full height because buttons are height:100%) */
.hl-bottom-nav .hl-btn:hover,
.hl-bottom-nav .hl-current:hover{
  color:#ff0000;
  border-color:#ff0000;
}

/* Current page: hover only, no active/focus visuals, and no movement on click */
.hl-bottom-nav .hl-current:active{
  color:#fff;
  border-color:transparent;
  background:transparent;
}
.hl-bottom-nav .hl-current:focus,
.hl-bottom-nav .hl-current:focus-visible{
  outline:none;
  box-shadow:none;
}

/* Boundary buttons hidden entirely */
.hl-bottom-nav .is-hidden{ display:none !important; }

/* ------------------------------
   Page drawer (vertical)
--------------------------------*/
.hl-page-drawer{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:76px;
  width:110px;
  max-height:60vh;
  overflow:auto;
  background:#000;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:0;
  z-index:9999;
  display:none;
}
.hl-page-drawer.open{ display:block; }

.hl-drawer-inner{ display:grid; grid-template-columns:1fr; }

.hl-page-link{
  display:block;
  color:#fff;
  text-decoration:none;
  text-align:center;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.10);
  box-sizing:border-box;
  transition: color .12s ease, outline-color .12s ease;
}
.hl-page-link:last-child{ border-bottom:0; }

.hl-page-link:hover{
  color:#ff0000;
  outline:1px solid #ff0000;
  outline-offset:-1px;
}

/* Highlight current page inside drawer */
.hl-page-link.is-current{
  outline:1px solid rgba(255,255,255,0.55);
  outline-offset:-1px;
}

/* Mobile optimization */
@media (max-width: 768px){
  .hl-bottom-nav{ height:56px; padding:0 8px; font-size:16px; }
  .hl-nav-left, .hl-nav-right{ gap:18px; }
  .hl-bottom-nav .hl-btn, .hl-bottom-nav .hl-current{ padding:0 12px; }
  .hl-click-zone{ width:40%; }
  .hl-page-drawer{ width:78px; bottom:66px; }
  .hl-back-top{ margin:18px 0 18px !important; }
}


/* ============================================================
   v1.1.6 UI adjustments (requested)
   - More spacing for Back to manga
   - Desktop: group + center nav buttons
   - Mobile: icon-only nav (no words)
   ============================================================ */

/* Back to manga spacing */
.hl-back-top{
  margin:28px 0 28px !important;
}

/* Desktop: center the whole control group */
.hl-bottom-nav{
  justify-content:center !important;
  gap:22px !important;
}

/* Ensure left/right groups don't push to edges */
.hl-bottom-nav .hl-nav-left,
.hl-bottom-nav .hl-nav-right{
  flex:0 0 auto !important;
  display:flex !important;
  align-items:stretch !important;
  gap:22px !important;
}

/* Current page in-flow, centered within the group */
.hl-bottom-nav .hl-current{
  position:static !important;
  transform:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 14px !important;
  border:1px solid transparent !important; /* reserve border to prevent shifting */
  border-radius:0 !important;
}

/* Remove pressed/active visual for current */
.hl-bottom-nav .hl-current:active{
  transform:none !important;
  filter:none !important;
}

/* Keep hover outline behaviour for all buttons (square, full height) */
.hl-bottom-nav .hl-btn,
.hl-bottom-nav .hl-current{
  height:100% !important;
  border-radius:0 !important;
  border:1px solid transparent !important;
  box-sizing:border-box !important;
}

/* Mobile: match reference (icons only, no words) */
@media (max-width: 768px){
  .hl-bottom-nav{ height:56px !important; }
  .hl-bottom-nav .hl-nav-left,
  .hl-bottom-nav .hl-nav-right{
    gap:14px !important;
  }
  .hl-bottom-nav .hl-btn{
    padding:0 12px !important;
    min-width:44px !important;
    font-size:0 !important; /* hide label text */
  }
  .hl-bottom-nav .hl-first::before{ content:"«"; font-size:18px; }
  .hl-bottom-nav .hl-prev::before{  content:"‹"; font-size:18px; }
  .hl-bottom-nav .hl-next::before{  content:"›"; font-size:18px; }
  .hl-bottom-nav .hl-last::before{  content:"»"; font-size:18px; }

  .hl-bottom-nav .hl-current{
    font-size:16px !important;
    padding:0 10px !important;
    min-width:auto !important;
  }
}


/* ===== v1.1.7 UI fixes ===== */
/* Desktop: keep current page ALWAYS centered; group buttons around center using CSS grid */
@media (min-width: 769px){
  .hl-bottom-nav{
    display:grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    column-gap:22px !important;
    align-items:stretch !important;
    justify-items:stretch !important;
  }
  .hl-bottom-nav .hl-nav-left{
    grid-column:1 !important;
    justify-self:end !important;
    display:flex !important;
    align-items:stretch !important;
    gap:22px !important;
  }
  .hl-bottom-nav .hl-current{
    grid-column:2 !important;
    justify-self:center !important;
    align-self:stretch !important;
    display:inline-flex !important;
  }
  .hl-bottom-nav .hl-nav-right{
    grid-column:3 !important;
    justify-self:start !important;
    display:flex !important;
    align-items:stretch !important;
    gap:22px !important;
  }

  /* Remove pressed/active effects on desktop: hover-only */
  .hl-bottom-nav .hl-btn:active,
  .hl-bottom-nav .hl-current:active{
    transform:none !important;
    filter:none !important;
    background:transparent !important;
    color:#fff !important;
    border-color:transparent !important;
  }
}
/* Ensure borders are reserved to prevent any shifting on hover/active */
.hl-bottom-nav .hl-btn,
.hl-bottom-nav .hl-current{
  border:1px solid transparent !important;
  box-sizing:border-box !important;
}


/* ===== v1.1.8 hotfix: mobile centering + remove current pressed effect on ALL devices ===== */

/* Current page: never show pressed/active effect (all devices) */
.hl-bottom-nav .hl-current:active,
.hl-bottom-nav .hl-current:focus:active{
  transform:none !important;
  filter:none !important;
  background:transparent !important;
  color:#fff !important;
  border-color:transparent !important;
}

/* Mobile: keep current page ALWAYS centered too */
@media (max-width: 768px){
  .hl-bottom-nav{
    display:grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    column-gap:14px !important;
    align-items:stretch !important;
    justify-items:stretch !important;
  }
  .hl-bottom-nav .hl-nav-left{
    grid-column:1 !important;
    justify-self:end !important;
    display:flex !important;
    align-items:stretch !important;
    gap:14px !important;
  }
  .hl-bottom-nav .hl-current{
    grid-column:2 !important;
    justify-self:center !important;
    align-self:stretch !important;
    display:inline-flex !important;
  }
  .hl-bottom-nav .hl-nav-right{
    grid-column:3 !important;
    justify-self:start !important;
    display:flex !important;
    align-items:stretch !important;
    gap:14px !important;
  }
}


/* --- v1.1.9 UI interaction fixes --- */

/* Desktop: remove pressed/active effects on ALL nav buttons */
@media (min-width: 769px){
  .hl-bottom-nav .hl-btn:active,
  .hl-bottom-nav .hl-current:active{
    color:#fff !important;
    border-color:transparent !important;
    background:transparent !important;
    transform:none !important;
    filter:none !important;
    box-shadow:none !important;
  }
}

/* Mobile: restore "cloud" feedback on tap for nav buttons */
@media (max-width: 768px){
  .hl-bottom-nav .hl-btn:active{
    color:#ff0000 !important;
    border-color:#ff0000 !important;
    background:transparent !important;
  }
  /* Current page tap state is controlled via JS class */
  .hl-bottom-nav .hl-current.is-open{
    color:#ff0000 !important;
    border-color:#ff0000 !important;
    background:transparent !important;
  }
  /* When drawer is open, keep current highlighted even without :active */
  .hl-bottom-nav .hl-current[aria-expanded="true"]{
    color:#ff0000 !important;
    border-color:#ff0000 !important;
  }
}

/* Ensure hover "cloud" exists for all buttons (desktop hover) */
@media (hover:hover){
  .hl-bottom-nav .hl-btn:hover,
  .hl-bottom-nav .hl-current:hover{
    color:#ff0000 !important;
    border-color:#ff0000 !important;
  }
}


/* ============================================================
   v1.1.9 UI FIX: Current Page interactions + restore hover/tap
   - Desktop: current page hover only (red text + red square border), no pressed effect.
   - Mobile: current page pressed/toggle while drawer open; no hover.
   - Other buttons: red border "cloud" on hover (desktop) and active (mobile).
   ============================================================ */

/* Reserve border space to prevent layout shift */
.hl-bottom-nav .hl-btn,
.hl-bottom-nav .hl-current{
  border:1px solid transparent !important;
  border-radius:0 !important;
  box-sizing:border-box !important;
}

/* Desktop */
@media (min-width: 769px){
  .hl-bottom-nav .hl-btn:hover,
  .hl-bottom-nav .hl-current:hover{
    color:#ff0000 !important;
    border-color:#ff0000 !important;
  }

  /* Remove pressed/active visuals on desktop */
  .hl-bottom-nav .hl-btn:active,
  .hl-bottom-nav .hl-current:active,
  .hl-bottom-nav .hl-btn:focus:active,
  .hl-bottom-nav .hl-current:focus:active{
    transform:none !important;
    filter:none !important;
    box-shadow:none !important;
  }
}

/* Mobile */
@media (max-width: 768px){
  /* No hover effects on touch layouts */
  .hl-bottom-nav .hl-btn:hover,
  .hl-bottom-nav .hl-current:hover{
    color:inherit !important;
    border-color:transparent !important;
  }

  /* Tap feedback for nav buttons */
  .hl-bottom-nav .hl-btn:active{
    color:#ff0000 !important;
    border-color:#ff0000 !important;
  }

  /* Current page: stays highlighted only while drawer open (or while tapping) */
  .hl-bottom-nav .hl-current.is-open,
  .hl-bottom-nav .hl-current[aria-expanded="true"]{
    color:#ff0000 !important;
    border-color:#ff0000 !important;
  }

  .hl-bottom-nav .hl-current:active{
    color:#ff0000 !important;
    border-color:#ff0000 !important;
  }
}