.support-request {
    --support-blue-border: var(--lf-border-strong);
    --support-blue-border-active: rgba(var(--brand-blue-rgb), var(--a-72));
    position: relative;
    scroll-margin-top: 120px;
    padding: clamp(var(--space-7), 3vw, var(--space-10));
    overflow: hidden;
    color: var(--text-primary);
    background: var(--surface-low);
    border-color: var(--support-blue-border) !important;
    box-shadow:
        inset 0 1px rgba(255, 255, 255, var(--a-12)),
        inset 0 -1px var(--glow-blue),
        0 24px 70px rgba(0, 0, 0, var(--a-24));
}

.support-request.glass-card {
    transition: border-color var(--dur-moderate) ease, box-shadow var(--dur-moderate) ease;
}

.support-request.glass-card:hover {
    border-color: var(--support-blue-border-active) !important;
    box-shadow:
        inset 0 1px rgba(255, 255, 255, var(--a-12)),
        inset 0 -1px var(--glow-blue),
        0 24px 70px rgba(0, 0, 0, var(--a-24)),
        0 0 48px rgba(var(--brand-blue-rgb), var(--a-24));
    transform: none;
}

.support-request::before {
    display: none;
}

.support-request > * {
    position: relative;
    z-index: var(--z-raised);
}

.support-request__header {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}

.support-request__header h3 {
    margin-bottom: var(--space-4);
    font-size: var(--text-3xl);
}

.support-request__header p {
    max-width: 560px;
    margin: 0 auto;
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
}

.support-request__form {
    max-width: 540px;
    margin: var(--space-7) auto 0;
}

.support-request__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(580px, 100%);
    gap: var(--space-1);
    padding: var(--space-2);
    margin: 0 auto var(--space-7);
    border: 1px solid rgba(255, 255, 255, var(--a-14));
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--surface-low) 88%, transparent);
    box-shadow:
        inset 0 1px rgba(255, 255, 255, var(--a-12)),
        0 10px 26px rgba(0, 0, 0, var(--a-14));
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    backdrop-filter: blur(16px) saturate(135%);
}

.support-request__tab {
    min-height: 56px;
    padding: 0 var(--space-4);
    color: var(--text-secondary);
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    font: inherit;
    font-size: clamp(var(--text-base), 1.5vw, var(--text-md));
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--dur-base) ease, background var(--dur-base) ease, box-shadow var(--dur-base) ease;
}

.support-request__tab:hover:not(.is-active) {
    color: var(--text-primary);
}

.support-request__tab.is-active {
    color: var(--lf-button-foreground);
    background: #fff;
    box-shadow: inset 0 1px rgba(255, 255, 255, var(--a-85)), 0 8px 22px rgba(0, 0, 0, var(--a-18));
}

.support-request__field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.support-request__enterprise-meta-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-7);
}

.support-request__field {
    position: relative;
    display: block;
}

.support-request__field > span {
    position: absolute;
    top: -9px;
    left: 14px;
    z-index: var(--z-raised);
    padding: 0 var(--space-1);
    color: var(--text-secondary);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    -webkit-backdrop-filter: blur(var(--blur-sm));
    backdrop-filter: blur(var(--blur-sm));
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 20px;
}

.support-request__field input,
.support-request__field textarea,
.support-request__field select {
    display: block;
    width: 100%;
    color: var(--text-primary);
    border: 1px solid var(--lf-border-control);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface) 62%, transparent);
    box-shadow: var(--shadow-inset-top), inset 0 -1px rgba(0, 0, 0, var(--a-14));
    font: inherit;
    transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease, background var(--dur-base) ease;
    -webkit-backdrop-filter: blur(15px) saturate(130%);
    backdrop-filter: blur(15px) saturate(130%);
}

.support-request__field input {
    height: 62px;
    padding: var(--space-4) var(--space-3) var(--space-2);
}

.support-request__field--message {
    margin-top: var(--space-7);
}

