/* Compliance block — declarations the user must confirm before submitting.
 *
 * Lives inside the last form-section so it inherits the section's surface.
 * Light/dark mode are NOT driven by --theme-* variables here — those vars
 * are scoped to `.theme-modern` and the compliance block can render outside
 * that scope. Use explicit colours, then override at html.dark-mode.
 */

.compliance-block {
  margin: 32px 0 8px;
  padding: 22px 24px;
  border: 1px solid #d4d4d8;
  border-radius: 10px;
  background: #ffffff;
  color: #1f2937;
}

.compliance-title {
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 10px;
}
.compliance-title i {
  color: #138577;
  font-size: 18px;
}

.compliance-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  cursor: pointer;
  user-select: none;
  font-size: 14.5px;
  line-height: 1.55;
  color: #1f2937;
}
.compliance-checkbox + .compliance-checkbox {
  border-top: 1px solid #e5e7eb;
}
.compliance-checkbox span {
  flex: 1;
}

/* Custom checkbox: 22 px touch target, drawn from scratch so the look is
   identical light/dark and across browsers (no native chrome reliance). */
.compliance-checkbox input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  border: 2px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.compliance-checkbox input[type="checkbox"]:hover {
  border-color: #138577;
}
.compliance-checkbox input[type="checkbox"]:focus-visible {
  outline: 3px solid #2bb3a3;
  outline-offset: 2px;
}
.compliance-checkbox input[type="checkbox"]:checked {
  background: #138577;
  border-color: #138577;
}
.compliance-checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  inset: 0;
  display: block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3 8.5 6.5 12 13 4.5' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

.compliance-checkbox--regolamento a {
  color: #138577;
  text-decoration: underline;
  font-weight: 600;
}
.compliance-checkbox--regolamento a:hover {
  color: #0f6f64;
}

.compliance-notice {
  margin-top: 18px;
  padding: 12px 14px;
  border-left: 3px solid #138577;
  background: #f1f5f9;
  border-radius: 8px;
  font-size: 13.5px;
  color: #1f2937;
}
.compliance-notice i {
  color: #138577;
  margin-right: 6px;
}
.compliance-notice strong {
  color: #0f172a;
}

/* task-294 — solo-minor parental-consent block (revealed by JS for under-18s). */
.compliance-notice--warn {
  border-left-color: #d97706;
  background: #fff7ed;
}
.compliance-notice--warn i { color: #d97706; }
.compliance-minor {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #fcd9b6;
  border-radius: 8px;
  background: #fffbf5;
}
.compliance-minor .compliance-notice { margin-top: 0; }
.compliance-field {
  display: block;
  margin: 12px 0 4px;
}
.compliance-field > span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 5px;
}
.compliance-field input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #d7dde5;
  border-radius: 6px;
  font-size: 14px;
  color: #1f2937;
  background: #fff;
}
.compliance-field input:focus-visible {
  outline: 2px solid #138577;
  outline-offset: 1px;
  border-color: #138577;
}

/* task-333 — legal fine print (art. 130(4) soft opt-in notice + informativa
   link). Reads as a footnote under the marketing checkboxes, not a shouting
   paragraph: small, muted, tight leading, hairline left border. Text is
   legally mandated (ADR-015) — compact styling only, never hide it. */
.compliance-privacy-note {
  margin: 10px 0 0;
  padding: 6px 0 6px 12px;
  border-left: 2px solid #d4d4d8;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #6b7280;
}
.compliance-privacy-note + .compliance-privacy-note {
  margin-top: 6px;
}
.compliance-privacy-note i {
  color: #9ca3af;
  margin-right: 4px;
  font-size: 0.8rem;
}
.compliance-privacy-note a {
  color: #0f6f64;
  text-decoration: underline;
}
.compliance-privacy-note a:hover {
  color: #138577;
}

/* -------------------------------------------------------------------------
 * Dark mode — colours forced explicitly. Without this, the block falls back
 * to the light literals above because --theme-text isn't always defined in
 * the compliance block's CSS scope.
 * ------------------------------------------------------------------------- */
html.dark-mode .compliance-block {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
}
html.dark-mode .compliance-title {
  color: #f1f5f9;
}
html.dark-mode .compliance-title i {
  color: #2bb3a3;
}
html.dark-mode .compliance-checkbox {
  color: #f1f5f9;
}
html.dark-mode .compliance-checkbox + .compliance-checkbox {
  border-top-color: rgba(255, 255, 255, 0.10);
}
html.dark-mode .compliance-checkbox input[type="checkbox"] {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.30);
}
html.dark-mode .compliance-checkbox input[type="checkbox"]:hover,
html.dark-mode .compliance-checkbox input[type="checkbox"]:focus-visible {
  border-color: #2bb3a3;
}
html.dark-mode .compliance-checkbox input[type="checkbox"]:checked {
  background: #2bb3a3;
  border-color: #2bb3a3;
}
html.dark-mode .compliance-checkbox--regolamento a {
  color: #2bb3a3;
}
html.dark-mode .compliance-checkbox--regolamento a:hover {
  color: #4ecabb;
}
html.dark-mode .compliance-notice {
  background: rgba(43, 179, 163, 0.10);
  color: #e2e8f0;
  border-left-color: #2bb3a3;
}
html.dark-mode .compliance-notice i {
  color: #2bb3a3;
}
html.dark-mode .compliance-notice strong {
  color: #f1f5f9;
}
html.dark-mode .compliance-privacy-note {
  border-left-color: rgba(255, 255, 255, 0.18);
  color: #94a3b8;
}
html.dark-mode .compliance-privacy-note i {
  color: #64748b;
}
html.dark-mode .compliance-privacy-note a {
  color: #2bb3a3;
}
html.dark-mode .compliance-privacy-note a:hover {
  color: #4ecabb;
}

