/**
 * WIZ v2: Download Media Modal
 *
 * Minimal defaults via wiz-design-tokens.
 * Elementor controls override via {{WRAPPER}} selectors.
 */

body.wiz-download-media--body-locked {
    overflow: hidden !important;
}

.wiz-download-media-modal {
    display: none;
}

.wiz-download-media-modal--open {
    display: block;
}

/* Overlay */
.wiz-download-media-modal__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    opacity: 0;
    transition: opacity var(--wiz-transition-normal, 0.25s ease);
    pointer-events: none;
}

.wiz-download-media-modal--open .wiz-download-media-modal__overlay {
    opacity: 1;
    pointer-events: auto;
}

/* Dialog */
.wiz-download-media-modal__dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.98);
    width: min(92vw, 480px);
    max-height: min(90vh, 640px);
    background: var(--wiz-color-background, #fff);
    border-radius: var(--wiz-radius-md, 8px);
    box-shadow: var(--wiz-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
    z-index: 100000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transition: opacity var(--wiz-transition-normal, 0.25s ease),
        transform var(--wiz-transition-normal, 0.25s ease);
    pointer-events: none;
    font-family: var(--wiz-font-family, inherit);
}

.wiz-download-media-modal--open .wiz-download-media-modal__dialog {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

/* Header */
.wiz-download-media-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--wiz-space-md, 12px);
    padding: var(--wiz-space-base, 16px) var(--wiz-space-xl, 24px);
    border-bottom: var(--wiz-border-width, 1px) solid var(--wiz-color-border, #e5e7eb);
    background: var(--wiz-color-background, #fff);
    color: var(--wiz-color-text, #1a1a1a);
}

.wiz-download-media-modal__header-text {
    flex: 1 1 auto;
    min-width: 0;
}

.wiz-download-media-modal__close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: var(--wiz-radius-sm, 4px);
    background: transparent;
    color: var(--wiz-color-text-muted, #6b7280);
    cursor: pointer;
    line-height: 0;
    transition: background-color var(--wiz-transition-fast, 0.15s ease),
        color var(--wiz-transition-fast, 0.15s ease);
}

.wiz-download-media-modal__close:hover {
    background: var(--wiz-color-surface, #f3f4f6);
    color: var(--wiz-color-text, #1a1a1a);
}

.wiz-download-media-modal__close svg {
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.wiz-download-media-modal__title {
    margin: 0;
    font-size: var(--wiz-font-size-lg, 18px);
    font-weight: var(--wiz-font-weight-semibold, 600);
    line-height: var(--wiz-line-height-tight, 1.25);
}

.wiz-download-media-modal__subtitle {
    margin: var(--wiz-space-xs, 4px) 0 0;
    font-size: var(--wiz-font-size-sm, 12px);
    line-height: var(--wiz-line-height-normal, 1.5);
    color: var(--wiz-color-text-muted, #6b7280);
}

/* Body */
.wiz-download-media-modal__body {
    padding: var(--wiz-space-base, 16px) var(--wiz-space-xl, 24px);
    overflow-y: auto;
    flex: 1 1 auto;
}

.wiz-download-media-modal__section-label {
    margin: 0 0 var(--wiz-space-md, 12px);
    font-size: var(--wiz-font-size-xs, 11px);
    font-weight: var(--wiz-font-weight-semibold, 600);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wiz-color-text-muted, #6b7280);
}

.wiz-download-media-modal__options {
    display: flex;
    flex-direction: column;
    gap: var(--wiz-space-sm, 8px);
    min-height: 80px;
}

.wiz-download-media-modal__message {
    margin: 0;
    padding: var(--wiz-space-lg, 20px) 0;
    text-align: center;
    color: var(--wiz-color-text-muted, #6b7280);
    font-size: var(--wiz-font-size-base, 14px);
}

/* Loading skeletons */
@keyframes wiz-download-media-modal-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.wiz-download-media-modal__options--loading {
    min-height: 0;
}

.wiz-download-media-modal__option-skeleton {
    display: flex;
    align-items: flex-start;
    gap: var(--wiz-space-md, 12px);
    padding: var(--wiz-space-md, 12px) var(--wiz-space-base, 16px);
    border: var(--wiz-border-width, 1px) solid var(--wiz-color-border, #e5e7eb);
    border-radius: var(--wiz-radius-sm, 4px);
    background: var(--wiz-color-background, #fff);
    pointer-events: none;
}

.wiz-download-media-modal__skeleton-block {
    display: block;
    border-radius: 4px;
    background: linear-gradient(90deg, #eceff3 25%, #f8f9fb 50%, #eceff3 75%);
    background-size: 200% 100%;
    animation: wiz-download-media-modal-skeleton-shimmer 1.2s ease-in-out infinite;
}

.wiz-download-media-modal__skeleton-block--radio {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex: 0 0 16px;
    margin-top: 4px;
}

.wiz-download-media-modal__skeleton-block--icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin-top: 2px;
}

.wiz-download-media-modal__skeleton-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.wiz-download-media-modal__skeleton-block--title {
    width: 78%;
    height: 14px;
}

.wiz-download-media-modal__skeleton-block--desc {
    width: 52%;
    height: 12px;
}

.wiz-download-media-modal__option-skeleton:nth-child(2) .wiz-download-media-modal__skeleton-block--title {
    width: 68%;
}

.wiz-download-media-modal__option-skeleton:nth-child(2) .wiz-download-media-modal__skeleton-block--desc {
    width: 44%;
}

.wiz-download-media-modal__option-skeleton:nth-child(3) .wiz-download-media-modal__skeleton-block--title {
    width: 72%;
}

.wiz-download-media-modal__option-skeleton:nth-child(3) .wiz-download-media-modal__skeleton-block--desc {
    width: 48%;
}

/* Options */
.wiz-download-media-modal__option {
    display: flex;
    align-items: flex-start;
    gap: var(--wiz-space-md, 12px);
    padding: var(--wiz-space-md, 12px) var(--wiz-space-base, 16px);
    border: var(--wiz-border-width, 1px) solid var(--wiz-color-border, #e5e7eb);
    border-radius: var(--wiz-radius-sm, 4px);
    background: var(--wiz-color-background, #fff);
    cursor: pointer;
    transition: border-color var(--wiz-transition-fast, 0.15s ease),
        background var(--wiz-transition-fast, 0.15s ease);
}

.wiz-download-media-modal__option:hover {
    border-color: var(--wiz-color-secondary, #64748b);
}

.wiz-download-media-modal__option--selected {
    border-color: var(--wiz-color-primary, var(--primary, #075465));
    background: var(--wiz-color-surface, #f9fafb);
}

.wiz-download-media-modal__option--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.wiz-download-media-modal__option--disabled .wiz-download-media-modal__option-title-label,
.wiz-download-media-modal__option--disabled .wiz-download-media-modal__option-title-count,
.wiz-download-media-modal__option--disabled .wiz-download-media-modal__option-desc,
.wiz-download-media-modal__option--disabled .wiz-download-media-modal__option-icon {
    color: var(--wiz-color-text-light, #9ca3af);
}

.wiz-download-media-modal__option input {
    margin-top: 4px;
    accent-color: var(--wiz-color-text, #1a1a1a);
    flex: 0 0 auto;
}

.wiz-download-media-modal__option-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wiz-color-text, #1a1a1a);
    margin-top: 2px;
}

.wiz-download-media-modal__option-icon svg,
.wiz-download-media-modal__option-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.wiz-download-media-modal__download-spinner {
    display: none;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: wiz-download-media-modal-spin 0.6s linear infinite;
    box-sizing: border-box;
}

@keyframes wiz-download-media-modal-spin {
    to {
        transform: rotate(360deg);
    }
}

.wiz-download-media-modal__option-content {
    flex: 1 1 auto;
    min-width: 0;
}

.wiz-download-media-modal__option-title {
    display: block;
    font-size: var(--wiz-font-size-base, 14px);
    line-height: var(--wiz-line-height-normal, 1.5);
    color: var(--wiz-color-text, #1a1a1a);
}

.wiz-download-media-modal__option-title-label {
    font-weight: var(--wiz-font-weight-semibold, 600);
}

.wiz-download-media-modal__option-title-count {
    font-weight: var(--wiz-font-weight-normal, 400);
    color: var(--wiz-color-text-muted, #6b7280);
}

.wiz-download-media-modal__option-desc {
    display: block;
    margin-top: 2px;
    font-size: var(--wiz-font-size-sm, 12px);
    color: var(--wiz-color-text-muted, #6b7280);
    line-height: var(--wiz-line-height-normal, 1.5);
}

/* Footer */
.wiz-download-media-modal__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--wiz-space-md, 12px);
    padding: var(--wiz-space-base, 16px) var(--wiz-space-xl, 24px);
    border-top: var(--wiz-border-width, 1px) solid var(--wiz-color-border, #e5e7eb);
    background: var(--wiz-color-background, #fff);
}

.wiz-download-media-modal__cancel {
    border: none;
    background: transparent;
    color: var(--wiz-color-text-muted, #6b7280);
    font-size: var(--wiz-font-size-base, 14px);
    cursor: pointer;
    padding: var(--wiz-space-sm, 8px) var(--wiz-space-md, 12px);
}

.wiz-download-media-modal__download {
    display: inline-flex;
    align-items: center;
    gap: var(--wiz-space-sm, 8px);
    border: none;
    border-radius: var(--wiz-radius-sm, 4px);
    background: var(--wiz-color-primary, var(--primary, #075465));
    color: var(--wiz-color-primary-text, var(--primary-text, #fff));
    font-size: var(--wiz-font-size-base, 14px);
    font-weight: var(--wiz-font-weight-medium, 500);
    padding: var(--wiz-space-sm, 8px) var(--wiz-space-base, 16px);
    cursor: pointer;
}

.wiz-download-media-modal__download:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.wiz-download-media-modal__download.is-loading {
    opacity: 0.85;
    cursor: wait;
    pointer-events: none;
}

.wiz-download-media-modal__download.is-loading .wiz-download-media-modal__download-spinner {
    display: inline-block;
}

@media (max-width: 768px) {
    .wiz-download-media-modal__header,
    .wiz-download-media-modal__body,
    .wiz-download-media-modal__footer {
        padding-left: var(--wiz-space-base, 16px);
        padding-right: var(--wiz-space-base, 16px);
    }
}