/*
 * dmd.newsletter-modal.css
 *
 * Styles the newsletter signup modal (_NewsletterModal.cshtml) and defends it from this site's
 * ambient cascade. Ported from politicalmachine.com's pm.newsletter-modal.css (itself ported from
 * forums.stardock.com's wwwroot/css/shared/newsletter-modal.css).
 *
 * WHY THIS IS NOT A COPY OF THE REFERENCE SHEET
 * ----------------------------------------------
 * That sheet resolves every colour through politicalmachine2024.css's own literals and reuses that
 * site's footer subscribe button. None of those exist on this host, so a straight copy renders
 * mismatched or missing colours. Colours here are this site's own literals, taken from
 * deadmansdraw.css: the gold accent (#ffd374), the "community-discount" card's brown border/panel
 * (#857346 / #1e1d1d), and its body copy tone (#f6f6f6). The title reuses this site's own display
 * face, IMFellEnglishSC (see the @font-face in deadmansdraw.css), at normal weight only - it ships
 * as a single weight, and forcing font-weight:600 on it would make browsers synthesize a distorted
 * fake bold instead of just rendering it plainly.
 *
 * WHAT THIS SITE DOES TO ANY DIALOG DROPPED INTO IT
 * ---------------------------------------------------
 * The modal renders in the same cascade as deadmansdraw.css and reset.css. Unlike the
 * politicalmachine.com reference, this site's own ambient rules are mild (checked in this todo's
 * research: no global `body { text-align: center }`, no bare `h2 { font: ... }` shorthand -
 * reset.css only zeroes margin/padding/font-size on headings, nothing to fight here). Two
 * defensive rules are still applied because their absence is universal, not site-specific:
 *   1. No box-sizing reset exists anywhere on this site (verified: reset.css declares none), so
 *      the input's padding and border would add to its flex basis and overflow the row.
 *   2. This site declares no color-scheme, so UA system colours (the input's caret, any native
 *      control) would resolve in LIGHT mode against this dark dialog. Explicit colours are given
 *      anyway; color-scheme:dark covers what those explicit colours miss.
 *
 * Z-INDEX IS 2100 AND THAT NUMBER IS LOAD-BEARING
 * -------------------------------------------------
 * Measured for THIS site (P3.1's audit of dmd.header-offset.css, confirmed live): figure.headimg
 * is 1001 (re-applied by JS on scroll), a#nav-menu is 1002, div#mobilenav is 2000, and the
 * stardock-header bar itself (#stardock-header.header-container) is escalated to 2001 to sit above
 * all of them. 2100 clears every one of those with room, using the same
 * round-number-clears-everything convention as the reference's own 2100 - it is not copied from
 * the reference's reasoning (a different, PM-specific stack that happened to peak at 2000), only
 * its shape.
 *
 * PALETTE
 * -------
 * Panel background and border match the site's own "community-discount" card
 * (deadmansdraw.css ~L288-296: #1e1d1d panel, #857346 border). Title bar is a brown-to-gold
 * gradient built from that same border colour. The submit button deliberately reuses the panel
 * border colour rather than inventing a new accent - this site has no separate button convention
 * to match (the "Buy Now" control is rendered entirely by FastSpring's own widget, unstyled here).
 */
.sd-newsletter-modal[hidden] {
    display: none;
}
.sd-newsletter-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: start;
    color-scheme: dark;
    font-family: Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
}
.sd-newsletter-modal,
.sd-newsletter-modal * {
    box-sizing: border-box;
}
.sd-newsletter-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .7);
}
.sd-newsletter-modal__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    background: #1e1d1d;
    color: #f6f6f6;
    border: 1px solid #857346;
    border-radius: 6px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .55);
    overflow: hidden;
}
.sd-newsletter-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(180deg, #857346, #5c4d2e);
    color: #fff;
    padding: .6em .75em;
}
.sd-newsletter-modal__title {
    margin: 0;
    font: 1.3rem/1.3 IMFellEnglishSC, Arial, sans-serif;
    font-weight: normal;
}
.sd-newsletter-modal__close {
    background: none;
    border: 0;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .25rem;
}
.sd-newsletter-modal__close:hover {
    opacity: .8;
}
.sd-newsletter-modal__body {
    padding: 1rem;
}
.sd-newsletter-modal__text {
    margin: 0 0 .75rem;
    font-size: .9rem;
    line-height: 1.4;
    color: #f6f6f6;
}
.sd-newsletter-modal__label {
    display: block;
    font-size: .8rem;
    font-weight: bold;
    margin-bottom: .35rem;
    color: #ffd374;
}
.sd-newsletter-modal__row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .5rem;
}
.sd-newsletter-modal__input {
    flex: 1 1 12rem;
    min-width: 0;
    padding: .5em .65em;
    border: 1px solid #857346;
    background: #fff;
    color: #333;
    font-size: .9rem;
    border-radius: 3px;
}
.sd-newsletter-modal__btn {
    flex: 0 0 auto;
    white-space: nowrap;
    background-color: #857346;
    border: 1px solid #ffd374;
    color: #fff;
    font-size: .85rem;
    padding: .5em 1.1em;
    border-radius: 3px;
    cursor: pointer;
}
.sd-newsletter-modal__btn:hover {
    background-color: #a68d5a;
}
.sd-newsletter-modal__btn[disabled] {
    opacity: .6;
    cursor: default;
}
.sd-newsletter-modal__msg {
    margin-top: .6rem;
    font-size: .85rem;
    min-height: 1.2em;
}
.sd-newsletter-modal__msg--error {
    color: #ff8a8a;
}
.sd-newsletter-modal__msg--success {
    color: #8ce99a;
}
body.sd-newsletter-modal-open {
    overflow: hidden;
}