/* task-575 — il blocco minorenne era l'unico riquadro con un fondo chiaro
   (#fffbf5) senza controparte scura: al buio restava crema, mentre i figli
   ereditavano il testo chiaro del tema scuro. Risultato misurato: testo
   quasi invisibile proprio sul consenso genitoriale, cioè il campo che
   blocca l'iscrizione di un minore. Regola: se un fondo è dichiarato in
   chiaro, la sua controparte scura si dichiara nella stessa modifica. */
html.dark-mode .compliance-minor {
  background: rgba(217, 119, 6, 0.10);
  border-color: rgba(217, 119, 6, 0.45);
}
html.dark-mode .compliance-notice--warn {
  background: rgba(217, 119, 6, 0.14);
  border-left-color: #f0a94c;
  color: #f1f5f9;
}
html.dark-mode .compliance-notice--warn i { color: #f0a94c; }
html.dark-mode .compliance-field > span { color: #e2e8f0; }

/* task-358 — expandable full legal text under each compact checkbox */
.compliance-details {
  margin: -6px 0 10px 34px;
  font-size: 13px;
}
.compliance-details summary {
  cursor: pointer;
  color: #138577;
  font-weight: 600;
  list-style-position: inside;
  padding: 2px 0;
}
.compliance-details summary:hover { text-decoration: underline; }
.compliance-details[open] summary { margin-bottom: 6px; }
.compliance-details p {
  margin: 0 0 8px;
  padding: 10px 12px;
  background: rgba(19, 133, 119, 0.05);
  border-left: 3px solid rgba(19, 133, 119, 0.35);
  border-radius: 4px;
  color: #475569;
  line-height: 1.55;
}
.compliance-details--vessatorie { margin-left: 0; }
html.dark-mode .compliance-details summary { color: #2bb3a3; }
html.dark-mode .compliance-details p {
  background: rgba(43, 179, 163, 0.08);
  border-left-color: rgba(43, 179, 163, 0.4);
  color: #cbd5e1;
}

/* task-356 — segmented manleva: vexatious-clauses box (art. 1341 co. 2 c.c.) */
.compliance-vessatorie {
  margin: 18px 0 6px;
  padding: 16px 18px;
  border: 1.5px solid #d3a626;
  border-radius: 10px;
  background: rgba(211, 166, 38, 0.06);
}
.compliance-vessatorie__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #8a6d14;
}
.compliance-vessatorie__title i { color: #b8901c; }
.compliance-vessatorie .compliance-checkbox { font-size: 13.5px; }
.compliance-regolamento-hint { margin-top: 2px; }
#regolamento_accepted:disabled + span { opacity: 0.65; }

/* task-575 — «non ancora», non «disattivato». Il pulsante resta cliccabile
   (un clic porta avanti nella lettura), ma deve leggersi come non pronto:
   attenuato, senza il richiamo del primario, con il cursore che dice che
   l'azione non è quella attesa. `disabled` sarebbe più semplice e sarebbe di
   nuovo un pulsante che non risponde. */
.rr-btn--not-ready {
  opacity: 0.55;
  filter: grayscale(0.5);
  cursor: progress;
}
.rr-btn--not-ready:hover { opacity: 0.7; }

.compliance-regolamento-hint--pulse {
  animation: compliance-hint-pulse 620ms ease-out 2;
}
@keyframes compliance-hint-pulse {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .compliance-regolamento-hint--pulse { animation: none; font-weight: 700; }
}

/* task-510 — l'azione di lettura esce dalla frase legale.
   Il link inline restava l'unico modo per aprire il documento e, misurato in
   browser, andava a capo su DUE righe sia a 1440px sia a 390px: un bersaglio
   spezzato in mezzo a nove elementi cliccabili. Qui il pulsante è un bersaglio
   solo, alto abbastanza per il pollice, e non compete con il testo. */
.compliance-regolamento__cta {
  margin-top: 10px;
  padding: 0.6rem 1.1rem;
  font-size: 0.9rem;
  /* 44px: la misura comoda per il pollice. Con il solo padding restava a
     36px — misurato, non stimato. */
  min-height: 44px;
}

/* A lettura confermata il pulsante resta (si può sempre rileggere) ma smette
   di chiedere attenzione: da invito a scorciatoia. */
.compliance-regolamento__cta--done {
  opacity: 0.75;
  font-weight: 500;
}

/* Un input `disabled` NON emette eventi di clic: il gesto sulla casella
   bloccata moriva sull'input e non arrivava mai al gestore che apre il
   documento (verificato in browser). `pointer-events: none` lascia passare il
   clic all'etichetta, che invece l'evento lo propaga. L'input resta disabled,
   quindi non si puo' spuntare nulla senza leggere. */
#regolamento_accepted:disabled { pointer-events: none; }
.compliance-checkbox--regolamento:has(#regolamento_accepted:disabled) { cursor: help; }

@media (max-width: 575.98px) {
  .compliance-regolamento__cta { display: flex; width: 100%; }
}
html.dark-mode .compliance-vessatorie {
  border-color: rgba(211, 166, 38, 0.55);
  background: rgba(211, 166, 38, 0.08);
}
html.dark-mode .compliance-vessatorie__title { color: #e3c25e; }
.rr-modal__body--regolamento { max-height: 70vh; overflow-y: auto; }

@media (max-width: 600px) {
  .compliance-block { padding: 18px 16px; margin: 24px 0 8px; }
  .compliance-checkbox { font-size: 14px; padding: 12px 0; gap: 12px; }
  .compliance-vessatorie { padding: 12px 12px; }
}