:root{
  /* ====================
          COLORS
  ====================*/
  /* Layout */
  --book-w: 120px;

  /* Colors */
  --bg-dark: #1f1f1f;
  --paper: #FCEFDC;
  --section-bg: #EADECC;

  /* Navigation */
  --brown: #6a4f45;
  --brown-2: #5d433a;

  /* Text */
  --text-dark: #1f1b18;

  /* Quilla Detail (qd-*) */
  --qd-accent: #B58756;
  --qd-text: #1f1f1f;
  --qd-muted: rgba(31,31,31,0.55);
  --qd-border: rgba(31,31,31,0.10);
  --qd-soft: rgba(31,31,31,0.04);

  --qd-success: #1fb46a;
  --qd-danger: #d35b5b;
  --qd-warn: #c7912b;
}

html, body{
  height: 100%;
}

/* Sticky footer behavior:
   - kalau konten pendek, footer tetap di bawah layar
   - kalau konten panjang, footer ikut turun (normal) */
body{
  background: var(--bg-dark);
  color: var(--text-dark);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main{
  flex: 1 0 auto;
}

/* ====================
      LAYOUT SHELL 
==================== */
.quilla-card{
  background: var(--paper);
  width: 100%;
  max-width: 1100px; /* kalau mau full banget: hapus max-width ini */
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  overflow: hidden;
}

/* ====================
STICKY HEADER (NAVBAR)
==================== */
.quilla-sticky{
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* ==== Topbar ==== */
.quilla-topbar{
  background: var(--brown);
  color: #fff;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

.quilla-brand{
  text-decoration: none;
  display: flex;
  align-items: center;
}

.quilla-brand img{
  height: 52px; /* atur ukuran logo di sini (48/52/56) */
  width: auto;
  display: block;
}

.quilla-topbar .quilla-shell{
  align-items: center;
}

.quilla-topbar .input-group-sm > .form-control,
.quilla-topbar .input-group-sm > .btn{
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 16px;
}

/* Icon kanan atas sedikit lebih besar (opsional) */
.quilla-icons .icon-btn{
  font-size: 22px;
}

/* ==== SEARCH BAR ==== */
.quilla-search{
  width: min(520px, 60vw);
}

.quilla-search .form-control{
  border: none;
  border-radius: 999px 0 0 999px;
}

.quilla-search .btn{
  border: none;
  border-radius: 0 999px 999px 0;
}

.quilla-icons .icon-btn{
  color: #fff;
  text-decoration: none;
  opacity: .9;
}
.quilla-icons .icon-btn:hover{ opacity: 1; }

/* ====================
        MENUBAR 
======================= */
.quilla-menubar{
  background: var(--brown-2);
}

.quilla-nav{
  padding: .4rem 0;
  gap: .35rem;
}

.nav-pill{
  color: #fff !important;
  border-radius: 999px;
  padding: .35rem .95rem;
  opacity: .9;
  transition: background .15s ease, opacity .15s ease;
}

.nav-pill.active{
  font-weight: 700;
  opacity: 1;
}

/* ====================
        CAROUSEL
======================= */
.banner-wrap{
  padding: 0;
}

.quilla-carousel img{
  width: 100%;
  height: 260px; /* sesuaikan tingginya */
  object-fit: cover;
  display: block;
}

.carousel-inner{
  background: var(--paper); /* Jika gagal load gambar agar gak hitam/kosong */
}

/* ====================
      SECTION BLOCK
======================= */
.section-title{
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  margin: 18px 0 8px;
  font-weight: 600;
}

.section-block{
  background: var(--section-bg);
  margin: 18px 16px;
  padding: 14px 12px 6px;
  border-radius: 10px;
}

.section-block .section-title{
  margin: 4px 0 10px;
}

.section-block .book-rail{
  padding: 6px 8px 12px;
}

/* ====================
      SECTION BLOCK
======================= */
.book-rail{
  display: flex;
  gap: 16px;
  padding: 6px 8px 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.book-rail::-webkit-scrollbar{
  height: 10px;
}
.book-rail::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.18);
  border-radius: 999px;
}

/* ====================
        BOOK CARD
======================= */
.book-card{
  display: flex;
  width: var(--book-w);
  flex: 0 0 var(--book-w);
  scroll-snap-align: start;
  flex-direction: column;
  align-items: stretch;

  text-decoration: none;
  color: inherit;

  cursor: pointer;
  transition: transform .15s ease;
}

/* ====================
      COVER IMAGE
======================= */
.book-cover{
  height: 180px;
  width: 100%;
  object-fit: contain;
  background: #EADECC;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transition: box-shadow .15s ease, transform .15s ease;
}

.book-author,
.book-name{
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  text-align: left;
}

.book-author{
  margin-top: 8px;
  font-size: .8rem;
  opacity: .85;
}

.book-name{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.book-author{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.book-name, .book-author{
  text-overflow: ellipsis;
}

.book-card:hover{
  transform: translateY(-6px);
}
.book-card:hover .book-cover{
  box-shadow: 0 18px 34px rgba(0,0,0,.28);
}

/* ====================
CATEGORIES PAGE LAYOUT
======================= */
.categories-page{
  display: flex;
  gap: 22px;
  padding: 14px 16px 20px;
}

.category-panel{
  width: 230px;
  flex: 0 0 230px;
}

.category-head{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 600;
  color: #2a2420;
  line-height: 1;
}

.category-divider{
  height: 2px;
  background: rgba(0,0,0,.55);
  margin: 10px 0 14px;
}

.category-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.category-item{
  text-decoration: none;
  color: #3a312c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 600;
  padding-left: 0;
  transition: all .12s ease;
}

.category-head-title{
  color: #000 !important;
  text-decoration: none !important;
  font-weight: 800;
  cursor: pointer;
}

.category-head-title:hover,
.category-head-title:focus,
.category-head-title:active,
.category-head-title.active{
  color: #000 !important;
  text-decoration: none !important;
}

.category-item:hover,
.category-item.active{
  padding-left: 10px;
  color: #B58756;
  font-weight: 800;
}

.category-main{
  flex: 1;
}

.books-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 22px 18px;
  padding-top: 6px;
}

/* ====================
        FAVORITES
======================= */
.favorites-page{
  background: var(--paper);
  padding: 18px 0 40px;
}

.favorites-container{
  width: min(1100px, 92vw);
  margin: 0 auto;
}

.fav-section{
  background: var(--section-bg);
  border-radius: 14px;
  padding: 18px 16px 14px;
  margin-bottom: 18px;
}

.fav-title{
  text-align: center;
  margin: 0 0 12px;
  font-weight: 800;
  color: #111;
}

.fav-title::after{
  content: "";
  display: block;
  width: 85px;
  height: 3px;
  background: #B58756;
  margin: 8px auto 0;
  border-radius: 2px;
}

.fav-carousel{
  position: relative;
}

.fav-track{
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 6px 42px 10px;
}

.fav-track::-webkit-scrollbar{ height: 0; }
.fav-track{ scrollbar-width: none; }

.fav-track .book-card{
  flex: 0 0 auto;
}

.carousel-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-55%);
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 26px;
  line-height: 38px;
  display: grid;
  place-items: center;
  cursor: pointer;

  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.fav-carousel:hover .carousel-arrow{
  opacity: 1;
  pointer-events: auto;
}

.carousel-arrow.left{ left: 10px; }
.carousel-arrow.right{ right: 10px; }

.books-grid .book-card{
  width: 100%;
}

/* ====================
      PROFILE PAGE
======================= */
.profile-body{
  background: var(--paper);
  margin: 0;
}

.profile-shell{
  display: flex;
  min-height: 100vh;
}

.profile-sidebar{
  flex: 0 0 40%;
  max-width: 210px;
  width: 40%;
  background: var(--brown);
  color: #fff;
  padding: 18px 16px;
}

.profile-brand{
  margin-bottom: 18px;
}

.profile-logo{
  width: 100%;
  max-width: 240px;
  height: auto;
  display: block;
}

.profile-nav{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.profile-link{
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.92);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 15px;
}

.profile-link i{
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  opacity: .9;
}

.profile-link:hover{
  background: rgba(255,255,255,.10);
  color: #fff;
}

.profile-nav-spacer{ height: 18px; }

.profile-main{
  flex: 1;
  padding: 26px 22px;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.profile-card{
  width: min(980px, 100%);
  background: var(--paper);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  padding: 28px 22px;
  display: grid;
  grid-template-columns: 1fr 1px 1.2fr;
  gap: 18px;
  align-items: start;
}

.profile-divider{
  background: rgba(0,0,0,.25);
  width: 1px;
  height: 100%;
}

.profile-h2{
  font-weight: 800;
  margin: 0 0 14px;
}

.profile-right-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.profile-right-head .profile-h2{
  margin: 0;
}

.profile-back{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  color: #111;
  text-decoration: none;
  font-weight: 700;
  height: 38px;
}

.profile-back:hover{
  background: rgba(0,0,0,.05);
}

.profile-left{ text-align: center; }

.profile-avatar{
  width: 120px;
  height: 120px;
  border-radius: 999px;
  border: 6px solid rgba(0,0,0,.10);
  display: grid;
  place-items: center;
  margin: 18px auto 14px;
  background: #fff;
}

.profile-avatar i{
  font-size: 66px;
  color: #111;
}

.profile-btn{
  border: 1px solid rgba(0,0,0,.25);
  background: #fff;
  padding: 8px 16px;
  border-radius: 10px;
  font-weight: 600;
}

.profile-note{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(0,0,0,.65);
}

.profile-fields{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}

.profile-field{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}

.profile-label{
  font-size: 12px;
  color: rgba(0,0,0,.65);
}

.profile-value{
  font-weight: 700;
  color: #111;
}

.profile-edit{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  display: grid;
  place-items: center;
}

.profile-edit i{ font-size: 16px; }

.profile-edit:hover{
  background: rgba(0,0,0,.05);
}

.profile-nav-title{
  font-size: 12px;
  letter-spacing: .08em;
  font-weight: 800;
  opacity: .85;
  margin: 10px 10px 6px;
}

.profile-nav-divider{
  height: 1px;
  background: rgba(255,255,255,.22);
  margin: 14px 10px;
}

.profile-link.active{
  background: rgba(255,255,255,.14);
  color: #fff;
}

@media (max-width: 900px){
  .profile-shell{ flex-direction: column; }
  .profile-sidebar{ flex: none; max-width: none; width: 100%; }
  .profile-card{ grid-template-columns: 1fr; }
  .profile-divider{ display: none; }
}

/* ====================
          FOOTER
======================= */
.quilla-footer{
  background: var(--brown);
  color: #fff;
  margin-top: auto;
}

.footer-brand{
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.6rem;
}

.footer-title{
  font-weight: 700;
  margin-bottom: .5rem;
}

.footer-link{
  display: block;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  margin: .25rem 0;
  font-size: .9rem;
}
.footer-link:hover{ color: #fff; }

/* Wrapper tambahan untuk card-book kecil di Favorites (biar bisa ada link remove) */
.book-card-wrap{
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.fav-remove{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  color: rgba(31,31,31,0.7);
}

.fav-remove:hover{
  text-decoration: underline;
  color: rgba(31,31,31,0.95);
}

/* GLOBAL BACKGROUND (ALL PAGES) - color + tiled image overlay */ 
/* ========================================================= 
Quilla - Book Detail (Book Description) 
========================================================= */ 
/* Wrapper tambahan untuk card-book kecil di Favorites (biar bisa ada link remove) */ 
.book-card-wrap{ 
display: flex; 
flex-direction: column; 
align-items: stretch; 
} 
.fav-remove{ 
margin-top: 6px; 
font-size: 12px; 
font-weight: 700; 
text-decoration: none; 
color: rgba(31,31,31,0.7); 
} 
.fav-remove:hover{ 
text-decoration: underline; 
color: rgba(31,31,31,0.95); 
} 
/* Variables */ 
:root{ 
--qd-accent: #B58756; 
--qd-text: #1f1f1f; 
--qd-muted: rgba(31,31,31,0.55); 
--qd-border: rgba(31,31,31,0.10); 
--qd-soft: rgba(31,31,31,0.04); 
--qd-success: #1fb46a; 
--qd-danger: #d35b5b; 
--qd-warn: #c7912b; 
} 
/* wrapper di dalam .quilla-card */ 
.qd-wrap{ 
max-width: 1120px; 
margin: 0 auto; 
padding: 10px 14px 18px; 
} 
.qd-panel{ 
background: #fff; 
border: 1px solid var(--qd-border); 
border-radius: 18px; 
padding: 22px; 
box-shadow: 0 6px 18px rgba(0,0,0,0.05); 
margin-bottom: 18px; 
} 
.qd-grid{ 
display: grid; 
grid-template-columns: 320px 1fr; 
gap: 26px; 
} 
.qd-left{ 
display: flex; 
flex-direction: column; 
align-items: center; 
} 
.qd-cover{ 
width: 260px; 
max-width: 100%; 
border: none !important; 
border-radius: 0 !important; 
background: transparent !important; 
overflow: visible !important; 
box-shadow: none !important; 
} 
.qd-cover img{ 
width: 100%; 
height: auto; 
display: block; 
border-radius: 0 !important; 
box-shadow: none !important; 
} 
.qd-availability{ 
width: 260px; 
max-width: 100%; 
margin-top: 12px; 
} 
.qd-pill{ 
display: flex; 
justify-content: center; 
align-items: center; 
width: 100%; 
height: 40px; 
border-radius: 10px; 
font-weight: 800; 
letter-spacing: 0.4px; 
font-size: 13px; 
border: 1px solid transparent; 
} 
.qd-pill.is-available{ 
background: rgba(31, 180, 106, 0.12); 
color: #0e6a3a; 
border-color: rgba(31, 180, 106, 0.22); 
} 
.qd-pill.is-borrowed{ 
background: rgba(199, 145, 43, 0.12); 
color: #7a520a; 
border-color: rgba(199, 145, 43, 0.25); 
} 
.qd-pill.is-unavailable{ 
background: rgba(211, 91, 91, 0.12); 
color: #8a1f1f; 
border-color: rgba(211, 91, 91, 0.25); 
} 
.qd-actions{ 
width: 260px; 
max-width: 100%; 
display: flex; 
flex-direction: column; 
gap: 10px; 
margin-top: 10px; 
} 
.qd-action-btn{ 
background: transparent; 
border: none; 
padding: 8px 10px; 
cursor: pointer; 
display: inline-flex; 
align-items: center; 
justify-content: center; 
gap: 8px; 
color: var(--qd-text); 
font-size: 13px; 
border-radius: 10px; 
text-decoration: none; 
} 
.qd-action-btn:hover{ 
background: rgba(181, 135, 86, 0.10); 
} 
.qd-icon{ font-size: 16px; line-height: 1; } 
/* Main action button (Borrowed/returned) */ 
.qd-mainbtn{ 
width: 100%; 
height: 42px; 
border-radius: 12px; 
border: 1px solid rgba(31,31,31,0.18); 
background: #fff; 
font-weight: 900; 
cursor: pointer; 
display: inline-flex; 
align-items: center; 
justify-content: center; 
text-decoration: none; 
color: var(--qd-text); 
} 
.qd-mainbtn:hover{ background: rgba(0,0,0,.03); } 
.qd-mainbtn:disabled{ 
opacity: .55; 
cursor: not-allowed; 
} 
.qd-mainbtn-primary{ 
background: rgba(181,135,86,.18); 
border-color: rgba(181,135,86,.35); 
} 
.qd-mainbtn-primary:hover{ background: rgba(181,135,86,.26); } 
.qd-mainbtn-danger{ 
background: rgba(211,91,91,.14); 
border-color: rgba(211,91,91,.35); 
} 
.qd-mainbtn-danger:hover{ background: rgba(211,91,91,.20); } 
.qd-borrow-meta{ 
width: 260px; 
max-width: 100%; 
margin-top: 10px; 
font-size: 12px; 
color: rgba(31,31,31,.7); 
} 
.qd-title{ 
margin: 0 0 8px; 
font-size: 28px; 
line-height: 1.15; 
color: var(--qd-text); 
} 
.qd-meta{ 
display: flex; 
align-items: center; 
gap: 10px; 
font-size: 13px; 
color: var(--qd-muted); 
margin-bottom: 10px; 
} 
.qd-dot{ opacity: 0.6; } 
.qd-section{ margin-top: 14px; } 
.qd-section-title{ 
margin: 0 0 8px; 
font-size: 13px; 
font-weight: 900; 
color: var(--qd-text); 
} 
.qd-desc{ 
color: rgba(31,31,31,0.78); 
font-size: 13px; 
line-height: 1.6; 
max-height: 64px; 
overflow: hidden; 
position: relative; 
} 
.qd-desc:after{ 
content: ""; 
position: absolute; 
left: 0; right: 0; bottom: 0; 
height: 26px; 
background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)); 
} 
.qd-desc.is-expanded{ max-height: none; } 
.qd-desc.is-expanded:after{ display: none; } 
.qd-readmore{ 
margin-top: 6px; 
background: transparent; 
border: none; 
padding: 6px 0; 
cursor: pointer; 
color: var(--qd-accent); 
font-weight: 800; 
font-size: 13px; 
} 
.qd-readmore:hover{ text-decoration: underline; } 
@media (max-width: 860px){ 
.qd-grid{ grid-template-columns: 1fr; } 
.qd-left{ align-items: flex-start; } 
.qd-cover, .qd-availability, .qd-actions, .qd-borrow-meta{ width: 100%; max-width: 360px; } 
.qd-title{ font-size: 24px; } 
} 
/* ========================================================= 
BOOK DETAIL (NEW) — book.php 
========================================================= */ 
.bd-page{ 
padding: 18px 0 8px; 
} 
.bd-card{ 
background: #fff; 
border-radius: 16px; 
margin: 18px 16px; 
padding: 18px; 
box-shadow: 0 10px 30px rgba(0,0,0,.10); 
} 
.bd-top{ 
display: grid; 
grid-template-columns: 260px 1fr; 
gap: 22px; 
align-items: start; 
} 
.bd-left{ 
display: flex; 
flex-direction: column; 
align-items: center; 
} 
.bd-cover-wrap{ 
width: 240px; 
height: 320px; 
background: #f3efe8; 
border-radius: 14px; 
overflow: hidden; 
display: grid; 
place-items: center; 
box-shadow: 0 10px 26px rgba(0,0,0,.14); 
} 
.bd-cover{ 
width: 100%; 
height: 100%; 
object-fit: cover; 
display: block; 
} 
.bd-pill{ 
margin-top: 14px; 
width: 100%; 
text-align: center; 
padding: 8px 10px; 
border-radius: 10px; 
font-weight: 800; 
font-size: 12px; 
letter-spacing: .6px; 
} 
.bd-pill.is-available{ 
background: #e9f6ef; 
color: #177245; 
border: 1px solid rgba(23,114,69,.20); 
} 
.bd-pill.is-borrowed{ 
background: #fff1f1; 
color: #8a1f1f; 
border: 1px solid rgba(138,31,31,.20); 
} 
.bd-pill.is-warning{ 
background: #fff4e8; 
color: #7a3b0f; 
border: 1px solid rgba(122,59,15,.20); 
} 
.bd-quick-actions{ 
width: 100%; 
display: flex; 
justify-content: center; 
gap: 14px; 
margin-top: 10px; 
} 
.bd-action{ 
display: inline-flex; 
align-items: center; 
gap: 8px; 
padding: 8px 12px; 
border-radius: 10px; 
background: #f7f2ea; 
color: #2b2420; 
text-decoration: none; 
font-weight: 700; 
font-size: 13px; 
border: 1px solid rgba(0,0,0,.08); 
} 
.bd-action:hover{ filter: brightness(.98); } 
.bd-action.is-copied::after{ 
content: "✓ Copied"; 
margin-left: 8px; 
font-weight: 800; 
color: #177245; 
} 
.bd-main-action{ 
width: 100%; 
margin-top: 10px; 
display: flex; 
flex-direction: column; 
gap: 8px; 
} 
.bd-borrow{ 
width: 100%; 
padding: 12px 14px; 
border-radius: 12px; 
border: 1px solid rgba(0,0,0,.12); 
background: #efe7dc; 
color: #221c18; 
font-weight: 900; 
text-decoration: none; 
text-align: center; 
} 
.bd-borrow:hover{ filter: brightness(.98); } 
.bd-borrow.is-return{ 
background: #f7d9d9; 
border-color: rgba(138,31,31,.25); 
} 
.bd-borrow[disabled]{ 
opacity: .55; 
cursor: not-allowed; 
} 
.bd-due{ 
text-align: center; 
font-size: 13px; 
color: rgba(0,0,0,.65); 
} 
.bd-right{ 
min-width: 0; 
} 
.bd-title{ 
margin: 0; 
font-size: 28px; 
font-weight: 900; 
color: #111; 
} 
.bd-meta{ 
margin-top: 6px; 
color: rgba(0,0,0,.60); 
font-size: 13px; 
} 
.bd-authors{ 
margin-top: 14px; 
} 
.bd-author-row{ 
display: flex; 
gap: 8px; 
align-items: baseline; 
} 
.bd-author-name{ 
font-weight: 900; 
color: #3a312c; 
} 
.bd-author-role{ 
color: rgba(0,0,0,.55); 
font-size: 12px; 
font-weight: 700; 
} 
.bd-rating-row{ 
margin-top: 10px; 
display: flex; 
align-items: center; 
gap: 12px; 
flex-wrap: wrap; 
} 
.bd-stars{ 
display: inline-flex; 
gap: 2px; 
font-size: 14px; 
line-height: 1; 
} 
.bd-stars .star{ color: rgba(0,0,0,.18); } 
.bd-stars .star.filled{ color: #B58756; } 
.bd-rating-text{ 
display: inline-flex; 
align-items: baseline; 
gap: 8px; 
} 
.bd-rating-muted{ color: rgba(0,0,0,.55); font-size: 12px; } 
.bd-rate-box{ margin-left: auto; } 
.bd-rate-form{ display: flex; align-items: center; gap: 8px; } 
.bd-rate-label{ font-size: 12px; font-weight: 800; color: rgba(0,0,0,.65); } 
.bd-rate-select{ 
padding: 6px 10px; 
border-radius: 10px; 
border: 1px solid rgba(0,0,0,.18); 
background: #fff; 
font-weight: 800; 
} 
.bd-login-rate{ 
font-weight: 800; 
color: #B58756; 
text-decoration: none; 
} 
.bd-login-rate:hover{ text-decoration: underline; } 
.bd-tags{ 
margin-top: 10px; 
display: flex; 
gap: 8px; 
flex-wrap: wrap; 
} 
.bd-tag{ 
background: #f6f0e8; 
border: 1px solid rgba(0,0,0,.08); 
color: #3a312c; 
border-radius: 999px; 
padding: 6px 10px; 
font-size: 12px; 
font-weight: 800; 
} 
.bd-desc-block{ 
margin-top: 14px; 
} 
.bd-desc-title{ 
font-weight: 900; 
font-size: 13px; 
margin-bottom: 6px; 
} 
.bd-desc{ 
color: rgba(0,0,0,.72); 
font-size: 13px; 
line-height: 1.65; 
max-height: 88px; 
overflow: hidden; 
position: relative; 
} 
.bd-desc:after{ 
content: ""; 
position: absolute; 
left: 0; right: 0; bottom: 0; 
height: 30px; 
background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)); 
} 
.bd-desc.is-expanded{ max-height: none; } 
.bd-desc.is-expanded:after{ display: none; } 
.bd-readmore{ 
margin-top: 6px; 
background: transparent; 
border: none; 
padding: 6px 0; 
cursor: pointer; 
color: #B58756; 
font-weight: 900; 
font-size: 13px; 
} 
.bd-readmore:hover{ text-decoration: underline; } 
.bd-details{ 
margin-top: 14px; 
border-top: 1px solid rgba(0,0,0,.08); 
padding-top: 12px; 
} 
.bd-details-title{ 
font-weight: 900; 
font-size: 13px; 
margin-bottom: 10px; 
} 
.bd-detail-grid{ 
display: grid; 
grid-template-columns: repeat(2, minmax(0, 1fr)); 
gap: 10px 18px; 
} 
.bd-detail-item{ 
display: grid; 
grid-template-columns: 140px 1fr; 
gap: 10px; 
align-items: baseline; 
} 
.bd-detail-label{ color: rgba(0,0,0,.55); font-size: 12px; font-weight: 800; } 
.bd-detail-value{ color: #2a2420; font-size: 12px; font-weight: 900; } 
.bd-reco{ 
padding: 14px 14px 10px; 
} 
.bd-reco-head{ 
font-weight: 900; 
font-size: 16px; 
margin-bottom: 10px; 
} 
.bd-reco-rail{ 
padding: 6px 8px 12px; 
} 
@media (max-width: 980px){ 
.bd-top{ grid-template-columns: 1fr; } 
.bd-left{ flex-direction: row; align-items: flex-start; gap: 16px; } 
.bd-cover-wrap{ width: 180px; height: 240px; } 
.bd-pill, .bd-quick-actions, .bd-main-action{ width: auto; } 
.bd-main-action{ flex: 1; } 
.bd-rate-box{ margin-left: 0; } 
} 
@media (max-width: 560px){ 
.bd-card{ padding: 14px; } 
.bd-left{ flex-direction: column; align-items: center; } 
.bd-detail-grid{ grid-template-columns: 1fr; } 
.bd-detail-item{ grid-template-columns: 120px 1fr; } 
} 

/* =========================
   Navbar auto-hide on scroll
   - Hide after scroll down + idle 10s
   - Show on scroll up / mouse near top
   ========================= */
#mainNavbar{
  top: 0;
  z-index: 9999;
  transition: transform 260ms ease, opacity 260ms ease;
  will-change: transform, opacity;
}

#mainNavbar.navbar-hidden{
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}

/* ====================
        REGISTER
======================= */
.register-form {
  background: var(--paper);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  margin: auto;
}

.register-form h2 {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.register-form input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #fefefc; /* soft background for inputs */
  font-size: 14px;
}

.register-form button {
  width: 100%;
  padding: 12px;
  background-color: var(--brown);
  border-radius: 8px;
  color: white;
  font-weight: bold;
  border: none;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.2s;
}

.register-form button:hover {
  background-color: #8f6a55; /* slightly darker on hover */
}

.register-form a {
  text-align: center;
  display: block;
  margin-top: 15px;
  text-decoration: none;
  font-size: 14px;
  color: var(--brown);
}

.register-form a:hover {
  text-decoration: underline;
}