@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("../fonts/lora-v37-latin-600-700.woff2") format("woff2");
}

:root {
  --color-accent: #b45f3a;
  --color-accent-hover: #9d4f30;
  --color-border: #d8cdba;
  --color-page: #f5f7f4;
  --color-text: #24312d;
  --color-muted: #65736d;
  --color-scroll-track: #f3ded2;
}

.font-serif-title {
  font-family: "Lora", Georgia, Cambria, "Times New Roman", Times, serif;
}

.modal-link {
  color: var(--color-accent);
  text-decoration: underline;
}

.modal-link:hover {
  color: var(--color-accent-hover);
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  background: #fff;
  padding: 0.875rem 1rem;
}

.faq-item summary {
  color: var(--color-text);
  cursor: pointer;
  font-weight: 700;
}

.faq-item p {
  margin-top: 0.625rem;
}

.ad-slot {
  align-items: center;
  background: #fff;
  border: 1px dashed var(--color-border);
  color: var(--color-muted);
  display: flex;
  justify-content: center;
  min-height: 250px;
  padding: 1rem;
  text-align: center;
}

/* Touch optimization and canvas guidelines */
button,
select,
input {
  touch-action: manipulation;
}

.canvas-overlay-container {
  aspect-ratio: var(--frame-aspect-ratio, 307 / 378);
  max-height: 420px;
  min-height: 300px;
  position: relative;
  user-select: none;
  width: min(100%, var(--frame-max-width, 26rem));
}

#biometricGuide {
  pointer-events: none;
}

#imageCanvas {
  cursor: grab;
  touch-action: none;
}

#imageCanvas:active {
  cursor: grabbing;
}

#pdfContainer {
  max-width: min(26rem, calc(100vw - 4rem));
}

#modalBody {
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent) var(--color-scroll-track);
}

#modalBody::-webkit-scrollbar {
  width: 0.5rem;
}

#modalBody::-webkit-scrollbar-track {
  background: var(--color-scroll-track);
}

#modalBody::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  border-radius: 999px;
}