/**
 * Modern form style, shared by the contact form (expertise detail, Elementor Form
 * acfefbd) and the vacancy application form (vacancy detail, e0ea39f) — on top of
 * forms/form.css. Sharp, like the expertise pages (0.7.0): a white card with a gold
 * top rule, visible labels above square 48px fields, a gold focus ring and a dark
 * green submit that turns gold on hover. Groups with r4y-form__group--half sit side
 * by side from 640px. The cv drop zone (.r4y-upload) is used by the application form.
 * Submission and field names stay as the Elementor forms.
 */

.r4y-template .r4y-form-modern {
    padding: 36px 40px;
    border-top: 2px solid var(--r4y-kit-secondary);
    background-color: var(--r4y-kit-white);
    box-shadow: 0 30px 60px -40px rgba(0, 37, 25, 0.4);
}
.r4y-template .r4y-form-modern .r4y-form__fields {
    margin: 0 -8px -16px;
}
.r4y-template .r4y-form-modern .r4y-form__group {
    margin-bottom: 16px;
    padding: 0 8px;
}
@media (min-width: 640px) {
    .r4y-template .r4y-form-modern .r4y-form__group--half { width: 50%; }
}

/* Labels */
.r4y-template .r4y-form-modern .r4y-form__label {
    padding-bottom: 6px;
    font-family: var(--r4y-font-body);
    font-size: var(--r4y-fs-sm);
    font-weight: var(--r4y-fw-medium);
    line-height: 1.3;
    color: var(--r4y-kit-primary);
}
.r4y-template .r4y-form-modern .r4y-form__group--required .r4y-form__label::after {
    color: var(--r4y-kit-secondary);
}

