/* Sofa-Orakel: own accents on top of Bootstrap 5.3 color modes.
   Everything else (cards, forms, buttons) adapts through data-bs-theme on <html>. */

:root {
  --so-accent: #7c3aed;
  --so-accent-2: #db2777;
  --so-accent-contrast: #ffffff;
  --so-glow: rgba(124, 58, 237, 0.18);
}

[data-bs-theme="dark"] {
  --so-accent: #a78bfa;
  --so-accent-2: #f472b6;
  --so-accent-contrast: #1e1033;
  --so-glow: rgba(167, 139, 250, 0.16);
}

/* Never wider than the viewport (rule frontend-web.md): hidden on html, clip on body. overflow-x
   hidden on body would turn it into a second vertical scroll container. */
html {
  overflow-x: hidden;
}

body {
  overflow: clip;
  background-image: radial-gradient(circle at 50% -10%, var(--so-glow), transparent 60%);
  background-repeat: no-repeat;
  min-height: 100vh;
}

/* Skip link: only visible on keyboard focus, then on top of the navbar that follows it. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1031;
  padding: 12px 20px;
  background: var(--so-accent);
  color: var(--so-accent-contrast);
  font-weight: 600;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

.so-navbar {
  background-color: var(--bs-body-bg);
}

.so-brand {
  letter-spacing: 0.2px;
}

.so-tagline {
  font-size: 0.72rem;
  letter-spacing: 0.4px;
}

.so-hero {
  max-width: 640px;
  padding: 2.5rem 0 1rem;
}

.so-hero-icon {
  filter: drop-shadow(0 8px 24px var(--so-glow));
}

.so-panel {
  max-width: 640px;
}

.so-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--bs-secondary-color);
  margin-bottom: 0.35rem;
}

/* Genre dropdowns: 16 entries would reach below the fold, so the list scrolls. */
.so-multi-menu {
  max-height: 18rem;
  overflow-y: auto;
}

.so-multi-menu .form-check-input:checked {
  background-color: var(--so-accent);
  border-color: var(--so-accent);
}

.so-provider-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  border-radius: 999px;
  padding: 0.3em 0.9em 0.3em 0.35em;
}

.so-provider-toggle img,
.so-provider-link img {
  border-radius: 50%;
}

.btn-check:checked + .so-provider-toggle {
  background-color: var(--so-accent);
  border-color: var(--so-accent);
  color: var(--so-accent-contrast);
}

.btn-check:not(:checked) + .so-provider-toggle img {
  filter: grayscale(1);
  opacity: 0.6;
}

.so-mood {
  border-color: var(--so-accent);
}

.so-mood-btn {
  background-color: var(--so-accent);
  border-color: var(--so-accent);
  color: var(--so-accent-contrast);
  font-weight: 600;
}

.so-mood-btn:hover,
.so-mood-btn:focus-visible {
  background-color: var(--so-accent);
  color: var(--so-accent-contrast);
  filter: brightness(1.08);
}

.so-why p {
  line-height: 1.55;
  font-style: italic;
}

.so-result {
  overflow: hidden;
}

.so-poster {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 12rem;
  object-fit: cover;
  background-color: var(--bs-secondary-bg);
}

.so-overview {
  line-height: 1.55;
}

.so-genre {
  font-weight: 500;
}

/* Movie series: a quiet box, folded until the visitor asks for the other parts. */
.so-collection {
  background-color: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 0.5rem 0.75rem;
}

.so-collection summary {
  cursor: pointer;
  font-weight: 500;
}

.so-collection summary .bi {
  color: var(--so-accent);
}

.so-collection-list {
  padding-left: 1.5rem;
  overflow-wrap: anywhere;
}

.so-collection-list li + li {
  margin-top: 0.2rem;
}

.so-provider-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  background-color: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  padding: 0.35em 1em 0.35em 0.4em;
  color: var(--bs-body-color);
  font-weight: 500;
}

.so-provider-link:hover {
  border-color: var(--so-accent);
  color: var(--bs-body-color);
}

@keyframes so-shake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-12deg); }
  75% { transform: rotate(12deg); }
}

.so-rolling .bi {
  display: inline-block;
  animation: so-shake 0.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .so-rolling .bi {
    animation: none;
  }
}

.so-roll-btn {
  background-image: linear-gradient(135deg, var(--so-accent), var(--so-accent-2));
  border: 0;
  color: #ffffff;
  font-weight: 600;
  padding: 0.8rem 2.4rem;
  border-radius: 999px;
  box-shadow: 0 8px 24px var(--so-glow);
}

.so-roll-btn:hover,
.so-roll-btn:focus-visible {
  color: #ffffff;
  filter: brightness(1.08);
}

.so-roll-btn:disabled {
  color: #ffffff;
  opacity: 0.55;
}