/* BRAVO CONTACT FORM — shortcode [bravo_contact_form] */

/* ── Custom properties ─────────────────────────────────────────── */
.bravo-cf {
    --cf-radius:      8px;
    --cf-gap:         16px;
    --cf-border-width:1px;
    --cf-border:      #D1D5DB;       /* gray-300 */
    --cf-border-focus:#6D28D9;       /* violet-700 */
    --cf-error:       #DC2626;       /* red-600 */
    --cf-bg-input:    #FFFFFF;
    --cf-bg-selected: #F5F3FF;       /* violet-50 — selected state bg */
    --cf-bg-upload:   #F9FAFB;       /* gray-50 */
    --cf-bg-note:     #EEF2FF;       /* indigo-50 */
    --cf-time-active: #6D28D9;       /* violet-700 */
    --cf-btn-bg:          #43B9CD;   /* viking/400 — matches header CTA */
    --cf-btn-hover:       #2FA3BA;   /* viking/500 */
    --cf-btn-disabled-bg: #D7F4F6;   /* Viking-100 — button not ready */
    --cf-text:        #111827;       /* gray-900 */
    --cf-label:       #374151;       /* gray-700 */
    --cf-eyebrow:     #6D28D9;       /* violet */
    --cf-font-size:   1rem;
    --cf-font-weight: 400;
    --cf-line-height: 1.5;
    --cf-consent-size:   0.875rem;
    --cf-consent-weight: 400;
    --cf-consent-lh:     1.5;
    --cf-consent-color:  #374151;
    --cf-consent-link:   #6D28D9;
    --cf-map-dl-size:    0.875rem;
    --cf-map-dl-weight:  400;
    --cf-map-dl-lh:      1.5;
    --cf-map-dl-color:   #374151;
    --cf-map-dl-link:    #43B9CD;
    font-family: inherit;
    color: var(--cf-text);
}

/* ── Header ────────────────────────────────────────────────────── */
.bravo-cf__eyebrow {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cf-eyebrow);
    margin-bottom: 8px;
}

.bravo-cf__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    margin-bottom: 32px;
}

/* ── Layout ────────────────────────────────────────────────────── */
.bravo-cf__form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--cf-gap) * 1.5);
}

.bravo-cf__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cf-gap);
}

@media (max-width: 767px) {
    .bravo-cf__row { grid-template-columns: 1fr; }
}

.bravo-cf__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Labels ────────────────────────────────────────────────────── */
.bravo-cf__field label,
.bravo-cf__field legend {
    font-size: .875rem;
    font-weight: 500;
    color: var(--cf-label);
}

.bravo-cf__field label span[aria-hidden],
.bravo-cf__field legend span[aria-hidden] {
    color: var(--cf-error);
    margin-left: 2px;
}

/* ── Text / email / tel inputs ─────────────────────────────────── */
.bravo-cf input[type="text"],
.bravo-cf input[type="email"],
.bravo-cf input[type="tel"] {
    height: 44px;
    padding: 0 12px;
    border: var(--cf-border-width) solid var(--cf-border);
    border-radius: var(--cf-radius);
    background: var(--cf-bg-input);
    font-size: var(--cf-font-size);
    font-weight: var(--cf-font-weight);
    line-height: var(--cf-line-height);
    color: var(--cf-text);
    outline: none;
    transition: border-color .15s;
}

.bravo-cf input[type="text"]:focus,
.bravo-cf input[type="email"]:focus,
.bravo-cf input[type="tel"]:focus {
    border-color: var(--cf-border-focus);
    box-shadow: 0 0 0 3px rgba(109,40,217,.12);
}

.bravo-cf input[aria-invalid="true"] {
    border-color: #EF4444;
    background: rgba(239, 68, 68, 0.06);
}

/* Contact-time group invalid state */
.bravo-cf__field fieldset.is-invalid .bravo-cf__time-group {
    border: 1px solid #EF4444;
    border-radius: var(--cf-radius);
    background: rgba(239, 68, 68, 0.06);
    padding: 8px;
}

/* ── Email domain autocomplete ─────────────────────────────────── */
.bravo-cf__email-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 2px);
    z-index: 10;
    list-style: none;
    margin: 0;
    padding: 4px 0;
    background: #fff;
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.bravo-cf__email-suggestions li {
    padding: 8px 12px;
    font-size: .9rem;
    color: var(--cf-text);
    cursor: pointer;
}

.bravo-cf__email-suggestions li:hover {
    background: var(--cf-bg-selected);
    color: var(--cf-border-focus);
}

/* parent field needs position:relative for the dropdown to anchor */
.bravo-cf__field:has(#bcf-email) {
    position: relative;
}

/* ── Contact time radio group ──────────────────────────────────── */
.bravo-cf__field fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.bravo-cf__time-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.bravo-cf__time-btn {
    flex: 1;
    min-width: 100px;
    cursor: pointer;
}

.bravo-cf__time-btn input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.bravo-cf__time-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border: var(--cf-border-width) solid var(--cf-border);
    border-radius: var(--cf-radius);
    text-align: center;
    font-size: .875rem;
    transition: border-color .15s, background .15s, color .15s;
}

