.tehranweb-service-form {
    margin-block: 3rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--tw-color-border, #d9dde3);
    border-radius: var(--tw-border-radius, 1rem);
    background: var(--tw-color-surface, #fff);
    color: var(--tw-color-text, #1f2937);
}

.tehranweb-service-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.tehranweb-service-form__field {
    display: grid;
    gap: .45rem;
}

.tehranweb-service-form__field input,
.tehranweb-service-form__field select,
.tehranweb-service-form__field textarea {
    inline-size: 100%;
    box-sizing: border-box;
    padding: .8rem .9rem;
    border: 1px solid var(--tw-color-border, #cbd5e1);
    border-radius: .65rem;
    background: var(--tw-color-surface, #fff);
    color: inherit;
    font: inherit;
}

.tehranweb-service-form__field:has(textarea),
.tehranweb-service-form__field:has(.tehranweb-service-form__choices) {
    grid-column: 1 / -1;
}

.tehranweb-service-form__choices {
    display: grid;
    gap: .55rem;
}

.tehranweb-service-form__choices label {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
}

.tehranweb-service-form__submit {
    margin-block-start: 1.25rem;
    padding: .8rem 1.2rem;
    border: 0;
    border-radius: .7rem;
    background: var(--tw-color-primary, #111827);
    color: var(--tw-color-on-primary, #fff);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.tehranweb-service-form__notice {
    margin-block: 1rem;
    padding: .8rem 1rem;
    border-inline-start: 4px solid #16803a;
    background: #f0fdf4;
}

.tehranweb-service-form__notice--error {
    border-inline-start-color: #b42318;
    background: #fef3f2;
}

.tehranweb-service-form__notice span {
    display: block;
    margin-block-start: .25rem;
}

.tehranweb-service-form__honeypot {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.tehranweb-service-form :focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}

@media (max-width: 720px) {
    .tehranweb-service-form__grid {
        grid-template-columns: 1fr;
    }
}