@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700;900&display=swap');

*,*::before,*::after { box-sizing: border-box; }
body {
  font-family: 'Mulish', sans-serif;
  margin: 0;
  background: #fafafa;
}

.blue-line {
  border: none;
  height: 12px;
  background-color: #00A1DE;
  display: block;
  width: 100%;
}

/* Sticky header bar */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fafafa;
  padding: 1em 1.5em;
  box-shadow: 0 2px 10px rgba(0,0,0,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2em;
  flex-wrap: wrap;
}
.top-bar h1 {
  font-size: 1.1em;
  margin: 0;
}
.top-bar button, .top-bar .btn {
  font-size: 0.85em;
  padding: 0.4em 0.9em;
  line-height: 1.4;
}

button, .btn {
  background-color: #00A1DE;
  color: white;
  border: none;
  padding: 0.6em 1.2em;
  margin: 0 0.3em;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  font-family: 'Mulish', sans-serif;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.4;
}
button:hover, .btn:hover { background-color: #007aa8; }

.btn::after {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path fill="%23ffffff" d="M6 1h5v5L8.5 3.5 4.8 7.2 3.8 6.2l3.7-3.7z"/><path fill="%23ffffff" d="M2 3h2v1H2v6h6V8h1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/></svg>') no-repeat center;
  flex-shrink: 0;
}

/* Gallery grid */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.2em;
  padding: 1.2em 1.5em 2em;
}
.card {
  text-align: center;
  background: white;
  padding: 0.8em;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.card img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}
.card h3 {
  font-size: 0.9em;
  margin: 0.4em 0 0.2em;
}
.card p {
  font-size: 0.8em;
  color: #555;
  margin: 0;
}

/* Side panel */
.side-panel {
  position: fixed;
  top: 0; right: -430px;
  width: 420px;
  height: 100%;
  background: #fff;
  box-shadow: -3px 0 12px rgba(0,0,0,0.15);
  transition: right 0.3s;
  overflow-y: auto;
  z-index: 100;
  padding: 1.5em;
}
.side-panel.open { right: 0; }
.panel-close {
  float: right;
  background: none !important;
  border: none;
  font-size: 1.5em;
  cursor: pointer;
  color: #333;
  padding: 0;
  margin: 0;
}
.panel-cover {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: 6px;
  margin-bottom: 1em;
}
.panel-title { margin: 0.3em 0 0.1em; }
.panel-author { color: #555; margin: 0 0 0.5em; }
.panel-isbn { font-size: 0.85em; color: #888; margin: 0 0 1em; }
.panel-link {
  display: inline-block;
  margin-bottom: 1.2em;
  color: #4a90e2;
}
.reviews-heading {
  border-top: 1px solid #ddd;
  padding-top: 1em;
  margin-top: 0.5em;
}
.review {
  background: #f5f5f5;
  border-radius: 6px;
  padding: 0.8em 1em;
  margin-bottom: 0.8em;
}
.review-meta {
  font-weight: bold;
  margin-bottom: 0.3em;
}
.review-stars { color: #f5a623; }
.no-reviews { color: #999; font-style: italic; }

/* Overlay for mobile */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 99;
}
.overlay.visible { display: block; }

/* Footnotes */
.footnotes {
  text-align: center;
  padding: 1.5em 1em;
  font-size: 0.8em;
  color: #999;
}
.footnotes a {
  color: #999;
  margin: 0 0.8em;
  text-decoration: none;
}
.footnotes a:hover {
  text-decoration: underline;
  color: #666;
}