/* MailVault issue template on /contact. Pure CSS: :has() on the chosen product shows it,
   the switch checkbox swaps it for the plain message. Works without JavaScript. */
.issue-tpl, .msg-issue { display: none; }
.contact-form:has(input[name="product"][value="MailVault"]:checked) .issue-tpl { display: block; margin: 0 0 22px; padding: 16px; border: 1px solid #d6d9de; border-radius: 8px; background: #fafafb; }

.issue-switch { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; color: var(--sy-ink); font: 600 .95rem/1.3 var(--en-body); letter-spacing: 0; text-transform: none; }
.issue-switch input { position: absolute; width: 44px; height: 24px; margin: 0; opacity: 0; cursor: pointer; }
.issue-switch__track { position: relative; flex: none; width: 44px; height: 24px; border-radius: 12px; background: #a7adb5; transition: background .15s; }
.issue-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.issue-switch input:checked + .issue-switch__track { background: var(--red); }
.issue-switch input:checked + .issue-switch__track::after { transform: translateX(20px); }
.issue-switch input:focus-visible + .issue-switch__track { outline: 3px solid var(--red); outline-offset: 3px; }
.issue-tpl__lead { margin: 4px 0 14px; color: #4a515b; font-size: .9rem; line-height: 1.5; }

.issue-tpl:not(:has(#cf-issue:checked)) :is(.issue-tpl__lead, .issue-group) { display: none; }

.issue-group { border: 0; min-width: 0; padding: 0; margin: 0 0 14px; }
.issue-group:last-child { margin-bottom: 0; }
.issue-group legend { padding: 0; margin-bottom: 8px; color: var(--sy-ink); font: 600 .95rem/1.5 var(--en-body); }
.issue-group__choices { display: flex; flex-wrap: wrap; gap: 8px; }
.en-showroom .issue-chip { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 8px 14px; border: 1px solid #a7adb5; border-radius: 6px; background: #fff; color: var(--sy-ink); cursor: pointer; font: 600 .95rem/1.3 var(--en-body); letter-spacing: 0; text-transform: none; }
.en-showroom .issue-chip:has(input:checked) { border-color: var(--red); background: #fff4f5; }
.en-showroom .issue-chip:has(input:focus-visible) { outline: 3px solid var(--red); outline-offset: 3px; }
.en-showroom .issue-chip input { appearance: auto; width: 16px; height: 16px; padding: 0; margin: 0; flex: none; accent-color: var(--red); box-shadow: none; }

/* Message label + hint: "Message" by default, "What went wrong?" while the template is on. */
.msg-hint { margin: 0 0 8px; color: #4a515b; font-size: .9rem; line-height: 1.5; }
.contact-form:has(input[name="product"][value="MailVault"]:checked):has(#cf-issue:checked) .msg-plain { display: none; }
.contact-form:has(input[name="product"][value="MailVault"]:checked):has(#cf-issue:checked) span.msg-issue { display: inline; }
.contact-form:has(input[name="product"][value="MailVault"]:checked):has(#cf-issue:checked) p.msg-issue { display: block; }

@media (max-width: 380px) {
  .contact-form:has(input[name="product"][value="MailVault"]:checked) .issue-tpl { padding: 12px; }
  .en-showroom .issue-chip { padding: 8px 10px; font-size: .85rem; }
}