/* ============================================================
   Controls, Buttons, Dots, Language Toggle, Toolbar
   ============================================================ */

.controls {
  display: flex; align-items: center; gap: 16px;
}
.btn {
  background: rgba(16,38,104,.75);
  color: #fff; border: 1px solid rgba(195,150,110,.35);
  padding: 9px 24px; border-radius: 3px;
  font-family: 'Noto Sans', sans-serif;
  font-size: 11.5px; font-weight: 500;
  letter-spacing: .4px; cursor: pointer;
  transition: all .25s; min-width: 100px; text-align: center;
}
.btn:hover:not(:disabled) { background: var(--navy); border-color: var(--gold); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .2; cursor: not-allowed; }

.btn-dl {
  background: var(--navy);
  border: 1px solid rgba(195,150,110,.35);
  font-size: 10px; padding: 7px 16px;
  color: rgba(255,255,255,.85);
}
.btn-dl:hover { border-color: var(--gold); background: var(--navy-dark); }

.dots { display: flex; gap: 7px; }
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  transition: background .35s, transform .35s, box-shadow .35s;
  cursor: pointer;
  border: none; padding: 0; font: inherit;
}
.dot:hover { background: rgba(255,255,255,.35); }
.dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.dot.active {
  background: var(--gold);
  transform: scale(1.3);
  box-shadow: 0 0 8px rgba(195,150,110,.35);
}

/* Language toggle */
.lang-toggle {
  position: fixed; top: 16px; right: 20px;
  display: flex; gap: 2px; z-index: 1000;
  background: rgba(0,0,0,.25); border-radius: 4px;
  padding: 2px; backdrop-filter: blur(8px);
}
.lang-btn {
  font-size: 11px; font-weight: 500;
  padding: 5px 14px; border-radius: 3px;
  border: none; cursor: pointer;
  color: rgba(255,255,255,.55);
  background: transparent;
  transition: all .25s;
}
.lang-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lang-btn.active {
  background: var(--navy);
  color: #fff;
}

/* === TOOLBAR (bottom-right) === */
.toolbar {
  position: fixed; bottom: 16px; right: 20px;
  z-index: 1000;
}

/* Page counter: hidden on desktop, shown on mobile via media query */
.m-page-num { display: none; }