/* Forms: one look for every Elementor form on the site
   ====================================================
   The contact form and the become-a-reseller form were styled separately in
   Elementor, and neither matched the rest of the site: grey fields with no
   border, a 40px height that crowded 15px text, and on the reseller page a
   636px column of nine stacked fields inside a 969px grey box, so half the box
   was empty.

   Same approach as buttons.css: the look lives here, not in each widget's
   settings. Elementor writes per-widget rules at (0,3,1) with the element id in
   them, so the properties it also sets carry !important; the rest win on the
   body prefix alone. */

body .elementor-form .elementor-field-group {
    margin-bottom: 18px;
}

/* padding-bottom is Elementor's "label spacing" control, which put 20px
   between a label and its own field — more than between two fields, so each
   label read as belonging to the field above it. */
body .elementor-form .elementor-field-label {
    display: block;
    margin-bottom: 6px;
    padding-bottom: 0 !important;
    font-size: 14px;
    font-weight: 600;
    color: #1d212b;
}

/* The asterisk Elementor adds to required labels, in the action red. */
body .elementor-form .elementor-mark-required .elementor-field-label::after {
    color: #e52a1e;
}

body .elementor-form .elementor-field-group .elementor-field-textual {
    min-height: 48px !important;
    padding: 12px 16px !important;
    border: 1px solid #d5d8dc !important;
    border-radius: 10px !important;
    background-color: #fff !important;
    box-shadow: none !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: #1d212b !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

body .elementor-form .elementor-field-group textarea.elementor-field-textual {
    min-height: 150px !important;
    resize: vertical;
}

body .elementor-form .elementor-field-textual::placeholder {
    color: #8a8e96;
    opacity: 1;
}

body .elementor-form .elementor-field-textual:hover {
    border-color: #b9bdc3 !important;
}

/* A visible focus ring, not just a colour change: keyboard users need to see
   where they are, and the default outline was removed by the parent theme. */
body .elementor-form .elementor-field-textual:focus {
    outline: none;
    border-color: #1d212b !important;
    box-shadow: 0 0 0 3px rgba(29, 33, 43, .12) !important;
}

body .elementor-form .elementor-field-group.elementor-field-type-submit {
    margin-top: 6px;
    margin-bottom: 0;
}

/* Elementor's own validation message, closer to the field it belongs to. */
body .elementor-form .elementor-message {
    margin-top: 14px;
    font-size: 14px;
}

/* ── the card ──────────────────────────────────────────────────────────────
   Every form sits on a white card with a light frame, so it reads as one
   object rather than loose fields on the page. Capped at the same width as
   the contact dialog (560px), which is the version that looked right: at
   760px the fields were wider than anything anyone types into them, and the
   full-width Send button turned into a 700px red bar. !important because
   Elementor's `.e-con-inner > .elementor-widget { max-width: 100% }` is
   more specific — without it this cap never applied at all. */
body .elementor-widget-form {
    /* width: the reseller page's container is a row (flex) whose widgets
       take their content's width; Elementor's own form filled it, ours
       (inc/briod-forms.php) shrank to a 300px column (Fabian, 2026-10-20). */
    width: 100% !important;
    max-width: 560px !important;
}

body .elementor-widget-form > .elementor-widget-container {
    padding: 32px;
    border: 1px solid #e3e5e8;
    border-radius: 16px;
    background: #fff;
}

/* ── long forms: two columns ───────────────────────────────────────────────
   A form with seven or more fields (become-a-reseller has nine) pairs the
   short ones up, so it is four rows of two instead of a column to scroll
   through. :has() keys this on the form's shape, not on an Elementor element
   id that changes if someone rebuilds the widget. Textareas, the submit button
   and anything Elementor marks as a non-text field stay full width. */
body .elementor-widget-form:has(.elementor-field-group:nth-child(7)) {
    width: 100% !important;
    /* Wider than the 560px single-column cap, so each of the two columns
       still gets ~350px — but not the full 969px content width. */
    max-width: 760px !important;
}

/* In two columns a full-width Send button is a 700px bar. Give it its
   natural pill width instead, aligned with the fields' left edge.
   Elementor's "stretch" alignment sets width:100% on the group and the
   button, hence !important. */
body .elementor-form-fields-wrapper:has(> .elementor-field-group:nth-child(7)) > .elementor-field-type-submit {
    flex: 0 0 auto !important;
    width: auto !important;
}
body .elementor-form-fields-wrapper:has(> .elementor-field-group:nth-child(7)) > .elementor-field-type-submit .elementor-button {
    width: auto !important;
    min-width: 200px;
    padding-left: 40px !important;
    padding-right: 40px !important;
}

@media (min-width: 768px) {
    body .elementor-form-fields-wrapper:has(> .elementor-field-group:nth-child(7)) > .elementor-field-type-text,
    body .elementor-form-fields-wrapper:has(> .elementor-field-group:nth-child(7)) > .elementor-field-type-email,
    body .elementor-form-fields-wrapper:has(> .elementor-field-group:nth-child(7)) > .elementor-field-type-tel,
    body .elementor-form-fields-wrapper:has(> .elementor-field-group:nth-child(7)) > .elementor-field-type-url {
        flex: 0 0 50%;
        max-width: 50%;
        width: 50%;
    }
}

/* The grey box the reseller form was placed in. The card above replaces it;
   two frames around one form is one too many. Any container that directly
   holds a form — not keyed on the field count, which dropped from nine to
   four and brought the box back. */
body .e-con:has(> .elementor-widget-form) {
    background-color: transparent !important;
    padding: 0 !important;
}

@media (max-width: 767px) {
    body .elementor-widget-form > .elementor-widget-container {
        padding: 20px;
        border-radius: 12px;
    }
}

/* ── Briod forms (inc/briod-forms.php) ─────────────────────────────────────
   Contact and become-a-reseller, built without Elementor since 2026-10-19.
   The same look as the Elementor rules above, on the form's own classes: it
   must not carry .elementor-form, or Elementor Pro's form script would take
   over its submit on pages where that script is loaded. */
.briod-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.briod-form__field {
    display: flex;
    flex-direction: column;
}

.briod-form__label {
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #1d212b;
}

.briod-form__field.is-required .briod-form__label::after {
    content: "*";
    margin-left: .2em;
    color: #e52a1e;
}

body .briod-form__input {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid #d5d8dc;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: none;
    font: inherit;
    font-size: 15px;
    line-height: 1.4;
    color: #1d212b;
    transition: border-color .15s ease, box-shadow .15s ease;
}

body textarea.briod-form__input {
    min-height: 150px;
    resize: vertical;
}

.briod-form__input::placeholder {
    color: #8a8e96;
    opacity: 1;
}

body .briod-form__input:hover {
    border-color: #b9bdc3;
}

/* A visible focus ring, as above. */
body .briod-form__input:focus {
    outline: none;
    border-color: #1d212b;
    box-shadow: 0 0 0 3px rgba(29, 33, 43, .12);
}

/* What the server rejected (js/briod-forms.js marks it). */
body .briod-form__input[aria-invalid="true"] {
    border-color: #e52a1e;
}

.briod-form__actions {
    margin-top: 6px;
}

/* Full width, like the Elementor forms' stretched Send button. The shape and
   colour come from buttons.css (button.button). */
body .briod-form .briod-form__submit {
    width: 100%;
}

body .briod-form.is-sending .briod-form__submit {
    opacity: .6;
    cursor: progress;
}

.briod-form__message {
    margin: 0;
    font-size: 14px;
    color: #1d6b3a;
}

.briod-form__message.is-error {
    color: #e52a1e;
}

/* The honeypot: off-screen rather than display:none, which some bots skip. */
.briod-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── forms in a <dialog> ───────────────────────────────────────────────────
   inc/page-dialogs.php renders the contact and become-a-reseller forms in
   here; js/page-dialogs.js opens them. */
.briod-dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: #fff;
    color: #1d212b;
    box-shadow: 0 24px 60px rgba(20, 24, 34, .3);
}
/* The two-column reseller form: its 760px cap plus the dialog's padding. */
.briod-dialog--wide {
    width: min(824px, calc(100vw - 32px));
}
.briod-dialog::backdrop {
    background: rgba(20, 24, 34, .55);
}
/* No scrolling the page behind an open dialog. */
html:has(.briod-dialog[open]) {
    overflow: hidden;
}

.briod-dialog__inner {
    padding: 28px 32px 32px;
}
.briod-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.briod-dialog__head h2 {
    margin: 0;
    font-size: 24px;
}
.briod-dialog__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #e3e5e8;
    border-radius: 999px;
    background: #fff;
    color: #1d212b;
    cursor: pointer;
}
.briod-dialog__close:hover { border-color: #1d212b; }

/* What the reseller form is for, from its page. */
.briod-dialog__intro {
    margin: 0 0 16px;
    font-size: 15px;
    color: #4a4e57;
}

@media (max-width: 767px) {
    .briod-dialog__inner { padding: 20px; }
}