/*
 * Lotus Blossom Yoga & Meditation
 * Managed Forms / Request Manager
 * Iteration: form-tool-v2.css
 */


/* =========================================================
   PUBLIC REQUEST FORM
========================================================= */

.managed-form-section {
    padding:
        clamp(30px, 5vw, 64px)
        0
        clamp(54px, 8vw, 94px);
}

.managed-form-card,
.managed-form-success {
    padding:
        clamp(24px, 4vw, 42px);
    border:
        1px solid
        var(--border);
    border-radius:
        var(--radius-large);
    background:
        var(--surface);
    box-shadow:
        0 20px 54px
        rgba(66, 77, 123, .09);
}

.managed-form-heading {
    max-width:
        680px;
    margin-bottom:
        28px;
}

.managed-form-heading h2,
.managed-form-success h2 {
    margin-top:
        4px;
}

.managed-form {
    display:
        flex;
    flex-direction:
        column;
    gap:
        22px;
}

.managed-field label,
.managed-field fieldset {
    margin:
        0;
}

.managed-field fieldset {
    padding:
        0;
    border:
        0;
}

.managed-field legend,
.managed-field-label {
    display:
        block;
    margin-bottom:
        7px;
    color:
        var(--primary-dark);
    font-family:
        var(--font-ui);
    font-weight:
        700;
}

.managed-field input[type="text"],
.managed-field input[type="email"],
.managed-field input[type="tel"],
.managed-field input[type="number"],
.managed-field input[type="date"],
.managed-field textarea,
.managed-field select {
    width:
        100%;
    min-height:
        48px;
    padding:
        11px 13px;
    border:
        1px solid
        var(--border);
    border-radius:
        var(--radius-small);
    background:
        #fff;
    color:
        var(--text);
    font:
        inherit;
}

.managed-field textarea {
    min-height:
        145px;
    resize:
        vertical;
}

.managed-field input:focus,
.managed-field textarea:focus,
.managed-field select:focus {
    outline:
        0;
    border-color:
        var(--lotus-lavender);
    box-shadow:
        0 0 0 3px
        rgba(133, 143, 199, .13);
}

.required-mark {
    color:
        #a52f43;
}

.managed-field-help {
    margin:
        6px 0 0;
    color:
        var(--muted);
    font-size:
        .86rem;
}

.managed-choice-grid {
    display:
        grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap:
        10px;
    margin-top:
        10px;
}

.managed-choice {
    display:
        flex !important;
    align-items:
        flex-start;
    gap:
        10px;
    width:
        auto !important;
    margin:
        0 !important;
    padding:
        12px 14px;
    border:
        1px solid
        var(--border);
    border-radius:
        var(--radius-small);
    background:
        var(--surface);
    cursor:
        pointer;
}

.managed-choice:hover {
    background:
        var(--primary-soft);
}

.managed-choice input {
    width:
        auto !important;
    margin:
        3px 0 0 !important;
}

.managed-single-check {
    display:
        inline-flex !important;
}

.managed-turnstile {
    margin-top:
        4px;
}

.managed-form-actions {
    padding-top:
        4px;
}

.managed-form-errors {
    margin-bottom:
        22px;
    padding:
        15px 18px;
    border:
        1px solid
        #e7aab4;
    border-radius:
        var(--radius-small);
    background:
        #fff1f3;
    color:
        #812739;
}

.managed-form-errors ul {
    margin-bottom:
        0;
}

.managed-form-success {
    text-align:
        center;
}


/* =========================================================
   ADMIN FORM MANAGER
========================================================= */

.form-field-list {
    display:
        flex;
    flex-direction:
        column;
    gap:
        9px;
}

.form-field-row {
    display:
        grid;
    grid-template-columns:
        70px
        minmax(0, 1fr)
        auto;
    gap:
        14px;
    align-items:
        center;
    padding:
        13px;
    border:
        1px solid
        var(--border);
    border-radius:
        12px;
    background:
        #fff;
}

.form-field-row-hidden {
    opacity:
        .55;
}

.form-field-main {
    display:
        flex;
    flex-direction:
        column;
    min-width:
        0;
}

.form-field-main span {
    color:
        var(--muted);
    font-size:
        .76rem;
}

.form-field-actions {
    display:
        flex;
    flex-wrap:
        wrap;
    justify-content:
        flex-end;
    gap:
        5px;
}

.form-field-actions form {
    margin:
        0;
}

.form-drag-handle {
    display:
        flex;
    flex-direction:
        column;
    align-items:
        center;
    justify-content:
        center;
    gap:
        2px;
    width:
        58px;
    min-height:
        44px;
    border:
        1px solid
        var(--border);
    border-radius:
        10px;
    background:
        var(--primary-soft);
    color:
        var(--primary-dark);
    cursor:
        grab;
    touch-action:
        none;
    user-select:
        none;
}

.form-drag-handle span {
    font-size:
        1.1rem;
}

.form-drag-handle small {
    font-size:
        .62rem;
    font-weight:
        800;
    text-transform:
        uppercase;
}

.form-sort-placeholder {
    min-height:
        62px;
    border:
        2px dashed
        var(--lotus-lavender);
    border-radius:
        12px;
    background:
        var(--primary-soft);
}

.form-field-row.is-pointer-dragging {
    box-shadow:
        0 18px 46px
        rgba(39, 43, 67, .22);
}

.form-is-reordering {
    user-select:
        none;
    cursor:
        grabbing;
}

.form-field-list::after {
    display:
        block;
    min-height:
        18px;
    margin-top:
        4px;
    color:
        var(--muted);
    font-size:
        .72rem;
    font-weight:
        700;
}

.form-field-list.is-saving::after {
    content:
        "Saving order…";
}

.form-field-list.is-saved::after {
    content:
        "Order saved";
    color:
        #34734d;
}

.form-field-list.is-save-error::after {
    content:
        "Could not save order";
    color:
        #a52f43;
}

.form-options-editor[hidden] {
    display:
        none !important;
}


/* =========================================================
   REQUEST MANAGER
========================================================= */

.request-filter-bar {
    display:
        flex;
    flex-wrap:
        wrap;
    gap:
        7px;
    margin-bottom:
        18px;
}

.request-filter-bar a {
    padding:
        7px 11px;
    border:
        1px solid
        var(--border);
    border-radius:
        999px;
    background:
        #fff;
    text-decoration:
        none;
    font-size:
        .78rem;
    font-weight:
        700;
}

.request-filter-bar a.is-active {
    background:
        var(--primary);
    color:
        #fff;
    border-color:
        var(--primary);
}

.requests-layout {
    display:
        grid;
    grid-template-columns:
        minmax(300px, .8fr)
        minmax(0, 1.4fr);
    gap:
        18px;
    align-items:
        start;
}

.requests-list-panel,
.request-detail-panel {
    padding:
        0 !important;
    overflow:
        hidden;
}

.requests-list {
    display:
        flex;
    flex-direction:
        column;
}

.request-list-item {
    display:
        grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    gap:
        12px;
    padding:
        15px 17px;
    border-bottom:
        1px solid
        var(--border);
    color:
        inherit;
    text-decoration:
        none;
}

.request-list-item:last-child {
    border-bottom:
        0;
}

.request-list-item:hover,
.request-list-item.is-selected {
    background:
        var(--primary-soft);
}

.request-list-item > div:first-child {
    display:
        flex;
    flex-direction:
        column;
}

.request-list-item span {
    color:
        var(--muted);
    font-size:
        .75rem;
}

.request-list-meta {
    display:
        flex;
    flex-direction:
        column;
    align-items:
        flex-end;
    gap:
        5px;
}

.request-status {
    display:
        inline-flex;
    padding:
        4px 8px;
    border-radius:
        999px;
    background:
        var(--primary-soft);
    color:
        var(--primary-dark);
    font-size:
        .7rem;
    font-weight:
        800;
}

.request-status-new {
    background:
        #fff2c9;
}

.request-status-replied {
    background:
        #e0f3e7;
    color:
        #2d6944;
}

.request-status-spam {
    background:
        #f7dde2;
    color:
        #8a2f3e;
}

.request-detail-panel {
    padding:
        24px !important;
}

.request-detail-heading {
    display:
        flex;
    justify-content:
        space-between;
    gap:
        18px;
    align-items:
        flex-start;
}

.request-detail-heading h2 {
    margin:
        3px 0;
}

.request-contact-actions {
    display:
        flex;
    flex-wrap:
        wrap;
    gap:
        8px;
    margin:
        16px 0 22px;
}

.request-data-grid {
    display:
        grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap:
        10px;
}

.request-data-item {
    padding:
        13px;
    border:
        1px solid
        var(--border);
    border-radius:
        10px;
    background:
        var(--surface-soft);
}

.request-data-item span {
    display:
        block;
    margin-bottom:
        5px;
    color:
        var(--muted);
    font-size:
        .7rem;
    font-weight:
        800;
    text-transform:
        uppercase;
    letter-spacing:
        .04em;
}

.request-data-item strong {
    display:
        block;
    font-weight:
        500;
    line-height:
        1.55;
}

.request-status-actions {
    margin-top:
        24px;
    padding-top:
        18px;
    border-top:
        1px solid
        var(--border);
}

.request-status-actions > div {
    display:
        flex;
    flex-wrap:
        wrap;
    gap:
        7px;
    margin-top:
        9px;
}

.request-status-actions form {
    margin:
        0;
}


@media (max-width: 900px) {

    .requests-layout {
        grid-template-columns:
            1fr;
    }

    .request-data-grid {
        grid-template-columns:
            1fr;
    }
}


@media (max-width: 680px) {

    .managed-choice-grid {
        grid-template-columns:
            1fr;
    }

    .form-field-row {
        grid-template-columns:
            58px
            minmax(0, 1fr);
    }

    .form-field-actions {
        grid-column:
            1 / -1;
        justify-content:
            flex-start;
    }
}


/* =========================================================
   FORM TOOL V2 — DRAFT / VALIDATION RESILIENCE
========================================================= */

.managed-form-draft-note {
    margin:
        -2px 0 0;

    padding:
        11px 13px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--border) 78%,
            var(--lotus-lavender) 22%
        );

    border-radius:
        var(--radius-small);

    background:
        color-mix(
            in srgb,
            var(--primary-soft) 52%,
            #fff 48%
        );

    color:
        var(--muted);

    font-size:
        .82rem;

    line-height:
        1.55;
}

.managed-success-note {
    margin-top:
        12px;

    color:
        var(--muted);

    font-size:
        .9rem;
}