/**
 * Barao Contact Form – Standalone CSS
 * Completely independent from barao-popup.css
 */

/* ── Variables (mirrors popup palette) ──────────────── */
:root {
    --bcf-blue: #3a82f7;
    --bcf-blue-hover: #2563d8;
    --bcf-text: #1a1a1a;
    --bcf-label: #1a1a1a;
    --bcf-placeholder: #aaa;
    --bcf-input-bg: #f5f5f5;
    --bcf-input-border: #e0e0e0;
    --bcf-focus-ring: rgba(212, 118, 184, 0.22);
    --bcf-focus-border: #d476b8;
    --bcf-radius: 8px;
    --bcf-gap: 18px;
    --bcf-transition: 0.22s ease;
}

/* ── Honeypot (anti-spam) ────────────────────────────── */
/*
 * This wrapper hides the honeypot input from human users.
 * Real users never see or fill it; bots that auto-fill all
 * inputs will populate it, triggering a silent 400 rejection.
 */
.barao-hp-field {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── Wrapper ────────────────────────────────────────── */
.barao-cf-wrap {
    width: 100%;
    max-width: 520px;
}

/* ── Optional title ─────────────────────────────────── */
.barao-cf-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--bcf-text);
    margin-bottom: 20px;
}

/* ── Form layout ────────────────────────────────────── */
.barao-cf-form {
    display: flex;
    flex-direction: column;
    gap: var(--bcf-gap);
}

/* ── Field group ────────────────────────────────────── */
.barao-cf-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Label ──────────────────────────────────────────── */
.barao-cf-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bcf-label);
}

/* ── Inputs & select ────────────────────────────────── */
.barao-cf-input,
.barao-cf-select {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid var(--bcf-input-border);
    border-radius: var(--bcf-radius);
    background: var(--bcf-input-bg);
    font-size: 0.95rem;
    color: var(--bcf-text);
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color var(--bcf-transition), box-shadow var(--bcf-transition);
}

.barao-cf-input::placeholder {
    color: var(--bcf-placeholder);
}

.barao-cf-input:focus,
.barao-cf-select:focus {
    outline: none;
    border-color: var(--bcf-focus-border);
    box-shadow: 0 0 0 3px var(--bcf-focus-ring);
}

/* Custom dropdown arrow */
.barao-cf-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}

/* ── Submit button ──────────────────────────────────── */
.barao-cf-submit {
    display: block;
    width: 100%;
    padding: 15px;
    background: var(--bcf-blue);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: var(--bcf-radius);
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: background var(--bcf-transition), transform var(--bcf-transition),
        box-shadow var(--bcf-transition);
    box-shadow: 0 4px 14px rgba(58, 130, 247, 0.28);
}

.barao-cf-submit:hover:not(:disabled),
.barao-cf-submit:focus-visible:not(:disabled) {
    background: var(--bcf-blue-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(58, 130, 247, 0.38);
    outline: none;
}

.barao-cf-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

/* ── Feedback message ───────────────────────────────── */
.barao-contact-message {
    font-size: 0.9rem;
    border-radius: var(--bcf-radius);
    min-height: 1em;
    transition: all var(--bcf-transition);
}

.barao-contact-message.bc-success {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #86efac;
    padding: 10px 14px;
}

.barao-contact-message.bc-error {
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    padding: 10px 14px;
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 480px) {
    .barao-cf-wrap {
        max-width: 100%;
    }
}