/* ════════════════════════════════════════════════════════════════════════
   zFile_demo.css — a ONE-OFF reskinned file picker (opt in: zBrush [page, leaf, demo.zFile_demo]).
   Proof of how far a `type: file` field reskins through your OWN class on the canonical
   surface — here a soft "drop zone" with a pill browse button. _zClass: dropzone lands on
   the field wrapper; the box is reached as .dropzone .zForm-control, and the browse button
   through the native ::file-selector-button pseudo (a browser part, not a class). Scoped to
   .dropzone so it touches NOTHING else. Bifrost-only — the terminal just asks for a path.
   ════════════════════════════════════════════════════════════════════════ */

.dropzone { margin-bottom: 1.6rem; }

/* the label — a small emerald tag right on top of the drop area */
.dropzone .zLabel {
    display:        block;
    margin-bottom:  0.25rem;
    color:          #10b981;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size:      0.72rem;
}

/* the box — a dashed drop area that lifts on hover */
.dropzone .zForm-control {
    width:          100%;
    background:     rgba(16, 185, 129, 0.06);
    border:         1.5px dashed rgba(16, 185, 129, 0.55);
    border-radius:  14px;
    padding:        1.1rem 1.2rem;
    color:          #d1fae5;
    cursor:         pointer;
    transition:     border-color 0.2s ease, background 0.2s ease;
}
.dropzone .zForm-control:hover {
    border-color: #10b981;
    background:    rgba(16, 185, 129, 0.12);
}

/* the browse button — the native ::file-selector-button part, dressed as a pill.
   NOTE: zbase ships input[type="file"].zForm-control::file-selector-button, so we match
   that shape under .dropzone to win on specificity (without !important). */
.dropzone input[type="file"].zForm-control::file-selector-button {
    margin-right:  1rem;
    padding:       0.5rem 1.1rem;
    border:        none;
    border-radius: 999px;
    background:    linear-gradient(180deg, #10b981 0%, #059669 100%);
    color:         #042f2e;
    font-weight:   700;
    letter-spacing: 0.02em;
    cursor:        pointer;
    transition:    filter 0.2s ease, box-shadow 0.2s ease;
}
.dropzone input[type="file"].zForm-control::file-selector-button:hover {
    filter:     brightness(1.08);
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.5);
}