/*
 * Shamaa Ninja Forms presentation.
 *
 * Keep all rules scoped to Ninja Forms' public wrapper/field classes so
 * ordinary WordPress/theme inputs retain their own presentation.
 */

.nf-form-content {
    max-width: 100%;
    padding: 0;
    font-family: var(--font-body, sans-serif);
    color: var(--color-text, #090A09);
}

.nf-form-fields-required {
    margin-bottom: 16px;
    font-weight: 400;
}

.nf-form-content .nf-field-container {
    margin-block-end: var(--spacing-l, 24px);
}

/* Keep configured Ninja Forms label placement; Ninja Forms itself controls whether labels display. */
.nf-form-content .nf-field-label,
.nf-form-content .label-left .nf-field-label,
.nf-form-content .label-right .nf-field-label {
    text-align: start;
}

.nf-form-content .nf-field-label label,
.nf-form-content .label-left .nf-field-label label,
.nf-form-content .label-right .nf-field-label label {
    display: block;
    color: var(--color-text, #090A09);
    font-family: var(--font-body, sans-serif);
    font-size: var(--fs-body, 16px);
    font-weight: 400;
    line-height: var(--lh-body, 1.4);
    text-align: start;
}

.nf-form-content .label-above .nf-field-label,
.nf-form-content .label-below .nf-field-label {
    margin-block-end: var(--spacing-xs, 8px);
}

.nf-form-content input.ninja-forms-field:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]),
.nf-form-content select.ninja-forms-field,
.nf-form-content textarea.ninja-forms-field {
    width: 100%;
    margin: 0;
    padding-inline: 12px;
    border: 1px solid #D6D6D6;
    border-radius: 4px;
    background: #fff;
    box-shadow: none;
    color: var(--color-text, #090A09);
    font-family: var(--font-body, sans-serif);
    font-size: var(--fs-body, 16px);
    font-weight: var(--fw-body, 400);
    line-height: 1.4;
    text-align: start;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.nf-form-content input.ninja-forms-field:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]),
.nf-form-content select.ninja-forms-field {
    height: 36px;
    min-height: 36px;
    padding-block: 0;
}

.nf-form-content select.ninja-forms-field {
    cursor: pointer;
}

.nf-form-content textarea.ninja-forms-field {
    min-height: 144px;
    padding-block: 10px;
    resize: vertical;
}

