/* ============================================
   FORM HANDLER — Shared form-state styling
   --------------------------------------------
   Used by every Web3Forms-wired form on the site:
   - .form-success  injected animated success card
   - .form-error    inline error banner + mailto fallback
   - .form-hp       off-screen spam honeypot
   - .form-file     résumé / file-upload control (careers)
   ============================================ */

/* ---- Spam honeypot — visually & a11y hidden, still submitted ---- */
.form-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

/* ---- Injected success card ---- */
.form-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-12) var(--space-6);
    animation: formSuccessFadeIn 0.5s var(--ease-out) forwards;
}

@keyframes formSuccessFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* When the form itself is the white card, the success panel
   inherits that surface so it doesn't orphan on the section bg. */
.form-success--card {
    background: #fff;
    border: 1.5px solid rgba(10, 17, 25, 0.06);
    border-radius: clamp(16px, 2vw, 24px);
    padding: clamp(48px, 6vw, 72px) clamp(32px, 4vw, 48px);
}

.form-success__check {
    width: 72px;
    height: 72px;
    margin-bottom: var(--space-5);
}

.form-success__svg {
    width: 72px;
    height: 72px;
}

.form-success__circle {
    stroke: #27ae60;
    stroke-width: 2;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-miterlimit: 10;
    animation: formCheckCircle 0.6s var(--ease-out) forwards;
}

.form-success__tick {
    stroke: #27ae60;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: formCheckTick 0.35s 0.4s var(--ease-out) forwards;
}

@keyframes formCheckCircle {
    to { stroke-dashoffset: 0; }
}

@keyframes formCheckTick {
    to { stroke-dashoffset: 0; }
}

.form-success__text {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-6);
    max-width: 32ch;
}

.form-success__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-secondary);
    background: none;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-pill);
    padding: var(--space-3) var(--space-6);
    cursor: pointer;
    transition: color var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}

.form-success__back:hover {
    color: var(--color-text-primary);
    border-color: var(--color-gray-400);
}

/* ---- Inline error banner ---- */
.form-error {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: #B3261E;
    background: rgba(179, 38, 30, 0.07);
    border: 1px solid rgba(179, 38, 30, 0.25);
    border-radius: 10px;
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    animation: formSuccessFadeIn 0.35s var(--ease-out) forwards;
}

.form-error a {
    color: #B3261E;
    font-weight: var(--font-semibold);
    text-decoration: underline;
}

/* ---- File-upload control (careers résumé) ---- */
.form-file {
    margin-bottom: clamp(20px, 2.5vw, 28px);
    min-width: 0;
    max-width: 100%;
}

.form-file__input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.form-file__label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    background: rgba(10, 17, 25, 0.03);
    border: 1.5px dashed rgba(10, 17, 25, 0.18);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out);
}

.form-file__label:hover,
.form-file__input:focus + .form-file__label {
    border-color: rgba(10, 17, 25, 0.4);
    color: var(--color-text-primary);
}

.form-file__label i {
    font-size: 1.15rem;
    flex-shrink: 0;
}

.form-file__label-text {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-file--filled .form-file__label {
    border-style: solid;
    border-color: rgba(10, 17, 25, 0.4);
    color: var(--color-text-primary);
}