/* Fields */
.r4y-template .r4y-form-modern .r4y-form__field {
    height: 48px;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid var(--r4y-color-field-border);
    border-radius: var(--r4y-radius-none);
    background-color: var(--r4y-kit-white);
    font-size: var(--r4y-fs-base); /* 16px: no zoom on iOS */
    font-weight: var(--r4y-fw-regular);
    color: var(--r4y-color-text);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.r4y-template .r4y-form-modern .r4y-form__field:hover {
    border-color: var(--r4y-color-field-hover);
}
.r4y-template .r4y-form-modern .r4y-form__field:focus {
    border-color: var(--r4y-kit-secondary);
    box-shadow: 0 0 0 4px var(--r4y-color-focus-ring);
    outline: none;
}
.r4y-template .r4y-form-modern .r4y-form__field:user-invalid {
    border-color: var(--r4y-color-danger);
    box-shadow: 0 0 0 4px rgba(179, 38, 30, 0.1);
}
.r4y-template .r4y-form-modern .r4y-form__textarea {
    height: auto;
    min-height: 128px;
    padding-block: 12px;
    resize: vertical;
}

/* Submit */
.r4y-template .r4y-form-modern .r4y-form__buttons {
    margin-top: 4px;
}
.r4y-template .r4y-form-modern .r4y-form__submit {
    height: 52px;
    padding: 0 32px;
    border: 0;
    border-radius: var(--r4y-radius-none);
    font-family: var(--r4y-font-body);
    font-size: var(--r4y-fs-base);
    font-weight: var(--r4y-fw-medium);
    letter-spacing: 0.01em;
    transition: background-color 0.25s, transform 0.15s, opacity 0.2s;
}
.r4y-template .r4y-form-modern .r4y-form__submit:active {
    transform: scale(0.99);
}
.r4y-template .r4y-form-modern .r4y-form__submit:focus-visible {
    box-shadow: 0 0 0 4px var(--r4y-color-focus-ring);
    outline: none;
}

/* Messages */
.r4y-template .r4y-form-modern .r4y-form__message {
    margin-top: 16px;
    padding: 12px 16px;
    border-left: 2px solid currentColor;
    font-size: var(--r4y-fs-sm);
    line-height: 1.4;
}
.r4y-template .r4y-form-modern .r4y-form__message--success {
    background-color: var(--r4y-kit-accent);
    color: var(--r4y-kit-primary);
}
.r4y-template .r4y-form-modern .r4y-form__message--error {
    background-color: rgba(179, 38, 30, 0.08);
    color: var(--r4y-color-danger);
}

/* ── Cv drop zone ──────────────────────────────────────────────────────
   The real <input type="file"> lies over the zone (opacity 0): clicking and dropping
   a file are native, the form submits it as before. Script: application-form.js. */
.r4y-template .r4y-form-modern .r4y-upload {
    position: relative;
    width: 100%;
}
.r4y-template .r4y-form-modern .r4y-upload .r4y-form__file {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.r4y-template .r4y-form-modern .r4y-upload__zone {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 88px;
    padding: 16px 18px;
    border: 1.5px dashed var(--r4y-color-field-hover);
    background-color: var(--r4y-kit-accent);
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.r4y-template .r4y-form-modern .r4y-upload__icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: var(--r4y-kit-white);
    color: var(--r4y-kit-secondary);
    box-shadow: 0 1px 2px rgba(0, 37, 25, 0.08);
}
.r4y-template .r4y-form-modern .r4y-upload__icon svg {
    width: 20px;
    height: 20px;
}
.r4y-template .r4y-form-modern .r4y-upload__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
    font-family: var(--r4y-font-body);
    line-height: 1.35;
}
.r4y-template .r4y-form-modern .r4y-upload__title {
    font-size: var(--r4y-fs-base);
    font-weight: var(--r4y-fw-medium);
    color: var(--r4y-kit-primary);
    /* One line: a long file name ends in an ellipsis. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.r4y-template .r4y-form-modern .r4y-upload__hint {
    font-size: 13px;
    color: var(--r4y-color-muted);
}
.r4y-template .r4y-form-modern .r4y-upload:hover .r4y-upload__zone,
.r4y-template .r4y-form-modern .r4y-upload.is-dragover .r4y-upload__zone {
    border-color: var(--r4y-kit-secondary);
    background-color: var(--r4y-kit-white);
}
.r4y-template .r4y-form-modern .r4y-upload:focus-within .r4y-upload__zone {
    border-color: var(--r4y-kit-secondary);
    box-shadow: 0 0 0 4px var(--r4y-color-focus-ring);
}
.r4y-template .r4y-form-modern .r4y-upload.has-file .r4y-upload__zone {
    border-style: solid;
    border-color: var(--r4y-kit-secondary);
    background-color: var(--r4y-kit-white);
}
.r4y-template .r4y-form-modern .r4y-upload.has-file .r4y-upload__icon {
    background-color: var(--r4y-kit-primary);
    color: var(--r4y-kit-white);
}
.r4y-template .r4y-form-modern .r4y-upload.is-invalid .r4y-upload__zone {
    border-color: var(--r4y-color-danger);
}
/* Remove sits above the input, so it gets the click. */
.r4y-template .r4y-form-modern .r4y-upload__remove {
    position: relative;
    z-index: 3;
    margin-left: auto;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    font-family: var(--r4y-font-body);
    font-size: 13px;
    font-weight: var(--r4y-fw-medium);
    color: var(--r4y-kit-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.r4y-template .r4y-form-modern .r4y-upload__remove[hidden] {
    display: none;
}
.r4y-template .r4y-form-modern .r4y-upload__remove:hover,
.r4y-template .r4y-form-modern .r4y-upload__remove:focus-visible {
    background-color: var(--r4y-kit-accent);
    color: var(--r4y-kit-secondary);
}
.r4y-template .r4y-form-modern .r4y-upload__remove:focus-visible {
    outline: 2px solid var(--r4y-kit-secondary);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .r4y-template .r4y-form-modern { padding: 24px 20px; }
    .r4y-template .r4y-form-modern .r4y-form__submit { width: 100%; }
    .r4y-template .r4y-form-modern .r4y-upload__zone { gap: 12px; padding: 14px; }
    .r4y-template .r4y-form-modern .r4y-upload__icon { width: 36px; height: 36px; }
    .r4y-template .r4y-form-modern .r4y-upload__remove { padding: 8px 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .r4y-template .r4y-form-modern .r4y-form__field,
    .r4y-template .r4y-form-modern .r4y-form__submit,
    .r4y-template .r4y-form-modern .r4y-upload__zone { transition: none; }
}