/* ── GWM Water — Custom Umbraco Forms Theme ──────────────────────────────
   Scope: .umbraco-forms-form  (the outer div Umbraco Forms 17 renders)
   Newsletter theme uses inline styles in its own Form.cshtml.
─────────────────────────────────────────────────────────────────────────── */


/* ── Reset fieldset/legend browser defaults ── */
.umbraco-forms-form .umbraco-forms-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

/* ── Column grid (Bootstrap-like) ── */
.umbraco-forms-form .row-fluid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.umbraco-forms-form .col-md-12 { flex: 0 0 100%; max-width: 100%; }
.umbraco-forms-form .col-md-6  { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); }
.umbraco-forms-form .col-md-4  { flex: 0 0 calc(33.333% - 11px); max-width: calc(33.333% - 11px); }
.umbraco-forms-form .col-md-3  { flex: 0 0 calc(25% - 12px); max-width: calc(25% - 12px); }

@media (max-width: 640px) {
    .umbraco-forms-form .col-md-12,
    .umbraco-forms-form .col-md-6,
    .umbraco-forms-form .col-md-4,
    .umbraco-forms-form .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.umbraco-forms-form .umbraco-forms-field {
    margin-bottom: 20px;
}

.umbraco-forms-form .umbraco-forms-field:has(.gwm-form-separator) {
    margin-bottom: 0;
}

.umbraco-forms-form .umbraco-forms-field-wrapper {
    position: relative;
}

/* ── Section legend (fieldset heading — "Main Section", "Agent Contact Details", …) ── */
.gwm-form-legend {
    display: block;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 600;
    color: #013364;
    font-family: 'Inter', sans-serif;
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e5e7eb;
    width: 100%;
}

/* Space between consecutive fieldset sections */
.umbraco-forms-fieldset + .umbraco-forms-fieldset {
    margin-top: 40px;
}

/* ── Labels ── */
.gwm-form-label {
    display: block;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
    color: #013364;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
}

/* ── Text / Email / Tel / URL inputs ──
   Aligned with @gwmwater/ui TextField/Textarea/Select:
   12px all-round padding, 4px sandstone-500 focus ring, semi-opaque placeholder. */
.umbraco-forms-form input[type="text"],
.umbraco-forms-form input[type="email"],
.umbraco-forms-form input[type="tel"],
.umbraco-forms-form input[type="number"],
.umbraco-forms-form input[type="url"],
.umbraco-forms-form input[type="password"],
.umbraco-forms-form select,
.umbraco-forms-form textarea {
    width: 100%;
    background: #fff;
    border: 1px solid #ddd9c7;
    border-radius: 4px;
    padding: 12px;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    color: #374151;
    line-height: 1.5;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.umbraco-forms-form input::placeholder,
.umbraco-forms-form textarea::placeholder {
    color: #374151;
    opacity: 0.5;
}

.umbraco-forms-form input[type="text"]:focus,
.umbraco-forms-form input[type="email"]:focus,
.umbraco-forms-form input[type="tel"]:focus,
.umbraco-forms-form input[type="number"]:focus,
.umbraco-forms-form input[type="url"]:focus,
.umbraco-forms-form input[type="password"]:focus,
.umbraco-forms-form select:focus,
.umbraco-forms-form textarea:focus {
    border-color: #013364;
    outline: none;
    box-shadow: 0 0 0 4px #ddd9c7;
}

/* ── Select: custom chevron, larger to match library ChevronDown 24px ── */
.umbraco-forms-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 24px;
    padding-right: 40px;
    cursor: pointer;
}

/* ── Textarea ── */
.umbraco-forms-form textarea {
    min-height: 200px;
    resize: vertical;
}

/* ── Checkboxes / radio — 2-column grid by default ── */
.umbraco-forms-form .checkboxlist,
.umbraco-forms-form .radiobuttonlist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 12px;
}

