/*
 * Archive 16.3 (2026-05-12) — download modal, rev. 2.
 *
 * Restyled to match the site palette:
 *   --color-main           #485fc7  (brand blue)
 *   --color-main-hover     #3A4C9F
 *   --color-bg             #f0f8ff  (page bg)
 *   --color-bg-light       white
 *   --border-radius-main   10px
 *   --border-radius-small  5px
 *
 * Layout: 5 buttons arranged as a flex wrap centred in the dialog.
 * 3 per row on desktop (PNG / JPG / PDF, then SVG / WEBP centred),
 * 2 per row on tablet, 1 per row on phone. No Tabler font dep —
 * icons are inline SVG so the modal works on public pages that
 * never load tabler-icons.min.css.
 */

.download-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.download-modal.is-open {
    display: flex;
}

.download-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    cursor: pointer;
}

.download-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 32px);
    overflow: auto;
    background: var(--color-bg-light, #ffffff);
    border-radius: var(--border-radius-big, 15px);
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.28);
    padding: 28px 28px 22px;
    animation: dm-pop 180ms ease-out;
}

@keyframes dm-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.download-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: var(--border-radius-small, 5px);
    background: transparent;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, color .15s ease;
}

.download-modal__close:hover,
.download-modal__close:focus-visible {
    background: #f1f5f9;
    color: var(--color-main, #485fc7);
    outline: none;
}

.download-modal__title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text, #0f172a);
    line-height: 1.25;
}

.download-modal__subtitle {
    margin: 0 0 20px;
    font-size: 14px;
    color: #5d6b80;
    line-height: 1.5;
}

.download-modal__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 18px;
}

.download-modal__btn {
    appearance: none;
    border: 0;
    background: var(--color-main, #485fc7);
    color: var(--color-text-light, #ffffff);
    border-radius: var(--border-radius-main, 10px);
    padding: 14px 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: filter .15s ease, transform .1s ease, box-shadow .15s ease;
    font: inherit;
    font-weight: 600;
    flex: 0 0 calc((100% - 24px) / 3);
    min-height: 56px;
    box-shadow: 0 4px 14px rgba(72, 95, 199, 0.18);
    position: relative;
    overflow: hidden;
}

.download-modal__btn:hover,
.download-modal__btn:focus-visible {
    filter: brightness(0.9);
    outline: none;
    box-shadow: 0 6px 18px rgba(72, 95, 199, 0.28);
}

.download-modal__btn:active {
    transform: translateY(1px);
    filter: brightness(0.85);
}

.download-modal__btn.is-busy {
    pointer-events: none;
}

/* Archive 16.4 — capability-disabled buttons (Firefox without H.264,
   iOS Safari < 14.4 lacking MediaRecorder, etc.). We KEEP the button
   visible — hiding it confused users who saw the format on the plan
   card — but it now reads "greyed out". The click handler shows a
   toast explaining why this device can't produce the file. */
.download-modal__btn.is-disabled {
    background: #c2c8d4;
    box-shadow: none;
    cursor: not-allowed;
}

.download-modal__btn.is-disabled:hover,
.download-modal__btn.is-disabled:focus-visible {
    filter: none;
    box-shadow: none;
}

.download-modal__btn.is-disabled .download-modal__btn-icon,
.download-modal__btn.is-disabled .download-modal__btn-label {
    opacity: 0.75;
}

.download-modal__btn.is-busy .download-modal__btn-icon,
.download-modal__btn.is-busy .download-modal__btn-label {
    opacity: 0.55;
}

/* Archive 16.4 — green accent for the animated buttons so the user
   spots them as "the moving ones" vs the static raster trio. Falls
   back to the brand blue at the same brightness so the modal still
   reads as a single palette. */
.download-modal__btn--animated {
    background: #2f9e72;
    box-shadow: 0 4px 14px rgba(47, 158, 114, 0.22);
}

.download-modal__btn--animated:hover,
.download-modal__btn--animated:focus-visible {
    box-shadow: 0 6px 18px rgba(47, 158, 114, 0.32);
}

/* Archive 16.4 — in-button progress bar. Rendered on demand by
   download-modal.js (setProgress / resetProgress). The bar lives
   inside the button so the user sees fill on the very element
   they just clicked — no separate "loading…" UI to find. */
.download-modal__btn-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.25);
    overflow: hidden;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    pointer-events: none;
}

.download-modal__btn-progress-fill {
    display: block;
    height: 100%;
    width: 0;
    background: rgba(255, 255, 255, 0.95);
    transition: width 120ms linear;
}

/* Archive 16.4 — "Loop the animation" checkbox row. Sits between
   the grid and the privacy hint, only rendered when the plan
   unlocks ≥1 animated format. */
.download-modal__loop {
    display: grid;
    grid-template-columns: 18px 1fr;
    column-gap: 10px;
    row-gap: 2px;
    align-items: start;
    cursor: pointer;
    background: var(--color-bg, #f0f8ff);
    border-radius: var(--border-radius-main, 10px);
    padding: 10px 14px;
    margin-bottom: 14px;
    border: 1px solid rgba(72, 95, 199, 0.15);
    user-select: none;
}

.download-modal__loop input[type="checkbox"] {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 4px 0 0;
    width: 18px;
    height: 18px;
    accent-color: var(--color-main, #485fc7);
    cursor: pointer;
}

.download-modal__loop-text {
    grid-column: 2;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text, #0f172a);
    line-height: 1.3;
}

.download-modal__loop-hint {
    grid-column: 2;
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

.download-modal__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.download-modal__btn-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.download-modal__btn-label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: inherit;
    white-space: nowrap;
}

.download-modal__hint {
    margin: 0;
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .download-modal__dialog {
        padding: 24px 20px 18px;
        border-radius: var(--border-radius-main, 10px);
    }
    .download-modal__title    { font-size: 19px; }
    .download-modal__subtitle { font-size: 13px; margin-bottom: 16px; }
    .download-modal__btn {
        flex: 0 0 calc((100% - 12px) / 2);
        padding: 12px 14px;
        min-height: 52px;
    }
    .download-modal__btn-label { font-size: 14px; }
}

@media (max-width: 380px) {
    .download-modal__btn {
        flex: 0 0 100%;
    }
}