/* L5: template tokens and button/input components; no live-site CSS. */
.ry-overlays-root [hidden] { display: none !important; }
.ry-overlays-dialog:not([open]) { display: none; }
.ry-overlays-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--spacing--24);
  border: 0;
  background: transparent;
  color: var(--color-tokens-tone-strong);
  overflow: auto;
  overscroll-behavior: contain;
}
.ry-overlays-dialog[open] { display: grid; place-items: center; }
.ry-overlays-dialog::backdrop {
  background: var(--color-base-base-dark-48);
  -webkit-backdrop-filter: blur(var(--spacing--8));
  backdrop-filter: blur(var(--spacing--8));
}
.ry-overlays-card, .ry-overlays-exit-card {
  position: relative;
  width: 100%;
  max-width: var(--width--5-columns);
  min-width: 0;
  max-height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--color-tokens-tone-faint);
  border-radius: var(--radius-general-large);
  background: var(--color-tokens-background-base);
  box-shadow: 0 var(--spacing--4) var(--spacing--80) var(--color-tokens-background-shadow);
}
.ry-overlays-card { padding: var(--spacing--32); }
.ry-overlays-form, .ry-overlays-result { display: grid; gap: var(--spacing--20); }
.ry-overlays-root :is(h2, h3, p, figure) { margin: 0; }
.ry-overlays-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing--8);
  justify-self: start;
  max-width: calc(100% - var(--spacing--32));
  padding: var(--spacing--8) var(--spacing--12);
  border: 1px solid var(--color-tokens-tone-faint);
  border-radius: var(--radius-ui-tag);
}
.ry-overlays-chip i {
  width: var(--spacing--4);
  height: var(--spacing--4);
  flex: none;
  border-radius: var(--radius-general-full);
  background: var(--color-base-accent-primary);
}
.ry-overlays-close {
  position: absolute;
  top: var(--spacing--12);
  right: var(--spacing--12);
  z-index: 3;
  display: grid;
  place-items: center;
  width: var(--spacing--48);
  height: var(--spacing--48);
  padding: var(--spacing--12);
  border: 1px solid var(--color-tokens-tone-faint);
  border-radius: var(--radius-general-full);
  background: var(--color-tokens-background-base);
  color: var(--color-tokens-tone-strong);
  cursor: pointer;
}
.ry-overlays-close svg { width: 100%; height: 100%; }
.ry-overlays-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing--12); }
.ry-overlays-fields .input_wrap { min-width: 0; }
.ry-overlays-fields .text-field { color: var(--color-tokens-input-active-text); }
.ry-overlays-volumes { min-width: 0; padding: 0; margin: 0; border: 0; }
.ry-overlays-volumes legend { padding: 0; margin-bottom: var(--spacing--8); }
.ry-overlays-segments { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing--8); }
.ry-overlays-volume { position: relative; margin: 0; font-weight: inherit; }
.ry-overlays-volume input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ry-overlays-volume span {
  display: grid;
  place-items: center;
  min-height: var(--spacing--48);
  padding: var(--spacing--8);
  border: 1px solid var(--color-tokens-input-active-border);
  border-radius: var(--radius-ui-input);
  background: var(--color-tokens-input-default-background);
  font-size: var(--typography-size-button-2);
  transition: background-color .2s, border-color .2s;
}
.ry-overlays-volume input:checked + span { background: var(--color-base-accent-primary); border-color: var(--color-tokens-tone-strong); color: var(--color-base-base-dark-100); }
.ry-overlays-volume input:focus-visible + span,
.ry-overlays-root :is(button, a, .text-field):focus-visible,
.ry-overlays-preview .ry-overlays-cta:focus-visible {
  outline: var(--spacing--4) solid var(--color-tokens-tone-strong);
  outline-offset: var(--spacing--4);
}
.ry-overlays-center { text-align: center; }
.ry-overlays-error { color: var(--color-tokens-tone-strong); border-left: var(--spacing--4) solid var(--color-base-ui-error); padding-left: var(--spacing--12); }
.ry-overlays-fields [aria-invalid="true"] { border-color: var(--color-base-ui-error); }
.ry-overlays-cta { padding: 0; border: 0; min-width: 0; }
.ry-overlays-cta .button-inner { min-width: 0; flex: 1; padding: var(--spacing--16); }
.ry-overlays-cta .button_text-mask { flex: 0 1 auto; height: auto; }
.ry-overlays-cta .text-button { display: block; text-shadow: none !important; }
.ry-overlays-offer { display: grid; gap: var(--spacing--12); padding: var(--spacing--20); border-radius: var(--radius-general-default); background: var(--color-tokens-background-depth); }
.ry-overlays-result a:not(.cta_primary) { text-decoration: underline; }
.ry-overlays-exit-card { max-width: var(--width--6-columns); display: grid; background: var(--color-base-base-dark-100); }
.ry-overlays-delivered { grid-area: 1 / 1; display: block; width: 100%; height: auto; min-height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.ry-overlays-polaroid {
  position: absolute;
  top: var(--spacing--20);
  left: var(--spacing--20);
  z-index: 1;
  width: 28%;
  transform: rotate(-4deg);
}
.ry-overlays-polaroid img { display: block; width: 100%; height: auto; border: var(--spacing--4) solid var(--color-base-base-light-100); border-radius: var(--radius-general-default); box-shadow: 0 var(--spacing--4) var(--spacing--32) var(--color-tokens-background-shadow); }
.ry-overlays-polaroid figcaption { width: fit-content; margin: var(--spacing--8) auto 0; padding: var(--spacing--4) var(--spacing--8); border-radius: var(--radius-ui-tag); background: var(--color-base-base-light-100); color: var(--color-base-base-dark-100); }
.ry-overlays-scrim {
  grid-area: 1 / 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--spacing--12);
  position: relative;
  padding: var(--spacing--200) var(--spacing--32) var(--spacing--32);
  color: var(--color-base-base-light-100);
  background: linear-gradient(to bottom, var(--color-base-base-dark-0) 20%, var(--color-base-base-dark-88) 100%);
}
.ry-overlays-kicker { color: var(--color-base-accent-primary); }
.ry-overlays-exit-actions { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: center; gap: var(--spacing--24); margin-top: var(--spacing--8); }
.ry-overlays-dismiss { padding: var(--spacing--8) 0; border: 0; background: transparent; color: inherit; text-decoration: underline; cursor: pointer; }
.ry-overlays-exit-card :is(button, a):focus-visible { outline-color: var(--color-base-base-light-100); }
.ry-overlays-sticky {
  position: fixed;
  z-index: 80;
  inset: auto 0 0;
  display: none;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--spacing--8);
  padding: var(--spacing--8) var(--spacing--12) calc(var(--spacing--8) + env(safe-area-inset-bottom, 0px));
  background: var(--color-base-base-dark-100);
  border-top: 1px solid var(--color-base-base-light-16);
}
.ry-overlays-chat { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing--8); padding: var(--spacing--12); border-radius: var(--radius-ui-button-base); color: var(--color-base-base-dark-100); background: var(--color-tokens-color-nssyntaxmint); }
.ry-overlays-wa-icon { width: var(--spacing--24); height: var(--spacing--24); flex: none; }
.ry-overlays-fab {
  position: fixed;
  z-index: 70;
  right: clamp(var(--spacing--16), 2.4vw, var(--spacing--32));
  bottom: calc(clamp(var(--spacing--16), 2.4vw, var(--spacing--32)) + env(safe-area-inset-bottom, 0px));
  display: grid;
  place-items: center;
  width: var(--spacing--64);
  height: var(--spacing--64);
  border-radius: var(--radius-general-full);
  color: var(--color-base-base-dark-100);
  background: var(--color-base-accent-primary);
  box-shadow: 0 var(--spacing--4) var(--spacing--32) var(--color-tokens-background-shadow);
  transition: transform .3s;
}
.ry-overlays-fab:hover { transform: translateY(calc(-1 * var(--spacing--4))); }
.ry-overlays-fab .ry-overlays-wa-icon { width: var(--spacing--32); height: var(--spacing--32); }
.ry-overlays-badge { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: var(--spacing--24); height: var(--spacing--24); border: 1px solid var(--color-base-base-light-100); border-radius: var(--radius-general-full); background: var(--color-base-ui-error); color: var(--color-base-base-dark-100); font-style: normal; }
.ry-overlays-preview-section { min-height: 100svh; display: grid; align-content: center; padding-block: var(--section-padding--large); border-bottom: 1px solid var(--color-tokens-tone-faint); }
.ry-overlays-preview-section:nth-child(2) { background: var(--color-tokens-background-depth); }
.ry-overlays-preview-content { display: grid; gap: var(--spacing--24); max-width: var(--width--6-columns); margin-inline: auto; text-align: center; }
.ry-overlays-preview-content .ry-overlays-cta { justify-self: center; }
@media (max-width: 991px) {
  .ry-overlays-exit-actions { gap: var(--spacing--16); }
}
@media (max-width: 767px) {
  .ry-overlays-sticky:not([hidden]) { display: grid; }
  .ry-overlays-sticky .ry-overlays-cta { font-size: var(--typography-size-button-2); }
  .ry-overlays-sticky .button-inner { padding: var(--spacing--12) var(--spacing--8); }
  body[data-sticky-cta] .ry-overlays-fab,
  .ry-overlays-root[data-sticky-visible] .ry-overlays-fab { display: none; }
  .ry-overlays-exit-actions { grid-template-columns: minmax(0, 1fr); gap: var(--spacing--8); }
  .ry-overlays-scrim { padding-inline: var(--spacing--24); padding-bottom: var(--spacing--24); }
}
@media (max-width: 479px) {
  .ry-overlays-dialog { padding: var(--spacing--12); }
  .ry-overlays-card { padding: var(--spacing--24) var(--spacing--20); }
  .ry-overlays-form, .ry-overlays-result { gap: var(--spacing--16); }
  .ry-overlays-fields { grid-template-columns: minmax(0, 1fr); }
  .ry-overlays-close { width: var(--spacing--32); height: var(--spacing--32); padding: var(--spacing--8); }
  .ry-overlays-polaroid { width: 36%; top: var(--spacing--16); left: var(--spacing--16); }
  .ry-overlays-scrim { padding: var(--spacing--200) var(--spacing--20) var(--spacing--20); }
  .ry-overlays-fab { width: var(--spacing--48); height: var(--spacing--48); }
}
@media (prefers-reduced-motion: reduce) {
  .ry-overlays-root *, .ry-overlays-root *::after, .ry-overlays-preview .ry-overlays-cta, .ry-overlays-preview .ry-overlays-cta::after { animation: none !important; transition: none !important; }
  .ry-overlays-root .cta_primary:hover, .ry-overlays-fab:hover { transform: none; }
}

/* Preserve payment-mark colors while keeping them readable on dark pricing. */
.body-inverted .pricing_pay img,
.body-inverted .ry-pages-payments img {
  background: var(--color-base-base-light-100);
  border-radius: var(--radius-general-small);
  padding: 4px;
  box-sizing: content-box;
}