.umbraco-forms-form .checkboxlist > div,
.umbraco-forms-form .radiobuttonlist > div {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

@media (max-width: 640px) {
    .umbraco-forms-form .checkboxlist,
    .umbraco-forms-form .radiobuttonlist {
        grid-template-columns: 1fr;
    }
}

/* Custom checkbox / radio — 24×24, sandstone border, deep-water-blue fill on
   check. Mirrors @gwmwater/ui Checkbox + Radio. Native input is sized but
   visually hidden via appearance:none; the box itself is the visible control. */
.umbraco-forms-form .checkboxlist input[type="checkbox"],
.umbraco-forms-form .radiobuttonlist input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin: 0;
    background: #fff;
    border: 1px solid #ddd9c7;
    cursor: pointer;
    position: relative;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.umbraco-forms-form .checkboxlist input[type="checkbox"] {
    border-radius: 0;
}

.umbraco-forms-form .radiobuttonlist input[type="radio"] {
    border-radius: 9999px;
}

.umbraco-forms-form .checkboxlist input[type="checkbox"]:checked,
.umbraco-forms-form .radiobuttonlist input[type="radio"]:checked {
    background: #013364;
    border-color: #013364;
}

/* Tick — only shown when checked */
.umbraco-forms-form .checkboxlist input[type="checkbox"]:checked::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10 16.4L6 12.4L7.4 11L10 13.6L16.6 7L18 8.4L10 16.4Z' fill='white'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Inner white dot — only shown when radio is checked */
.umbraco-forms-form .radiobuttonlist input[type="radio"]:checked::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 9999px;
    transform: translate(-50%, -50%);
}

.umbraco-forms-form .radiobuttonlist input[type="radio"]:focus-visible {
    outline: 2px solid #013364;
    outline-offset: 2px;
}

.umbraco-forms-form .checkboxlist input[type="checkbox"]:focus-visible {
    outline: none;
}

.umbraco-forms-form .checkboxlist label,
.umbraco-forms-form .radiobuttonlist label {
    font-weight: 400;
    margin-bottom: 0;
    cursor: pointer;
    font-size: 16px;
    line-height: 1.5;
    color: #374151;
}

/* ── Required indicator ── */
.gwm-form-indicator {
    color: #013364;
}

/* ── Tooltip ── */
.gwm-form-tooltip {
    display: block;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 6px;
}

.separator .gwm-form-tooltip {
    margin-top: var(--spacing-10);
    margin-bottom: var(--spacing-2);
    font-size: 20px;
    line-height: 1.5;
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-header);
    color: #013364;
    width: 100%;
}

.separator .gwm-form-tooltip + .umbraco-forms-field-wrapper { display: none; }

/* ── Validation errors ──
   Aligned with @gwmwater/ui error helper text: 16px / red-500 / line-height 1.75. */
.gwm-form-error {
    display: block;
    color: #ef4444;
    font-size: 16px;
    line-height: 1.75;
    margin-top: 8px;
    font-family: 'Inter', sans-serif;
}

.gwm-form-validation-summary {
    margin-bottom: 16px;
}

.gwm-form-alert-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 4px;
    padding: 12px 16px;
    color: #b91c1c;
    font-size: 14px;
    list-style: none;
}

/* ── Navigation / submit buttons ── */
.umbraco-forms-navigation {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid #ddd9c7;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* When Save-and-Continue is enabled, the secondary button is far-left and
   Submit is far-right. The spacer pushes them apart. */
.umbraco-forms-navigation.gwm-form-nav-with-save {
    justify-content: flex-start;
}

.gwm-form-nav-spacer {
    flex: 1 1 auto;
    min-width: 16px;
}

@media (max-width: 640px) {
    .gwm-form-nav-spacer { display: none; }
    .umbraco-forms-navigation.gwm-form-nav-with-save { justify-content: stretch; }
    .umbraco-forms-navigation.gwm-form-nav-with-save .gwm-form-btn { width: 100%; }
}

.gwm-form-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    border-radius: 9999px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 2px solid transparent;
    font-family: 'FinalSix', sans-serif;
    letter-spacing: 0.25px;
    line-height: 1;
    white-space: nowrap;
}

/* Submit: larger per Figma (button-lg = 18px, min-h 48px) */
.gwm-form-btn-submit, .gwm-save-continue-btn {
    font-size: 18px;
    min-height: 48px;
    padding: 12px 32px;
}

/* Orange CTA — default submit */
.gwm-form-btn-submit,
.gwm-form-btn-primary {
    background: #f99b1c;
    color: #013364;
    border-color: #f99b1c;
}

