/**
 * Limitless Order Builder — standalone Print Size Visualizer page.
 *
 * Loads AFTER gang-sheet.css + lgsb-visualizer.css and reuses their tokens
 * (the whole page renders inside the #lgsb-uploader armor id). Only the
 * page shell lives here — the engine block styles itself via the
 * .lgsb-vz--inline variant in lgsb-visualizer.css.
 *
 * RULES (per THEME-CSS-OVERRIDE-PLAYBOOK.md): every selector anchors on
 * #lgsb-uploader; page-only classes are namespaced lgsb-vzp-*.
 */

/* =====================================================================
   1. INTAKE
   ===================================================================== */

#lgsb-uploader.lgsb-vzp {
    margin: 0 auto var(--lgsb-space-7);
    max-width: 1040px;
}

#lgsb-uploader .lgsb-vzp-intake {
    display: flex;
    flex-direction: column;
    gap: var(--lgsb-space-4);
}

#lgsb-uploader .lgsb-vzp-drop {
    align-items: center;
    background: var(--lgsb-surface);
    border: var(--lgsb-dropzone-border-width) dashed var(--lgsb-teal);
    border-radius: var(--lgsb-radius-card);
    display: flex;
    flex-direction: column;
    gap: var(--lgsb-space-3);
    padding: var(--lgsb-space-8) var(--lgsb-space-5);
    text-align: center;
    transition: background var(--lgsb-dur-fast) var(--lgsb-ease),
                border-color var(--lgsb-dur-fast) var(--lgsb-ease);
}

#lgsb-uploader .lgsb-vzp-drop--over {
    background: var(--lgsb-teal-soft);
    border-color: var(--lgsb-teal-dark);
}

#lgsb-uploader .lgsb-vzp-drop-icon {
    color: var(--lgsb-teal);
}

#lgsb-uploader .lgsb-vzp-drop-title {
    font-size: var(--lgsb-font-title-1);
    font-weight: var(--lgsb-weight-bold);
    margin: 0;
}

#lgsb-uploader .lgsb-vzp-drop-sub {
    color: var(--lgsb-text-muted);
    margin: 0;
}

#lgsb-uploader .lgsb-vzp-drop-hint {
    color: var(--lgsb-text-muted);
    font-size: var(--lgsb-font-body-sm);
    margin: 0;
}

#lgsb-uploader .lgsb-vzp-alt {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lgsb-space-3);
    justify-content: center;
}

/* =====================================================================
   2. BUTTONS (page shell — engine buttons style themselves)
   ===================================================================== */

#lgsb-uploader .lgsb-vzp-btn {
    border-radius: var(--lgsb-radius-button);
    cursor: pointer;
    font-family: var(--lgsb-font-family);
    font-size: var(--lgsb-font-button);
    font-weight: var(--lgsb-weight-bold);
    letter-spacing: var(--lgsb-tracking-button);
    line-height: 1.2;
    padding: 12px 22px;
    text-transform: uppercase;
    transition: background var(--lgsb-dur-fast) var(--lgsb-ease),
                color var(--lgsb-dur-fast) var(--lgsb-ease),
                border-color var(--lgsb-dur-fast) var(--lgsb-ease);
}

#lgsb-uploader .lgsb-vzp-btn--primary {
    background: var(--lgsb-btn-bg);
    border: var(--lgsb-button-border-width) solid var(--lgsb-btn-bg);
    color: var(--lgsb-btn-text);
}

#lgsb-uploader .lgsb-vzp-btn--primary:hover {
    background: var(--lgsb-teal);
    border-color: var(--lgsb-teal);
}

#lgsb-uploader .lgsb-vzp-btn--ghost {
    background: var(--lgsb-surface);
    border: var(--lgsb-button-border-width) solid var(--lgsb-teal);
    color: var(--lgsb-teal-dark);
}

#lgsb-uploader .lgsb-vzp-btn--ghost:hover {
    background: var(--lgsb-teal-soft);
}

