/* /description — lietošanas pamācība. Only this page loads this file. */

.guide { color: #525f7f; }
.guide .card-body { padding: 2rem 1.5rem; }
@media (min-width: 992px) { .guide .card-body { padding: 3rem 4rem; } }

.guide h1 { font-size: 2rem; margin-bottom: .5rem; }
.guide h2 { font-size: 1.5rem; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid #e9ecef; }
.guide h3 { font-size: 1.15rem; margin-top: 2rem; }
.guide p, .guide li { line-height: 1.7; }
/* Anchors land below the sticky navbar instead of under it. */
.guide [id] { scroll-margin-top: 90px; }
.guide kbd, .guide .ui {
  display: inline-block; padding: 0 .4em; border-radius: .25rem;
  background: #f1f3f9; color: #32325d; font: inherit; font-weight: 600; white-space: nowrap;
}

/* Contents: two columns on wide screens. */
.guide-toc { background: #f6f9fc; border-radius: .5rem; padding: 1.25rem 1.5rem; margin: 2rem 0 1rem; }
/* The contents heading is an h2 for the outline, but not a section divider. */
.guide .guide-toc h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.guide-toc ol { margin: 0; padding-left: 1.25rem; }
@media (min-width: 768px) { .guide-toc ol { columns: 2; column-gap: 3rem; } }
.guide-toc li { break-inside: avoid; }

/* Screenshots. */
.guide-shot { margin: 1.5rem 0 2rem; text-align: center; }
.guide-shot img {
  max-width: 100%; height: auto; border: 1px solid #e9ecef; border-radius: .5rem;
  box-shadow: 0 .5rem 1.5rem rgba(50, 50, 93, .12);
}
.guide-shot-narrow img { max-width: 760px; width: 100%; }
.guide-shot figcaption, .guide-diagram figcaption {
  margin-top: .6rem; font-size: .875rem; color: #8898aa; font-style: italic;
}

/* "How it works": steps with arrows; vertical on phones. */
.guide-flow { list-style: none; padding: 0; margin: 1.5rem 0; display: flex; flex-direction: column; gap: 2.2rem; }
.guide-flow-step {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  background: #f6f9fc; border-radius: .75rem; padding: 1.25rem 1rem 1rem;
}
.guide-flow-step b { color: #32325d; margin-top: .5rem; }
.guide-flow-text { font-size: .875rem; line-height: 1.5; margin-top: .25rem; }
.guide-flow-icon {
  width: 3rem; height: 3rem; border-radius: 50%; background: #5e72e4; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
}
.guide-flow-num {
  position: absolute; top: .6rem; left: .75rem; font-size: .8rem; font-weight: 700; color: #adb5bd;
}
.guide-flow-step:not(:last-child)::after {
  content: "\2193"; position: absolute; bottom: -2rem; left: 50%; transform: translateX(-50%);
  font-size: 1.5rem; color: #adb5bd;
}
@media (min-width: 992px) {
  .guide-flow { flex-direction: row; gap: 2rem; }
  .guide-flow-step { flex: 1 1 0; }
  .guide-flow-step:not(:last-child)::after {
    content: "\2192"; bottom: auto; top: 50%; left: auto; right: -1.65rem; transform: translateY(-50%);
  }
}

/* Status lifecycle (SVG). */
.guide-diagram { margin: 1.5rem 0 2rem; text-align: center; }
.guide-diagram svg { width: 100%; max-width: 945px; height: auto; }

/* Status table. */
/* The theme keeps table cells on one line; the explanations must wrap on a phone. */
.guide .guide-status td { white-space: normal; }
.guide .guide-status td:first-child { white-space: nowrap; font-weight: 600; }
.guide-status .dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .4rem; }

/* Tips and warnings. */
.guide-note {
  display: flex; gap: .75rem; align-items: flex-start; margin: 1.25rem 0; padding: 1rem 1.25rem;
  border-radius: .5rem; background: #eef1fd; border-left: 4px solid #5e72e4;
}
.guide-note i { font-size: 1.25rem; color: #5e72e4; margin-top: .15rem; }
.guide-note-warn { background: #fff4ee; border-left-color: #fb6340; }
.guide-note-warn i { color: #fb6340; }

/* FAQ. */
.guide-faq details { border-bottom: 1px solid #e9ecef; padding: .75rem 0; }
.guide-faq summary { cursor: pointer; font-weight: 600; color: #32325d; }
.guide-faq details p { margin: .5rem 0 0; }