/**
 * Envisage_Forms Module — submission feedback
 *
 * Plain CSS on purpose: the module's Tailwind source is only compiled by Hyva themes, and this
 * confirmation/error UI has to be legible on Luma too. Colours read from theme custom properties
 * where they exist and fall back to neutral values everywhere else, so a Hyva child theme can
 * restyle the panel by redefining its own variables.
 *
 * @category  Envisage
 * @package   Envisage_Forms
 * @author    Envisage Digital <marketplace@envisagedigital.co.uk>
 * @copyright Copyright (c) 2026 Envisage Digital
 * @license   OSL-3.0
 * @version   1.3.0
 */

/* =========================
   INLINE CONFIRMATION PANEL
========================== */

.envisage-form__success {
    box-sizing: border-box;
    padding: 1.5rem;
    border: 1px solid #b7e4c7;
    border-radius: 0.75rem;
    background-color: #ecfdf3;
    color: #14532d;
}

.envisage-form__success:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.envisage-form__success-heading {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.envisage-form__success-message {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

/* =========================
   DIALOGS
========================== */

/* Declared for both states so browsers without dialog support keep the markup hidden
   rather than rendering it inline above the form. */
.envisage-form__dialog {
    display: none;
}

.envisage-form__dialog[open] {
    display: block;
    box-sizing: border-box;
    width: calc(100% - 2rem);
    max-width: 30rem;
    padding: 0;
    border: 0;
    border-radius: 0.75rem;
    background: transparent;
    overflow: visible;
}

.envisage-form__dialog::backdrop {
    background-color: rgba(15, 23, 42, 0.6);
}

.envisage-form__dialog-inner {
    box-sizing: border-box;
    padding: 2rem;
    border-radius: 0.75rem;
    background-color: #ffffff;
    box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.25);
    text-align: center;
}

.envisage-form__dialog-title {
    margin: 0 0 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    color: #0f172a;
}

.envisage-form__dialog--success .envisage-form__dialog-title {
    color: #14532d;
}

.envisage-form__dialog--error .envisage-form__dialog-title {
    color: #b42318;
}

.envisage-form__dialog-message {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #334155;
}

.envisage-form__dialog-message:empty {
    display: none;
}

.envisage-form__dialog-actions {
    margin: 1.5rem 0 0;
}

/* Themed button classes are applied alongside this one; these rules only guarantee a
   usable control when the theme provides no button styling for the dialog context. */
.envisage-form__dialog-close {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    border: 0;
    border-radius: 2rem;
    background-color: var(--color-primary, #1f2937);
    color: var(--color-on-primary, #ffffff);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.envisage-form__dialog-close:hover,
.envisage-form__dialog-close:focus {
    opacity: 0.9;
}

@media (prefers-reduced-motion: no-preference) {
    .envisage-form__dialog[open] > .envisage-form__dialog-inner {
        animation: envisage-form-dialog-in 0.18s ease-out;
    }
}

@keyframes envisage-form-dialog-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }

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