.bravo-cf__time-label strong { font-weight: 600; }
.bravo-cf__time-label small  { color: #6B7280; font-size: .75rem; }

.bravo-cf__time-btn input:checked + .bravo-cf__time-label {
    border-color: var(--cf-time-active);
    background:   var(--cf-bg-selected);
    color:        var(--cf-time-active);
}

.bravo-cf__time-btn:hover .bravo-cf__time-label,
.bravo-cf__time-btn input:focus-visible + .bravo-cf__time-label {
    border-color: var(--cf-border-focus);
}

.bravo-cf__time-btn input:checked + .bravo-cf__time-label small {
    color: var(--cf-time-active);
    opacity: .75;
}

/* ── File upload ───────────────────────────────────────────────── */
.bravo-cf__upload {
    position: relative;
    border: var(--cf-border-width) dashed var(--cf-border);
    border-radius: var(--cf-radius);
    background: var(--cf-bg-upload);
    padding: 32px 24px;
    text-align: center;
    transition: border-color .15s, background .15s;
    cursor: pointer;
}

.bravo-cf__upload:hover,
.bravo-cf__upload.is-drag-over {
    border-color: var(--cf-border-focus);
    background: #F5F3FF;
}

.bravo-cf__upload.is-invalid {
    border-color: #EF4444;
    background: rgba(239, 68, 68, 0.06);
}

.bravo-cf__upload.is-valid {
    border-color: #22C55E;
    background: rgba(34, 197, 94, 0.06);
}

.bravo-cf__file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.bravo-cf__upload-ui svg {
    color: #9CA3AF;                /* gray-400 */
    margin-bottom: 8px;
}

.bravo-cf__upload-ui p {
    margin: 0 0 4px;
    font-size: .9rem;
    color: var(--cf-label);
}

.bravo-cf__upload-link {
    color: var(--cf-border-focus);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.bravo-cf__upload-hint {
    font-size: .8rem;
    color: #9CA3AF;
}

.bravo-cf__upload-name {
    display: block;
    margin-top: 8px;
    font-size: .9rem;
    font-weight: 700;
    color: #374151;
}

.bravo-cf__upload-clear {
    display: block;
    position: relative;
    z-index: 2;
    margin-top: 4px;
    font-size: .8rem;
    color: #6B7280;
    text-decoration: underline;
    cursor: pointer;
}

.bravo-cf__upload-clear:hover {
    color: #EF4444;
}

/* ── Privacy note box ──────────────────────────────────────────── */
.bravo-cf__privacy-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--cf-bg-note);
    border-radius: var(--cf-radius);
    padding: 16px;
}

.bravo-cf__privacy-illo {
    flex-shrink: 0;
    width: 56px;
    height: auto;
    align-self: center;
}

.bravo-cf__privacy-note p {
    font-size: .875rem;
    color: #374151;
    margin: 0;
}

/* ── Checkboxes ────────────────────────────────────────────────── */
.bravo-cf__field--check { gap: 4px; }

/* Pull consecutive consent rows together — form flex gap is calc(gap*1.5)=24px
   but in design they sit ~8px apart; negative margin compensates the difference. */
.bravo-cf__field--check + .bravo-cf__field--check {
    margin-top: calc(-1 * var(--cf-gap) * 1.5 + 8px);
}

.bravo-cf__check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: var(--cf-consent-size);
    font-weight: var(--cf-consent-weight);
    line-height: var(--cf-consent-lh);
    color: var(--cf-consent-color);
}

.bravo-cf__check input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--cf-border-focus);
    cursor: pointer;
}

.bravo-cf__check a {
    color: var(--cf-consent-link);
    font-weight: 500;
}

/* ── Map DL typography ─────────────────────────────────────────── */
.bravo-cf__map-dl {
    font-size: var(--cf-map-dl-size);
    font-weight: var(--cf-map-dl-weight);
    line-height: var(--cf-map-dl-lh);
    color: var(--cf-map-dl-color);
    margin: 0;
}
.bravo-cf__map-dl a {
    color: var(--cf-map-dl-link);
    font-weight: 600;
    text-decoration: underline;
}

/* ── Submit button ─────────────────────────────────────────────── */
.bravo-cf__actions {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.bravo-cf__draft-clear {
    font-size: .75rem;
    color: #9CA3AF;
    text-decoration: none;
}

.bravo-cf__draft-clear:hover {
    color: #6B7280;
    text-decoration: underline;
}

.bravo-cf__submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 32px;
    background: var(--cf-btn-bg);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--cf-radius);
    cursor: pointer;
    transition: background .15s, opacity .15s;
    min-width: 120px;
}

.bravo-cf__submit:hover:not(:disabled) {
    background: var(--cf-btn-hover);
}

.bravo-cf__submit:disabled,
.bravo-cf__submit:disabled:hover {
    background: var(--cf-btn-disabled-bg);
    cursor: not-allowed;
    opacity: 1;
    color: #fff;
}

/* ── Loading spinner ───────────────────────────────────────────── */
.bravo-cf__spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bcf-spin .7s linear infinite;
}

.bravo-cf[data-state="loading"] .bravo-cf__spinner { display: block; }
.bravo-cf[data-state="loading"] .bravo-cf__submit-label { opacity: .7; }

@keyframes bcf-spin {
    to { transform: rotate(360deg); }
}

/* ── Errors ────────────────────────────────────────────────────── */
.bravo-cf__error {
    font-size: .8rem;
    color: var(--cf-error);
    min-height: 1em;
}

/* ── Feedback ──────────────────────────────────────────────────── */
.bravo-cf__success {
    text-align: center;
    padding: 40px 20px;
}

.bravo-cf__success svg {
    color: #16A34A;               /* green-600 */
    margin-bottom: 16px;
}

.bravo-cf__success h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.bravo-cf__success p {
    color: var(--cf-label);
}

.bravo-cf__error-state {
    padding: 16px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--cf-radius);
    color: var(--cf-error);
    font-size: .9rem;
}

/* ── Honeypot ──────────────────────────────────────────────────── */
.bravo-cf__hp {
    position: absolute;
    left: -9999px;
    visibility: hidden;
    pointer-events: none;
}