.nf-form-content input.ninja-forms-field::placeholder,
.nf-form-content textarea.ninja-forms-field::placeholder {
    color: var(--wp--preset--color--night-8, #4E564E);
    opacity: .72;
}

.nf-form-content input.ninja-forms-field:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]):focus,
.nf-form-content select.ninja-forms-field:focus,
.nf-form-content textarea.ninja-forms-field:focus {
    border-color: var(--shamaa-secondary-2, #0075A3);
    outline: 2px solid rgba(0, 117, 163, .22);
    outline-offset: 1px;
    box-shadow: none;
}

/* Preserve Ninja Forms' error semantics while keeping the field geometry. */
.nf-form-content .nf-error input.ninja-forms-field:not([type="checkbox"]):not([type="radio"]),
.nf-form-content .nf-error select.ninja-forms-field,
.nf-form-content .nf-error textarea.ninja-forms-field {
    border-color: currentColor;
}

.nf-form-content .nf-field-description,
.nf-form-content .nf-help,
.nf-form-content .nf-error-msg,
.nf-form-content .nf-form-errors {
    font-family: var(--font-body, sans-serif);
    font-size: var(--fs-small, 14px);
    line-height: 1.4;
}

/*
 * Ninja Forms Submit = Shamaa Primary sizing/interaction.
 * Ninja Forms commonly renders Submit as <input>, which cannot own ::after;
 * for that markup the field-element wrapper supplies the decorative chevron.
 */
.nf-form-content .submit-container {
    border-top: 2px solid #D6D6D6;
    padding-top: 16px;
}

.nf-form-content .submit-wrap {
    display: inline-block;
    max-width: 100%;
}

.nf-form-content .submit-container .nf-field-element {
    position: relative;
    width: fit-content;
}

.nf-form-content input.ninja-forms-field[type="submit"],
.nf-form-content input.ninja-forms-field[type="button"].submit,
.nf-form-content button.ninja-forms-field[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    min-height: 40px;
    margin: 0;
    padding-block: 12px;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
    border: 0;
    border-radius: 4px;
    background-color: #00587A;
    background-image: linear-gradient(180deg, #0075A3 0%, #00587A 100%);
    box-shadow: 0 10px 30px -10px #090a09de;
    color: #fff;
    cursor: pointer;
    font-family: var(--font-body, sans-serif);
    font-size: var(--fs-body, 15px);
    font-weight: var(--fw-link, 500);
    letter-spacing: -.23px;
    line-height: 1.2;
    text-align: center;
    transition: box-shadow .15s ease;
}

/* Reserve room for the wrapper chevron only when Submit is an input. */
.nf-form-content .submit-container input.ninja-forms-field[type="submit"],
.nf-form-content .submit-container input.ninja-forms-field[type="button"].submit {
    padding-inline-end: 36px;
}

.nf-form-content .submit-container .nf-field-element:has(input.ninja-forms-field[type="submit"])::after,
.nf-form-content .submit-container .nf-field-element:has(input.ninja-forms-field[type="button"].submit)::after,
.nf-form-content button.ninja-forms-field[type="submit"]::after {
    content: "›";
    display: inline-block;
    color: #fff;
    font-size: 1.25em;
    font-weight: 700;
    line-height: .75;
    pointer-events: none;
    text-shadow: none;
    transition: text-shadow .2s ease;
}

.nf-form-content .submit-container .nf-field-element:has(input.ninja-forms-field[type="submit"])::after,
.nf-form-content .submit-container .nf-field-element:has(input.ninja-forms-field[type="button"].submit)::after {
    position: absolute;
    inset-inline-end: 14px;
    top: 50%;
    transform: translateY(-50%);
}

.nf-form-content button.ninja-forms-field[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.nf-form-content input.ninja-forms-field[type="submit"]:is(:hover, :focus-visible),
.nf-form-content input.ninja-forms-field[type="button"].submit:is(:hover, :focus-visible),
.nf-form-content button.ninja-forms-field[type="submit"]:is(:hover, :focus-visible) {
    background-color: #0075A3;
    background-image: linear-gradient(180deg, #0075A3 0%, #0075A3 100%);
    box-shadow: none;
}

.nf-form-content .submit-container .nf-field-element:has(input.ninja-forms-field[type="submit"]:is(:hover, :focus-visible))::after,
.nf-form-content .submit-container .nf-field-element:has(input.ninja-forms-field[type="button"].submit:is(:hover, :focus-visible))::after,
.nf-form-content button.ninja-forms-field[type="submit"]:is(:hover, :focus-visible)::after {
    text-shadow: 5px 0 currentColor;
}

.rtl .nf-form-content .submit-container .nf-field-element:has(input.ninja-forms-field[type="submit"]:is(:hover, :focus-visible))::after,
.rtl .nf-form-content .submit-container .nf-field-element:has(input.ninja-forms-field[type="button"].submit:is(:hover, :focus-visible))::after,
.rtl .nf-form-content button.ninja-forms-field[type="submit"]:is(:hover, :focus-visible)::after,
[dir="rtl"] .nf-form-content .submit-container .nf-field-element:has(input.ninja-forms-field[type="submit"]:is(:hover, :focus-visible))::after,
[dir="rtl"] .nf-form-content .submit-container .nf-field-element:has(input.ninja-forms-field[type="button"].submit:is(:hover, :focus-visible))::after,
[dir="rtl"] .nf-form-content button.ninja-forms-field[type="submit"]:is(:hover, :focus-visible)::after,
html:lang(ar) body .nf-form-content .submit-container .nf-field-element:has(input.ninja-forms-field[type="submit"]:is(:hover, :focus-visible))::after,
html:lang(ar) body .nf-form-content .submit-container .nf-field-element:has(input.ninja-forms-field[type="button"].submit:is(:hover, :focus-visible))::after,
html:lang(ar) body .nf-form-content button.ninja-forms-field[type="submit"]:is(:hover, :focus-visible)::after {
    text-shadow: -5px 0 currentColor;
}

.nf-form-content input.ninja-forms-field[type="submit"]:focus-visible,
.nf-form-content input.ninja-forms-field[type="button"].submit:focus-visible,
.nf-form-content button.ninja-forms-field[type="submit"]:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.rtl .nf-form-content input.ninja-forms-field[type="submit"],
.rtl .nf-form-content input.ninja-forms-field[type="button"].submit,
.rtl .nf-form-content button.ninja-forms-field[type="submit"],
[dir="rtl"] .nf-form-content input.ninja-forms-field[type="submit"],
[dir="rtl"] .nf-form-content input.ninja-forms-field[type="button"].submit,
[dir="rtl"] .nf-form-content button.ninja-forms-field[type="submit"] {
    letter-spacing: 0;
}

/*
 * Reusable form grid.
 * Add `shamaa-form-grid` to Ninja Forms' Wrapper class. Full width is the
 * default. Add `shamaa-field-half` to a field's container class only when two
 * fields should share a row. Captcha, Submit and HR remain full-width even if
 * a half-width class is accidentally assigned.
 */
.shamaa-form-grid .nf-form-content nf-fields-wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
    row-gap: 8px;
}

.shamaa-form-grid .nf-form-content nf-field {
    grid-column: 1 / -1;
    min-width: 0;
}

.shamaa-form-grid .nf-form-content nf-field:has(.shamaa-field-half),
.shamaa-form-grid .nf-form-content nf-field.shamaa-field-half {
    grid-column: auto;
}

.shamaa-form-grid .nf-form-content nf-field:has(.recaptcha-container),
.shamaa-form-grid .nf-form-content nf-field:has(.submit-container),
.shamaa-form-grid .nf-form-content nf-field:has(.hr-container) {
    grid-column: 1 / -1 !important;
}

.shamaa-form-grid .nf-form-content .nf-field-container {
    min-width: 0;
    margin-block-end: 0;
}

.shamaa-form-grid .nf-form-content .hr-container {
    margin-block: 14px 0;
}

.shamaa-form-grid .nf-form-content .hr-container hr {
    margin: 0;
    border: 0;
    border-block-start: 2px solid #D6D6D6;
}

@media (max-width: 700px) {
    /* Side-labelled normal forms become stacked only on narrow screens. */
    .nf-form-content .label-left .nf-field-label,
    .nf-form-content .label-left .nf-field-element,
    .nf-form-content .label-right .nf-field-label,
    .nf-form-content .label-right .nf-field-element {
        float: none !important;
        width: 100% !important;
        margin-inline: 0 !important;
    }

    .nf-form-content .label-left .nf-field-label,
    .nf-form-content .label-right .nf-field-label {
        margin-block-end: var(--spacing-xs, 8px);
    }

    .shamaa-form-grid .nf-form-content nf-fields-wrap {
        grid-template-columns: 1fr;
    }

    .shamaa-form-grid .nf-form-content nf-field,
    .shamaa-form-grid .nf-form-content nf-field:has(.shamaa-field-half),
    .shamaa-form-grid .nf-form-content nf-field.shamaa-field-half {
        grid-column: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nf-form-content input.ninja-forms-field,
    .nf-form-content select.ninja-forms-field,
    .nf-form-content textarea.ninja-forms-field,
    .nf-form-content button.ninja-forms-field,
    .nf-form-content .submit-container .nf-field-element::after {
        transition: none;
    }
}