.gwm-form-btn-submit:hover,
.gwm-form-btn-primary:hover {
    background: #e68a0f;
    border-color: #e68a0f;
}

/* Outlined — secondary / prev */
.gwm-form-btn-secondary {
    background: transparent;
    color: #013364;
    border-color: #013364;
}

.gwm-form-btn-secondary:hover {
    background: #013364;
    color: #fff;
}

/* ── File upload — styled button (custom FieldType.FileUpload.cshtml) ── */
.gwm-file-upload-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.gwm-file-input-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.gwm-file-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 24px;
    min-height: 40px;
    border-radius: 9999px;
    font-size: 16px;
    font-weight: 600;
    font-family: 'FinalSix', sans-serif;
    letter-spacing: 0.25px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    border: 2px solid #3264ad;
    color: #3264ad;
    background: transparent;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.gwm-file-btn:hover {
    background: #3264ad;
    color: #fff;
}

.gwm-file-text {
    font-size: 14px;
    color: #374151;
    font-family: 'Inter', sans-serif;
    line-height: 1.75;
}

/* Fallback style for raw native file inputs (non-themed) */
.umbraco-forms-form input[type="file"]:not(.gwm-file-input-hidden) {
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: #374151;
}

/* ── Data-consent / single checkbox ──────────────────────────────────────────
   Umbraco renders: label.gwm-form-label (text) + .field-wrapper (checkbox).
   We flip to an inline row: [checkbox] [text] matching the Figma FormCheckBox. */
.umbraco-forms-form .umbraco-forms-field:is(.dataconsent, .checkbox) {
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
}

.umbraco-forms-form .umbraco-forms-field:is(.dataconsent, .checkbox) > .gwm-form-label {
    order: 2;
    flex: 1;
    margin-bottom: 0;
    font-weight: 400;
    color: #374151;
    cursor: pointer;
}

.umbraco-forms-form .umbraco-forms-field:is(.dataconsent, .checkbox) > .gwm-form-label .gwm-form-indicator {
    color: #374151;
}

.umbraco-forms-form .umbraco-forms-field:is(.dataconsent, .checkbox) > .umbraco-forms-field-wrapper {
    order: 1;
    flex-shrink: 0;
    width: 24px;
}

.umbraco-forms-form .umbraco-forms-field:is(.dataconsent, .checkbox) input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 24px;
    height: 24px;
    margin: 0;
    background: #fff;
    border: 1px solid #ddd9c7;
    border-radius: 0;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.umbraco-forms-form .umbraco-forms-field:is(.dataconsent, .checkbox) input[type="checkbox"]:checked {
    background: #013364;
    border-color: #013364;
}

.umbraco-forms-form .umbraco-forms-field:is(.dataconsent, .checkbox) input[type="checkbox"]:checked::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10 16.4L6 12.4L7.4 11L10 13.6L16.6 7L18 8.4L10 16.4Z' fill='white'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.umbraco-forms-form .umbraco-forms-field:is(.dataconsent, .checkbox) input[type="checkbox"]:focus-visible {
    outline: none;
}

/* ── checkbox field type: label lives inside .umbraco-forms-field-wrapper ──
   Unlike dataconsent (label is a sibling of the wrapper), the checkbox type
   renders its visible <label> inside the wrapper alongside the <input>.
   Override the outer flex and make the wrapper itself the row container. */
.umbraco-forms-form .umbraco-forms-field.checkbox {
    display: block;
}
.umbraco-forms-form .umbraco-forms-field.checkbox > .umbraco-forms-field-wrapper {
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
}
.umbraco-forms-form .umbraco-forms-field.checkbox > .umbraco-forms-field-wrapper > label {
    flex: 1;
    font-weight: 400;
    color: #374151;
    line-height: 1.5;
    cursor: pointer;
}

/* ── Hidden spam field ── */
.umbraco-forms-hidden {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Save-and-continue modal is rendered by the SaveModalIsland React component
   (see src/FE_DEV/src/islands/SaveModal.tsx) using the @gwmwater/ui Modal +
   TextField + Button. No theme CSS needed here. */

/* Multistep indicator (Steps island) — sits at the top of multi-page forms */
.gwm-form-steps {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}