/* =========================================================
   POLGRAM – Validation + Toast (PixVerse dark theme)
   Error state  = red border / red text / error icon
   Success state = green toast / success icon
========================================================= */

:root {
    --pv-err: #ff4d6d;
    --pv-err-soft: rgba(255,77,109,.15);
    --pv-ok: #22c55e;
}

/* ---------- FIELD ERROR STATE ---------- */
.pv-field.is-error > label {
    color: var(--pv-err);
}

.pv-field.is-error .pv-input > i.pv-ic {
    color: var(--pv-err);
}

/* The :focus variants are essential: pvValidateForm focuses the first
   invalid field, and each page's own `.pv-input input.form-control:focus`
   rule (also !important) would otherwise win the tie and show the focus
   colour instead of red. The extra `.is-error` class raises specificity so
   these win regardless of stylesheet order. */
.pv-field.is-error .pv-input input.form-control,
.pv-field.is-error .pv-input input.form-control:focus,
.pv-field.is-error .pv-input select.form-control,
.pv-field.is-error .pv-input select.form-control:focus,
.pv-field.is-error input.form-control,
.pv-field.is-error input.form-control:focus,
.pv-field.is-error select.form-control,
.pv-field.is-error select.form-control:focus,
.pv-field.is-error textarea.form-control,
.pv-field.is-error textarea.form-control:focus {
    border-color: #ff4d6d !important;
    background: rgba(255,77,109,.08) !important;
    box-shadow: 0 0 0 3px rgba(255,77,109,.22) !important;
    outline: none !important;
}

/* error message line (hidden until invalid) */
.pv-msg {
    display: none;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
}

.pv-field.is-error .pv-msg {
    display: flex;
    color: var(--pv-err);
}

    /* error icon */
    .pv-field.is-error .pv-msg::before {
        content: "\f06a"; /* circle-exclamation */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 12px;
        flex-shrink: 0;
    }

/* ---------- TOASTS ---------- */
.pv-toast-wrap {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(92%, 420px);
    pointer-events: none;
}

.pv-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-radius: 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: #ffffff;
    box-shadow: 0 18px 45px rgba(0,0,0,.55);
    animation: pvToastIn .35s cubic-bezier(.21,1.02,.73,1);
    pointer-events: auto;
}

    .pv-toast.pv-hide {
        animation: pvToastOut .3s ease forwards;
    }

    .pv-toast::before {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 15px;
        flex-shrink: 0;
    }

    /* success = green + success icon */
    .pv-toast.success {
        background: linear-gradient(135deg,#16a34a,#22c55e);
    }

        .pv-toast.success::before {
            content: "\f058"; /* circle-check */
        }

    /* error = red + error icon */
    .pv-toast.error {
        background: linear-gradient(135deg,#e11d48,#ff4d6d);
    }

        .pv-toast.error::before {
            content: "\f06a"; /* circle-exclamation */
        }

@keyframes pvToastIn {
    from { opacity: 0; transform: translateY(-14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pvToastOut {
    to { opacity: 0; transform: translateY(-10px); }
}