.grafikly-gform-wrapper {
    --grafikly-gform-btn: #0B132B;
    --grafikly-gform-accent: #2F8F83;
    --grafikly-gform-radius: 8px;
}
.grafikly-gform {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
}
.grafikly-gform-hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    pointer-events: none;
}
.grafikly-gform-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 100%;
}
.grafikly-gform-field[hidden] {
    /* Without this, [hidden] loses to the "display: flex" above (same specificity,
       but this base rule wins by appearing later in the cascade), and the conditional
       field remains visible even though its input is already disabled by form.js. */
    display: none;
}
.grafikly-gform-field--width-half {
    flex: 1 1 calc(50% - 8px); /* 8px = half the 16px gap in .grafikly-gform */
}
@media (max-width: 480px) {
    .grafikly-gform-field--width-half {
        flex: 1 1 100%; /* always stacked on mobile, never cramped */
    }
}
.grafikly-gform-field label,
.grafikly-gform-group-label {
    font-size: 14px;
    font-weight: 600;
    color: inherit;
}
.grafikly-gform-field .req {
    color: #d63638;
}
.grafikly-gform-field input[type="text"],
.grafikly-gform-field input[type="email"],
.grafikly-gform-field input[type="tel"],
.grafikly-gform-field select,
.grafikly-gform-field textarea {
    font-size: 16px; /* Minimum 16px: prevents iOS auto-zoom on focus */
    height: auto; /* Cancels Blocksy's fixed height:40px so all fields have the same natural height */
    /* Blocksy sets a default line-height of ~1.65 on text inputs — without this
       line, that value leaks in here and adds ~8px to the actual height
       (measured live: 48.4px instead of 40px), even though the padding is the same
       on every field. "normal" makes the actual height 40px, matching the height
       already used by the submit button. */
    line-height: normal;
    padding: 10px 14px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--grafikly-gform-radius);
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}
.grafikly-gform-field input[type="file"] {
    font-size: 16px;
    height: auto;
    line-height: normal;
    padding: 10px 14px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--grafikly-gform-radius);
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}
.grafikly-gform-field select {
    /* height: auto cancels the fixed height:40px Blocksy applies to every select —
       without this, 16px text is clipped to ~14px of space and looks like dashes */
    height: auto;
    padding-right: 40px !important;
    /* appearance:none removes the native arrow (which is drawn over the text with the
       padding-right above) — it is replaced by a custom SVG arrow. Without this,
       the text collides with the browser's native arrow. */
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    /* Without this, the inherited line-height (higher than the select box once
       the native appearance is removed) makes the text render higher than the
       available space and clips off its upper half. Do NOT change the padding
       (it inherits the shared 10px above) so the uniform 40px height of all fields
       is preserved. */
    line-height: 1.2 !important;
}
.grafikly-gform-field textarea {
    min-height: 84px; /* ~2× the height of a normal field */
    resize: none;
    overflow: hidden;
}
.grafikly-gform-field input:focus,
.grafikly-gform-field select:focus,
.grafikly-gform-field textarea:focus {
    outline: none;
    border-color: var(--grafikly-gform-accent);
}
.grafikly-gform-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
}
/* --- Submit button position / size variants ---
   Default (below + full): flex:1 1 100% forces a new row that stretches end to end.
   beside: button shrinks to its text; the :has() rule below makes the preceding
           field expand to fill the remaining space on the same row.
   size-auto: button only as wide as its label, even when position=below.
*/
/* Sizing (padding/font-size/line-height/font-family/border) lives in this base rule
   and is NOT repeated in the position modifiers — so "below" and "beside" always
   measure the same (40px, like the inputs) without synchronizing two rules. */
.grafikly-gform-submit {
    flex: 1 1 100%;
    background: var(--grafikly-gform-btn);
    color: #fff;
    border: 1px solid transparent;
    border-radius: var(--grafikly-gform-radius);
    font-family: inherit;
    font-size: 16px;
    line-height: normal;
    font-weight: 600;
    padding: 10px 20px;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.grafikly-gform-submit:hover {
    opacity: 0.9;
}
.grafikly-gform-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/* Beside position: layout only (row/width/alignment) — sizing already comes from the
   base rule above, so "below" and "beside" remain identical in height. */
.grafikly-gform-submit--pos-beside {
    flex: 0 0 auto;
    width: auto;
    align-self: flex-end;
}
/* Make the last field grow to fill the space left by the beside button */
.grafikly-gform:has(.grafikly-gform-submit--pos-beside) .grafikly-gform-field:last-of-type {
    flex: 1 1 auto;
}

/* Fit content: button only as wide as its label (stays on its own row if all fields are full-width) */
.grafikly-gform-submit--size-auto {
    flex: 0 0 auto;
    width: auto;
}

@media (max-width: 480px) {
    /* On mobile, beside button always drops below (same as full-width) */
    .grafikly-gform-submit--pos-beside {
        flex: 1 1 100%;
        width: 100%;
    }
    .grafikly-gform:has(.grafikly-gform-submit--pos-beside) .grafikly-gform-field:last-of-type {
        flex: 1 1 100%;
    }
}

.grafikly-gform-error {
    flex: 1 1 100%; /* the parent is now flex-direction: row, so this prevents it from shrinking to its text width */
    background: #fde8e8;
    color: #9a1c1c;
    border: 1px solid #f5b5b5;
    border-radius: var(--grafikly-gform-radius);
    padding: 10px 14px;
    font-size: 14px;
}
.grafikly-gform-success {
    flex: 1 1 100%;
    font-size: 15px;
    line-height: 1.5;
}