#lgsb-uploader .lgsb-vzp-btn--sm {
    padding: 7px 14px;
}

/* =====================================================================
   3. NO-FILE SIZE FORM
   ===================================================================== */

#lgsb-uploader .lgsb-vzp-sizeform {
    background: var(--lgsb-surface);
    border: var(--lgsb-nested-card-border-width) solid var(--lgsb-border);
    border-radius: var(--lgsb-radius-card);
    margin: 0 auto;
    max-width: 520px;
    padding: var(--lgsb-space-5);
    width: 100%;
}

#lgsb-uploader .lgsb-vzp-sizeform-title {
    font-weight: var(--lgsb-weight-bold);
    margin: 0 0 var(--lgsb-space-3);
    text-align: center;
}

#lgsb-uploader .lgsb-vzp-sizeform-fields {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: var(--lgsb-space-3);
    justify-content: center;
}

#lgsb-uploader .lgsb-vzp-sizeform-fields label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#lgsb-uploader .lgsb-vzp-sizeform-fields label span {
    color: var(--lgsb-text-muted);
    font-size: var(--lgsb-font-label);
    font-weight: var(--lgsb-weight-bold);
    letter-spacing: var(--lgsb-tracking-label);
    text-transform: uppercase;
}

/* =====================================================================
   4. STATUS + WORKBENCH
   ===================================================================== */

#lgsb-uploader .lgsb-vzp-status {
    background: var(--lgsb-teal-soft);
    border-radius: var(--lgsb-radius-nested);
    color: var(--lgsb-teal-dark);
    font-size: var(--lgsb-font-body);
    margin: 0 auto;
    max-width: 640px;
    padding: var(--lgsb-space-3) var(--lgsb-space-4);
    text-align: center;
}

#lgsb-uploader .lgsb-vzp-status--error {
    background: var(--lgsb-error-bg);
    color: var(--lgsb-error-text);
}

#lgsb-uploader .lgsb-vzp-status a {
    color: inherit;
    font-weight: var(--lgsb-weight-bold);
    text-decoration: underline;
}

#lgsb-uploader .lgsb-vzp-workbench {
    display: flex;
    flex-direction: column;
    gap: var(--lgsb-space-3);
}

#lgsb-uploader .lgsb-vzp-activebar {
    align-items: center;
    display: flex;
    gap: var(--lgsb-space-3);
    justify-content: space-between;
}

#lgsb-uploader .lgsb-vzp-activename {
    font-weight: var(--lgsb-weight-bold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =====================================================================
   5. THEME-COMBAT (targeted, per THEME-CSS-OVERRIDE-PLAYBOOK.md)
   ===================================================================== */

/* Enemy: Divi/Woo global button gradients + text shadows. */
#lgsb-uploader#lgsb-uploader#lgsb-uploader .lgsb-vzp-btn {
    background-image: none !important;
    text-shadow: none !important;
}

/* Enemy: Divi Theme Builder form-control restyles on the size form. */
#lgsb-uploader#lgsb-uploader#lgsb-uploader .lgsb-vzp-sizeform input[type="number"] {
    background: var(--lgsb-surface) !important;
    border: var(--lgsb-input-border-width) solid var(--lgsb-teal) !important;
    border-radius: var(--lgsb-radius-input) !important;
    color: var(--lgsb-text) !important;
    font-family: var(--lgsb-font-family) !important;
    font-size: var(--lgsb-font-body) !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    width: 110px;
}

/* =====================================================================
   6. RESPONSIVE
   ===================================================================== */

@media (max-width: 640px) {
    #lgsb-uploader .lgsb-vzp-drop {
        padding: var(--lgsb-space-7) var(--lgsb-space-4);
    }

    #lgsb-uploader .lgsb-vzp-alt {
        flex-direction: column;
    }

    #lgsb-uploader .lgsb-vzp-btn--ghost {
        width: 100%;
    }
}