/* ==================== CMS MECHANISMS IN THE SENSEI DESIGN ====================
 * What the legacy design did not have and the CMS brings: the <dialog> modal shell, the
 * honeypot, the form status line, the cookie banner, consent-gated embeds. Uses the design's
 * own tokens (global.css) and the frosted panel of forms.css.
 */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The CMS block frame (`div.block`) is a flex item where a legacy layout centred its section
   directly in a flex parent (thanks pages): it spans the parent like the section did. */
.thanks-main > .block {
  width: 100%;
}

/* The trap field: off-screen, never display:none (bots skip hidden inputs). */
.form-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Modal windows: the legacy .popup-modal overlay on a native <dialog> ── */
dialog.popup-modal {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

dialog.popup-modal:not([open]) {
  display: none;
}

dialog.popup-modal[open] {
  visibility: visible;
  pointer-events: auto;
}

dialog.popup-modal::backdrop {
  background: transparent;
}

html.has-modal {
  overflow: hidden;
}

/* ── Form status (fetch answer) and field errors ── */
.sensei-form__status[hidden] {
  display: none;
}

.sensei-form__pending {
  font-size: 14px;
  color: var(--color-text);
}

.sensei-form__field-error {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.3;
  color: var(--color-primary);
}

.sensei-form [aria-invalid="true"] {
  border-color: var(--color-primary);
}

.sensei-form__captcha {
  display: contents;
}

/* ── Cookie banner: the frosted card of the forms ── */
.consent {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9000;
  width: min(440px, calc(100vw - 40px));
}

.consent[hidden] {
  display: none;
}

.consent__panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border: 3px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  background: linear-gradient(to bottom, #efefef, #e5e0df);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  font-family: var(--font-primary);
  color: var(--color-dark);
}

.consent__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.consent__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text-body);
}

.consent__text a {
  color: var(--color-primary);
  text-decoration: underline;
}

.consent__settings-toggle {
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-dark);
}

.consent__categories {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0;
}

.consent__category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  cursor: pointer;
}

.consent__always {
  font-size: 12px;
  color: var(--color-text);
}

.consent__category-text {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text);
}

.consent__switch {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 40px;
  height: 22px;
}

.consent__switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.consent__switch span {
  width: 100%;
  height: 100%;
  border-radius: 11px;
  background: #c9c9cf;
  transition: background 0.2s ease;
}

.consent__switch span::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
}

.consent__switch input:checked + span {
  background: var(--color-primary);
}

.consent__switch input:checked + span::after {
  transform: translateX(18px);
}

.consent__switch input:focus-visible + span {
  outline: 2px solid var(--color-dark);
  outline-offset: 2px;
}

.consent__actions {
  display: flex;
  gap: 10px;
}

.consent__actions > * {
  flex: 1 1 0;
}

.consent__btn {
  justify-content: center;
  min-height: 48px;
  font-family: inherit;
  cursor: pointer;
}

.consent__btn--ghost {
  border: 1px solid var(--color-dark);
  border-radius: 8px;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-dark);
}

.consent__btn--save {
  width: 100%;
}

.footer__cookies {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

/* ── Consent-gated embeds (the contacts map) ── */
[data-consent-embed] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

[data-consent-embed].is-embedded {
  display: block;
}

[data-consent-embed] iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 0;
}

@media (max-width: 480px) {
  .consent {
    right: 10px;
    bottom: 10px;
    width: calc(100vw - 20px);
  }

  .consent__actions {
    flex-direction: column;
  }
}

/* ── Warranty certificate poller: one state at a time (warranty-thank.js) ── */
.warranty-download__state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.warranty-download__state[hidden] {
  display: none;
}

/* ── Contacts map before consent ── */
.contacts-map__iframe[data-consent-embed]:not(.is-embedded) {
  display: flex;
  padding: 24px;
  background: var(--color-bg-2);
  color: var(--color-text);
}

.contacts-map__placeholder {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}

.contacts-map__consent {
  padding: 12px 20px;
  border: 1px solid var(--color-dark);
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

/* Rich text now prints its own paragraphs inside the legacy text boxes. */
.return-notice__text p,
.warranty-alert__text p,
.warranty-banner__text p,
.return-checklist__text p,
.return-section__text p {
  margin: 0;
}

/* ── Error pages (the legacy error views styled themselves inline) ── */
.error-page {
  padding: 80px 0;
  text-align: center;
}

.error-page__code {
  margin: 0 0 16px;
  font-size: 96px;
  color: #ff5c1a;
}

.error-page__title {
  margin: 0 0 16px;
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--color-dark);
}

.error-page__text {
  max-width: 560px;
  margin: 0 auto 32px;
  font-size: 18px;
  color: #5a5a6a;
}

/* ── Search form and empty lists ── */
.search-form {
  display: flex;
  gap: 12px;
  max-width: 640px;
  margin-top: 24px;
}

.search-form__input {
  flex: 1 1 auto;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-white);
  font: inherit;
  font-size: 16px;
}

.blog-posts__empty {
  margin: 40px 0;
  font-size: 18px;
  text-align: center;
  color: var(--color-text);
}

.blog-card__title a,
.blog-card__link {
  color: inherit;
}

.notice-banner {
  padding: 10px 20px;
  background: var(--color-dark);
  color: var(--color-white);
  font-size: 14px;
  text-align: center;
}

@media (max-width: 768px) {
  .search-form {
    flex-direction: column;
  }
}

/* The cookie-settings link joins the last row of the footer's narrow layout. */
@media (max-width: 1023px) {
  .footer__cookies {
    order: 10;
  }
}