/**
 * PM Upload UI Fix — styles
 *
 * VERSION: 1.1.9
 *
 * Minimal, targeted styling that doesn't fight with Avada or APFE.
 *
 * Key approach: use real DOM elements (added by JS) rather than CSS
 * pseudo-elements. The Add to Cart button is left visually untouched by
 * this CSS — only its text and disabled state change. Avada handles all
 * button styling.
 */

/* =========================================================================
 * Add to Cart — disabled state visual
 *
 * Avada's selectors (.single-product.fusion-body .fusion-woo-cart-1
 * .fusion-button-wrapper .button) have specificity that's impractical to
 * override with !important alone. We rely on the [disabled] attribute
 * (which browsers handle) and let Avada keep its appearance otherwise.
 *
 * Cursor change is a low-impact tweak that may or may not apply depending
 * on Avada's rules; harmless either way.
 * ========================================================================= */

/*
 * Cursor change while uploads are pending. Bumped with !important because
 * Avada sets cursor:pointer on .button via deeply-nested selectors that
 * outweigh ours otherwise. Cursor is safe to !important since it has no
 * cascade implications beyond the visual cue.
 */
button.single_add_to_cart_button.pm-uploads-pending,
.single_add_to_cart_button.pm-uploads-pending,
button.single_add_to_cart_button[disabled].pm-uploads-pending {
    cursor: wait !important;
}

/*
 * Spinner glyph injected as a real DOM element inside the button.
 * Because it's a child element rather than a pseudo-element, it doesn't
 * collide with Avada's ::before/::after on the button itself.
 *
 * The spinner uses currentColor so it inherits the button's text color
 * regardless of theme — works on any colored button.
 */
.single_add_to_cart_button .pm-button-spinner {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin-right: 0.6em;
    vertical-align: -2px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    opacity: 0.85;
    animation: pm-button-spin 0.8s linear infinite;
    box-sizing: border-box;
}

@keyframes pm-button-spin {
    to { transform: rotate(360deg); }
}

.single_add_to_cart_button .pm-button-text {
    display: inline-block;
    vertical-align: middle;
}

/* =========================================================================
 * Filename status icons (real DOM spans, injected by JS)
 * ========================================================================= */

.dz-filename .pm-status-icon {
    display: inline-block;
    font-weight: 700;
    margin-right: 2px;
}

.dz-filename .pm-status-icon--success {
    color: #16a34a;
}

.dz-filename .pm-status-icon--error {
    color: #dc2626;
}

.dz-filename.pm-filename-success {
    color: #16a34a;
    font-weight: 600;
}

.dz-filename.pm-filename-error {
    color: #dc2626;
    font-weight: 600;
}

/* =========================================================================
 * Status banner (injected by JS after each .dzone container)
 *
 * Single banner per uploader. States: working, slow, error-mixed, success.
 * Only visible when JS adds the --visible class.
 * ========================================================================= */

.pm-upload-banner {
    display: none;
    margin: 10px 0 0 0;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid transparent;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.pm-upload-banner.pm-upload-banner--visible {
    display: block;
}

/* Working state — blue, calm, in-progress */
.pm-upload-banner.pm-upload-banner--working {
    background-color: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}
.pm-upload-banner.pm-upload-banner--working::before {
    content: '⏳ ';
    margin-right: 4px;
}

/* Success state — green, brief */
.pm-upload-banner.pm-upload-banner--success {
    background-color: #f0fdf4;
    border-color: #86efac;
    color: #166534;
}

/* =========================================================================
 * Per-preview state classes
 *
 * Note: previously had a "Processing…" / "Uploading…" overlay text rendered
 * via ::after on .dz-processing-server. Removed — the banner below the
 * dropzone communicates upload state more clearly, and the inline overlay
 * was visually noisy in APFE's narrow row layout.
 *
 * The dz-processing-server class is still added/removed by JS (used by the
 * stuck watchdog), but no visual treatment is applied here.
 * ========================================================================= */

/* =========================================================================
 * Flash effect when scrolling user attention to the upload area
 * ========================================================================= */

.pm-upload-flash {
    animation: pm-flash 1.5s ease-in-out;
}

@keyframes pm-flash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
    25%      { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.3); }
    75%      { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5); }
}

/* =========================================================================
 * Aria-live region (visually hidden)
 * ========================================================================= */

.pm-upload-aria-live.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}