/* ======================================================
   FPlayT Tools
   Modal Windows
====================================================== */

.modal {
    position: fixed;
    inset: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 30px;

    z-index: 1000;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

/* Confirmările destructive trebuie să rămână deasupra fișelor și selectoarelor. */
#confirmModal.modal.active {
    z-index: 5000;
}

.modal-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(0,0,0,.75);

    backdrop-filter: blur(8px);
}

.modal-panel {
    position: relative;

    width: min(900px,100%);
    max-height: 90vh;

    overflow: auto;

    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            #1b2632,
            #141d27
        );

    border: 1px solid rgba(255,255,255,.08);

    box-shadow:
        0 30px 80px rgba(0,0,0,.45);

    animation: modalOpen .25s ease;
}

.modal-panel-small {
    width: min(500px,100%);
}

@keyframes modalOpen{

    from{
        opacity:0;
        transform:translateY(20px) scale(.96);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }

}

/* ====================================================== */

.modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.modal-eyebrow{

    display:block;

    margin-bottom:5px;

    color:var(--green);

    font-size:11px;

    font-weight:900;

    letter-spacing:2px;

    text-transform:uppercase;

}

.modal-header h3{

    font-size:25px;

    font-weight:900;

}

.modal-close-button{

    width:42px;
    height:42px;

    border:none;

    border-radius:12px;

    background:rgba(255,255,255,.05);

    color:white;

    font-size:22px;

    transition:.2s;

}

.modal-close-button:hover{

    background:rgba(255,255,255,.1);

    transform:rotate(90deg);

}

/* ====================================================== */

.modal-body{

    padding:25px;

}

.form-grid{

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:20px;

}

.form-field{

    display:flex;

    flex-direction:column;

}

.form-field-full{

    grid-column:1/-1;

}

.form-field label{

    margin-bottom:8px;

    color:#a6b5c4;

    font-size:12px;

    font-weight:800;

}

.form-field input,
.form-field select,
.form-field textarea{

    width:100%;

    padding:14px;

    border:1px solid rgba(255,255,255,.08);

    border-radius:12px;

    outline:none;

    background:#111922;

    color:white;

    font-size:14px;

    transition:.2s;

}

.form-field textarea{

    resize:vertical;

    min-height:130px;

}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{

    border-color:var(--green);

    box-shadow:
        0 0 0 4px rgba(var(--accent-rgb),.08);

}

/* ====================================================== */

.input-with-suffix{

    display:flex;

}

.input-with-suffix input{

    border-radius:
        12px 0 0 12px;

}

.input-with-suffix span{

    display:flex;

    align-items:center;

    padding:0 18px;

    background:#1d2834;

    border:
        1px solid rgba(255,255,255,.08);

    border-left:none;

    border-radius:
        0 12px 12px 0;

    color:#aab8c6;

    font-weight:700;

}

/* ====================================================== */

.form-switch{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:5px;

    cursor:pointer;

    user-select:none;

}

.form-switch input{

    display:none;

}

.switch-track{

    width:52px;

    height:28px;

    border-radius:50px;

    background:#293746;

    position:relative;

    transition:.2s;

}

.switch-track::before{

    content:"";

    position:absolute;

    left:4px;
    top:4px;

    width:20px;
    height:20px;

    border-radius:50%;

    background:white;

    transition:.2s;

}

.form-switch input:checked + .switch-track{

    background:var(--green);

}

.form-switch input:checked + .switch-track::before{

    transform:translateX(24px);

}

/* ====================================================== */

.field-error{

    min-height:18px;

    margin-top:6px;

    color:#ff7676;

    font-size:11px;

}

/* ====================================================== */

.modal-footer{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    padding:22px;

    border-top:1px solid rgba(255,255,255,.06);

}

/* ====================================================== */

@media(max-width:700px){

    .form-grid{

        grid-template-columns:1fr;

    }

    .form-field-full{

        grid-column:auto;

    }

    .modal{

        padding:15px;

    }

}

/* Fișa completă a vehiculului. */
.modal-panel-details { width:min(780px,100%); }.details-hero { height:260px; position:relative; overflow:hidden; border-radius:14px; background:radial-gradient(circle,rgba(var(--accent-rgb),.1),transparent 65%),#0f171f; }.details-hero img { width:100%; height:100%; padding:18px; object-fit:contain; }.details-hero .status-badge { left:15px; bottom:15px; }
.details-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:15px; }.details-grid>div { padding:12px; border:1px solid rgba(255,255,255,.055); border-radius:10px; background:rgba(255,255,255,.025); }.details-grid span { display:block; margin-bottom:5px; color:#718094; font-size:8px; font-weight:900; text-transform:uppercase; }.details-grid strong { display:block; overflow:hidden; color:#e4ebf1; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.details-notes { display:grid; gap:8px; margin-top:15px; }.details-notes p { padding:11px; border:1px solid rgba(255,255,255,.045); border-radius:9px; background:rgba(0,0,0,.12); color:#9dabb9; font-size:11px; line-height:1.6; }
@media(max-width:650px){.details-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.details-hero{height:190px}}
.details-performance{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.details-performance div,.details-tunings{padding:13px;border:1px solid #2a3946;border-radius:11px;background:#101a23}.details-performance span,.details-tunings>span{display:block;color:#8da1b3;font-size:11px;margin-bottom:5px}.details-tunings b{display:inline-block;margin:4px 5px 0 0;padding:5px 8px;border-radius:16px;background:#8bc63f18;color:#a9df65;font-size:11px}.details-tunings em{color:#8799a9}
.tuning-help{margin:5px 0 10px;color:var(--text2);font-size:12px}.tuning-level-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.tuning-level-row{display:grid;grid-template-columns:1fr 96px;align-items:center;gap:9px;padding:9px 10px;border:1px solid var(--border);border-radius:10px;background:color-mix(in srgb,var(--card) 72%,var(--bg))}.tuning-level-row label{display:flex;align-items:center;gap:8px;font-weight:700}.tuning-level-row input{accent-color:var(--green);width:17px;height:17px}.tuning-level-row select{height:34px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);padding:0 8px}.tuning-level-row select:disabled{opacity:.35;cursor:not-allowed}@media(max-width:650px){.tuning-level-grid{grid-template-columns:1fr}}
.vehicle-class-visual{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:9px;max-height:290px;overflow:auto;padding:3px}.vehicle-class-choice{position:relative;min-height:84px;overflow:hidden;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:#fff;cursor:pointer}.vehicle-class-choice img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.48);transition:.25s}.vehicle-class-choice span{position:relative;z-index:1;display:grid;place-items:center;min-height:84px;padding:8px;font-size:.72rem;font-weight:900;text-align:center;text-shadow:0 2px 7px #000}.vehicle-class-choice:hover,.vehicle-class-choice.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.15)}.vehicle-class-choice:hover img,.vehicle-class-choice.active img{filter:brightness(.7);transform:scale(1.04)}
.catalog-lock-notice {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}

.catalog-lock-notice strong {
    color: var(--accent);
    font-size: 11px;
    letter-spacing: .12em;
}

.catalog-lock-notice span {
    color: var(--muted);
    line-height: 1.5;
}

.catalog-field-locked {
    display: none !important;
}

.catalog-field-locked input,
.catalog-field-locked select {
    cursor: not-allowed;
}