.support-request__field textarea {
    min-height: 148px;
    padding: var(--space-5) var(--space-3) var(--space-3);
    resize: vertical;
}

.support-request__field select {
    height: 62px;
    padding: 0 var(--space-9) 0 var(--space-3);
    cursor: pointer;
}

.support-request__field select option {
    color: var(--text-primary);
    background: var(--surface);
}

.support-request__field input:focus-visible,
.support-request__field textarea:focus-visible,
.support-request__field select:focus-visible {
    border-color: var(--brand-blue);
    outline: var(--lf-focus-width) solid var(--lf-focus);
    outline-offset: var(--lf-focus-offset);
    background: color-mix(in srgb, var(--surface-high) 72%, transparent);
    box-shadow: 0 0 0 4px var(--glow-blue), inset 0 1px rgba(255, 255, 255, var(--a-12));
}

.support-request__field input:invalid:not(:placeholder-shown),
.support-request__field textarea:invalid:not(:placeholder-shown) {
    border-color: var(--status-danger);
}

.support-request__submit-wrap {
    display: grid;
    justify-items: center;
    margin-top: var(--space-7);
    text-align: center;
}

.support-request__submit {
    min-width: 154px;
    min-height: 48px;
    padding: 0 var(--space-5);
    color: var(--lf-button-foreground);
    border: 1px solid rgba(255, 255, 255, var(--a-85));
    border-radius: var(--radius-full);
    background: #fff;
    box-shadow: var(--shadow-2);
    font: inherit;
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    cursor: pointer;
    transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease, filter var(--dur-base) ease, transform var(--dur-base) ease;
}

.support-request__submit:hover {
    color: var(--lf-button-foreground);
    border-color: rgba(255, 255, 255, var(--a-85));
    background: #fff;
    box-shadow: var(--shadow-3), 0 0 16px rgba(var(--brand-blue-rgb), var(--a-14));
    transform: none;
}

.support-request__submit:focus-visible,
.support-request__tab:focus-visible {
    outline: 3px solid var(--brand-blue);
    outline-offset: 3px;
}

.support-request__note,
.support-request__status {
    max-width: 590px;
    margin: var(--space-3) auto 0;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
}

.support-request__status {
    min-height: 20px;
    margin-top: var(--space-2);
    color: color-mix(in srgb, var(--brand-blue) 68%, #fff);
}

@media (max-width: 639px) {
    .support-request {
        padding: var(--space-7) var(--space-5);
        border-radius: var(--radius-panel);
    }

    .support-request__header p {
        font-size: var(--text-base);
    }

    .support-request__form {
        max-width: 100%;
        margin-top: var(--space-7);
    }

    .support-request__tabs {
        gap: var(--space-1);
        padding: var(--space-1);
        margin-bottom: var(--space-7);
    }

    .support-request__tab {
        min-height: 52px;
        padding: 0 var(--space-2);
        font-size: var(--text-sm);
        line-height: var(--leading-snug);
    }

    .support-request__field-grid {
        grid-template-columns: 1fr;
        gap: var(--space-7);
    }

    .support-request__enterprise-meta-grid {
        grid-template-columns: 1fr;
        gap: var(--space-7);
        margin-top: var(--space-7);
    }

    .support-request__field input {
        height: 64px;
    }

    .support-request__field select {
        height: 64px;
    }

    .support-request__field--message {
        margin-top: var(--space-7);
    }

    .support-request__field textarea {
        min-height: 150px;
    }

    .support-request__submit {
        min-height: 54px;
        font-size: var(--text-base);
    }
}

@media (max-width: 420px) {
    .support-request__tabs {
        border-radius: var(--radius-panel);
    }

    .support-request__tab {
        padding: var(--space-2);
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media (prefers-reduced-motion: reduce) {
    .support-request__tab,
    .support-request__field input,
    .support-request__field textarea,
    .support-request__field select,
    .support-request__submit {
        transition: none;
    }
}
