/* Base look and behaviour of the opt-in pop-up (<dialog class="ydi-modal">). Designs theme it on top (colours, fonts, sizes).
   Nothing here is under 16px. Keep the rules that make it work: backdrop, scroll lock, the no-JavaScript fallback. */
.ydi-modal { border: 0; padding: 0; background: transparent; max-width: min(520px, calc(100vw - 24px)); width: 100%; max-height: calc(100vh - 24px); overflow: visible; color: #222; }
.ydi-modal::backdrop { background: rgba(20, 10, 16, .72); }
.ydi-modal-box { position: relative; background: #fff; border-radius: 10px; padding: 32px 28px 24px; text-align: center; max-height: calc(100vh - 24px); overflow-y: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.ydi-modal-close { position: absolute; top: 6px; right: 8px; width: 44px; height: 44px; border: 0; background: transparent; font-size: 32px; line-height: 1; color: #555; cursor: pointer; border-radius: 50%; }
.ydi-modal-close:hover, .ydi-modal-close:focus-visible { color: #000; background: #f1f1f1; }
.ydi-modal .ydi-modal-logo { display: block; margin: 4px auto 14px; max-width: 150px; height: auto; }
.ydi-modal-title { margin: 0 0 18px; font-size: 1.3rem; line-height: 1.3; }
.ydi-optin-form { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ydi-optin-form input { box-sizing: border-box; width: 100%; max-width: 420px; padding: .8em; font: inherit; font-size: 1rem; text-align: center; border: 1px solid #ccc; border-radius: 5px; }
.ydi-optin-submit { box-sizing: border-box; width: 100%; max-width: 420px; padding: .9em 1em; font: inherit; font-size: 1.05rem; font-weight: 700; color: #fff; background: #e01747; border: 0; border-radius: 5px; cursor: pointer; }
.ydi-optin-submit:hover { background: #bf0431; }
.ydi-optin-privacy { margin: 16px 0 0; font-size: 1rem; line-height: 1.5; color: #444; }
.ydi-modal :focus-visible, .ydi-open:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }
html.ydi-modal-open { overflow: hidden; }
/* browsers without dialog.showModal() */
.ydi-modal.ydi-modal-fallback { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1001; margin: 0; }
.ydi-modal-backdrop { position: fixed; inset: 0; background: rgba(20, 10, 16, .72); z-index: 1000; }
/* no JavaScript: the form is shown on the page instead of in a pop-up, and the open buttons (which would do nothing) are hidden */
html:not(.js) .ydi-modal { display: block; position: static; margin: 24px auto; }
html:not(.js) .ydi-modal-close, html:not(.js) .ydi-open { display: none; }
@media (max-width: 600px) { .ydi-modal-box { padding: 28px 18px 20px; } }
@media (prefers-reduced-motion: no-preference) { .ydi-modal[open] .ydi-modal-box { animation: ydi-pop .18s ease-out; } @keyframes ydi-pop { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } } }