/**
 * Custom forms.
 *
 * payam-auth.css defines the whole design system -- the floating label, the required
 * asterisk, the validity states, the error message -- but every one of its rules
 * targets `input`. A custom form can also render a <select>, a <textarea> or a
 * checkbox, and those inherited none of it, which is why they looked broken.
 *
 * This file extends the existing rules to those controls. It introduces no new
 * colours, no new sizes and no new spacing: everything below reuses the same
 * --payam-* variables, so a change in the Styles settings still moves all of it
 * together.
 */

.payam-form-group {
    /* Same box as an <input>, so the three controls line up and share the design. */
    select,
    textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-block: var(--payam-space-md);
        padding-inline: var(--payam-space-md);

        color: var(--payam-text-color);
        background-color: var(--payam-bg-color);
        border: 1px solid var(--payam-border-color);
        border-radius: var(--payam-border-radius);

        font-family: inherit;
        font-size: var(--payam-fs-base);

        outline: none;
        box-shadow: none;
        appearance: none;

        transition: border-color var(--payam-transition-duration) ease-out;
    }

    select:hover,
    textarea:hover {
        border-color: color-mix(
            in srgb,
            var(--payam-primary-color) 20%,
            var(--payam-border-color)
        );
    }

    select:focus,
    textarea:focus {
        border-color: var(--payam-primary-color);
    }

    select:focus-visible,
    textarea:focus-visible {
        outline: 1px solid var(--payam-primary-color);
    }

    /* The label is the visible one; the native placeholder only drives :placeholder-shown. */
    textarea::placeholder {
        color: transparent;
    }

    textarea {
        resize: vertical;
        min-height: calc(4 * var(--payam-space-lg));
        direction: rtl;
    }

    /* The stylesheet's asterisk rule only knows about `input`. Say the same for these. */
    label[for]:has(+ select[required])::after,
    label[for]:has(+ textarea[required])::after,
    input[type="checkbox"][required] + label[for]::after {
        content: " * ";
        color: var(--payam-error-color);
        font-weight: bold;
        vertical-align: middle;
    }

    /* A textarea floats its label exactly like an input: :placeholder-shown works here. */
    label:has(+ textarea:focus-visible),
    label:has(+ textarea:not(:placeholder-shown)) {
        inset-block-start: calc(-1 * var(--payam-space-md) + 0.25rem);
        inset-inline-start: var(--payam-space-md);

        background-color: var(--payam-bg-color);
        color: var(--payam-text-color);

        font-weight: 500;
        font-size: calc(0.9 * var(--payam-fs-base));
    }

    label:has(+ select.invalid),
    label:has(+ textarea.invalid) {
        color: var(--payam-error-color);
    }

    select.invalid,
    textarea.invalid {
        border-color: var(--payam-error-color) !important;
        color: var(--payam-error-color);
    }

    /* Same adjacency contract as the inputs: the message sits right after the control. */
    textarea:not(:placeholder-shown):invalid + .payam-notify,
    select.invalid + .payam-notify,
    textarea.invalid + .payam-notify {
        display: block;
    }

    .payam-field-desc {
        display: block;
        margin-block-start: var(--payam-space-sm);
        color: var(--payam-text-color-lead);
        font-size: var(--payam-fs-sm);
    }
}

/*
 * A <select> has no :placeholder-shown to pivot on -- it always shows something. So
 * its label simply lives in the floated position from the start, which is also what
 * a filled input looks like. Consistent, and it never sits on top of the value.
 */
.payam-form-group.payam-field-select {
    label {
        inset-block-start: calc(-1 * var(--payam-space-md) + 0.25rem);
        inset-inline-start: var(--payam-space-md);

        background-color: var(--payam-bg-color);
        color: var(--payam-text-color);

        font-weight: 500;
        font-size: calc(0.9 * var(--payam-fs-base));
    }

    /* appearance:none removed the native arrow; draw one that follows the text direction. */
    select {
        padding-inline-end: calc(2.5 * var(--payam-space-md));
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="%23888"><path d="M1.6 4.5a.75.75 0 0 1 1.06 0L8 9.84l5.34-5.34a.75.75 0 1 1 1.06 1.06l-5.87 5.87a.75.75 0 0 1-1.06 0L1.6 5.56a.75.75 0 0 1 0-1.06z"/></svg>');
        background-repeat: no-repeat;
        background-position: calc(100% - var(--payam-space-md)) center;
        background-size: var(--payam-space-md);
    }
}

/*
 * A checkbox has nothing to float a label over. It reads as a statement the user
 * ticks, so the label sits beside it in normal flow rather than absolutely.
 */
.payam-form-group.payam-field-checkbox {
    display: flex;
    align-items: center;
    gap: var(--payam-space-sm);
    flex-wrap: wrap;

    label {
        position: static;
        inset: auto;
        padding-inline: 0;

        color: var(--payam-text-color);
        font-size: var(--payam-fs-base);
        font-weight: 400;
        cursor: pointer;
    }

    input[type="checkbox"] {
        width: auto;
        margin: 0;
        padding: 0;
        accent-color: var(--payam-primary-color);
        cursor: pointer;
    }

    .payam-notify,
    .payam-field-desc {
        flex-basis: 100%;
    }
}

/*
 * Reveal-icon spacing -- identical to the default form.
 *
 * payam-auth.css reserves it with `input[type="password"]` plus the type-independent
 * backups `input#user_pass` / `input#user_confirm_pass`. A custom form matches only the
 * first: its ids are per-form (pr-<slug>-<n>-user_pass), so once the reveal button
 * flips the type to "text" nothing matches and the padding vanishes -- which is the
 * gap the value slides through onto the icon.
 *
 * These mirror the default's exact declarations -- same property (padding-inline-start),
 * same values (space-md, and 3x in RTL) -- but keyed on the STABLE group class, which
 * comes from the field's type in the definition rather than the live input type and so
 * holds through the toggle. Same values in both states means revealing never shifts the
 * text.
 */
.payam-form-group.payam-field-password input {
    padding-inline-start: var(--payam-space-md);
}

html[dir="rtl"] .payam-form-group.payam-field-password input,
.rtl .payam-form-group.payam-field-password input {
    padding-inline-start: calc(3 * var(--payam-space-md));
}

/*
 * The optional-fields drawer. Native <details>, so it opens with no JavaScript.
 *
 * The inner padding matches the horizontal offset the floating label uses
 * (--payam-space-md), so a label that has floated up still lines up with the panel
 * edge instead of hanging over it.
 */
.payam-optional-panel {
    margin-block: var(--payam-space-md);
    border: 1px solid var(--payam-border-color);
    border-radius: var(--payam-border-radius);
    background-color: var(--payam-bg-color);
}

.payam-optional-toggle {
    padding-block: var(--payam-space-md);
    padding-inline: var(--payam-space-md);

    color: var(--payam-primary-color);
    font-size: var(--payam-fs-base);
    font-weight: 500;

    cursor: pointer;
    list-style: none;
    user-select: none;
}

.payam-optional-toggle::-webkit-details-marker {
    display: none;
}

.payam-optional-toggle::before {
    content: "+";
    display: inline-block;
    margin-inline-end: var(--payam-space-sm);
    font-weight: 700;
}

.payam-optional-panel[open] > .payam-optional-toggle::before {
    content: "−";
}

/*
 * Space for the floated label to sit in: it rises above the control's top edge, so
 * the first field needs headroom or the label is clipped by the panel border.
 */
.payam-optional-panel > .payam-form-group {
    margin-inline: var(--payam-space-md);
    margin-block-start: var(--payam-space-lg);
}

.payam-optional-panel > .payam-form-group:last-child {
    margin-block-end: var(--payam-space-lg);
}