/**
 * Subscription block of danewsletter (views/templates/hook/subscribe.tpl). The block uses the classes of the theme
 * (block-newsletter, input-group, btn, subscribe-status, toggle-switch / slider): this file only adds what is missing,
 * inside .dn-subscribe. Rules in :where() have no specificity: the theme wins when it styles the same thing, and they
 * keep the form readable and usable when the theme classes are missing.
 *
 * @author Déco Alsace.
 */
.dn-subscribe [hidden] { display: none !important; }
.dn-subscribe .dn-subscribe-trap { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* consent switch: the checkbox stays focusable (the theme hides it with display: none) */
.dn-subscribe .toggle-switch { position: relative; }
.dn-subscribe .toggle-switch input.dn-consent-input {
  display: block; position: absolute; left: 0; top: 50%; width: 48px; height: 26px; margin: -13px 0 0; opacity: 0; cursor: pointer; z-index: 1;
}
.dn-subscribe .toggle-switch input.dn-consent-input:focus-visible + .slider { box-shadow: 0 0 0 3px rgba(255, 255, 255, .55); }
.dn-subscribe .toggle-label a { color: inherit; text-decoration: underline; }
.dn-subscribe .subscribe-status { margin-top: .5rem; font-size: .875rem; }
.dn-subscribe .btn[disabled] { cursor: not-allowed; }

/* fallbacks (no specificity) */
:where(.dn-subscribe) .widget-title { font-size: 1.25rem; margin: 0 0 .75rem; }
:where(.dn-subscribe) .input-group { display: flex; align-items: stretch; width: 100%; }
:where(.dn-subscribe) .form-control { flex: 1 1 auto; min-width: 0; padding: .5rem .75rem; border: 1px solid #ccc; border-radius: .3rem 0 0 .3rem; }
:where(.dn-subscribe) .btn { padding: .5rem 1rem; border: 0; border-radius: 0 .3rem .3rem 0; background: #7d2039; color: #fff; }
:where(.dn-subscribe) .btn[disabled] { opacity: .6; }
:where(.dn-subscribe) .status-error { color: #ffb4ab; }
:where(.dn-subscribe) .status-success { color: #b7e1b9; }
:where(.dn-subscribe) .toggle-switch { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
:where(.dn-subscribe) .slider { position: relative; width: 48px; height: 26px; background: #ccc; border-radius: 13px; flex-shrink: 0; transition: background-color .3s; }
:where(.dn-subscribe) .slider::before { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; background: #fff; border-radius: 50%; transition: transform .3s; }
:where(.dn-subscribe) input:checked + .slider { background: #c1622f; }
:where(.dn-subscribe) input:checked + .slider::before { transform: translateX(22px); }
:where(.dn-subscribe) .toggle-label { font-size: .8rem; line-height: 1.4; }