/* ===========================================================================
   BR Contact CTA - two-column contact section (dark theme, gold accent).
   Styles the Contact Form 7 output into a compact 2-column form.
   =========================================================================== */
.pxl-cc {
    --pxl-cc-accent: #bd9a5f;
    --pxl-cc-focus: #bd9a5f;
    --pxl-cc-field-bg: rgba(255, 255, 255, .04);
    --pxl-cc-field-border: rgba(255, 255, 255, .12);
    --pxl-cc-field-text: #ffffff;
    --pxl-cc-muted: rgba(255, 255, 255, .55);
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.pxl-cc-wrap { position: relative; }
.pxl-cc--right .pxl-cc--text { order: 2; }
.pxl-cc--right .pxl-cc--form { order: 1; }

/* ---------- Text column ---------- */
.pxl-cc--eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    color: var(--pxl-cc-accent); font-size: 13px; font-weight: 600;
    letter-spacing: 2.4px; text-transform: uppercase; margin-bottom: 18px;
}
.pxl-cc--eyebrow-line { display: inline-block; width: 30px; height: 1px; background: var(--pxl-cc-accent); opacity: .8; }
.pxl-cc--title {
    font-size: clamp(28px, 3.3vw, 44px); line-height: 1.12; font-weight: 700;
    margin: 0 0 20px; letter-spacing: -.01em;
}
.pxl-cc--desc {
    margin: 0; font-size: 16px; line-height: 1.85;
    color: color-mix(in srgb, currentColor 62%, transparent);
    max-width: 520px;
}
.pxl-cc--info { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 16px; }
.pxl-cc--info-item { display: flex; align-items: center; gap: 14px; font-size: 15px; }
.pxl-cc--info-icon {
    flex: 0 0 44px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: color-mix(in srgb, var(--pxl-cc-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--pxl-cc-accent) 40%, transparent);
    color: var(--pxl-cc-accent); font-size: 16px;
}
.pxl-cc--info-icon svg { width: 18px; height: 18px; fill: currentColor; }
.pxl-cc--info-text a { color: inherit; text-decoration: none; transition: color .3s ease; }
.pxl-cc--info-text a:hover { color: var(--pxl-cc-accent); }

/* ---------- Form column ---------- */
.pxl-cc--form { position: relative; }
.pxl-cc--form .wpcf7 { margin: 0; }
.pxl-cc--form .wpcf7-form { position: relative; }
.pxl-cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pxl-cc-field { position: relative; margin: 0; min-width: 0; }
.pxl-cc-full { grid-column: 1 / -1; }

/* Inputs / textarea */
.pxl-cc--form .wpcf7-form-control:not(.wpcf7-submit) {
    width: 100%;
    background: var(--pxl-cc-field-bg);
    border: 1px solid var(--pxl-cc-field-border);
    border-radius: 10px;
    color: var(--pxl-cc-field-text);
    font-size: 15px;
    line-height: 1.5;
    padding: 15px 18px;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none; appearance: none;
    transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.pxl-cc--form textarea.wpcf7-form-control { min-height: 130px; resize: vertical; display: block; }
.pxl-cc--form .wpcf7-form-control:not(.wpcf7-submit):focus {
    border-color: var(--pxl-cc-focus);
    background: color-mix(in srgb, var(--pxl-cc-field-bg) 60%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pxl-cc-focus) 22%, transparent);
}
.pxl-cc--form ::placeholder { color: var(--pxl-cc-muted); opacity: 1; font-size: 14px; }
.pxl-cc--form ::-webkit-input-placeholder { color: var(--pxl-cc-muted); opacity: 1; }

/* File field */
.pxl-cc-file .pxl-cc-file-label {
    display: block; margin-bottom: 8px; font-size: 13px; letter-spacing: .3px;
    color: var(--pxl-cc-muted); text-transform: uppercase;
}
.pxl-cc-file .pxl-cc-file-label em { font-style: normal; opacity: .7; text-transform: none; }
.pxl-cc--form input.wpcf7-file {
    padding: 12px 14px; cursor: pointer; font-size: 14px; color: var(--pxl-cc-muted);
}
.pxl-cc--form input.wpcf7-file::file-selector-button {
    margin-right: 14px; padding: 9px 16px; border: 0; border-radius: 8px; cursor: pointer;
    background: color-mix(in srgb, var(--pxl-cc-accent) 22%, transparent);
    color: var(--pxl-cc-accent); font-weight: 600; font-size: 13px; letter-spacing: .3px;
    text-transform: uppercase; transition: background .3s ease, color .3s ease;
}
.pxl-cc--form input.wpcf7-file::file-selector-button:hover { background: var(--pxl-cc-accent); color: #fff; }
.pxl-cc--form input.wpcf7-file::-webkit-file-upload-button {
    margin-right: 14px; padding: 9px 16px; border: 0; border-radius: 8px; cursor: pointer;
    background: color-mix(in srgb, var(--pxl-cc-accent) 22%, transparent);
    color: var(--pxl-cc-accent); font-weight: 600; font-size: 13px; letter-spacing: .3px; text-transform: uppercase;
}

/* Submit button */
.pxl-cc-submit { margin-top: 4px; }
.pxl-cc--form input[type="submit"] {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pxl-cc-accent); color: #fff;
    border: 0; border-radius: 100px; cursor: pointer;
    font-size: 15px; font-weight: 600; letter-spacing: .4px; line-height: 1;
    padding: 17px 40px;
    -webkit-appearance: none; appearance: none;
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
    box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--pxl-cc-accent) 70%, transparent);
}
.pxl-cc--form input[type="submit"]:hover {
    transform: translateY(-3px);
    background: color-mix(in srgb, var(--pxl-cc-accent) 82%, #000);
    box-shadow: 0 22px 44px -16px color-mix(in srgb, var(--pxl-cc-accent) 80%, transparent);
}
.pxl-cc--form input[type="submit"]:active { transform: translateY(-1px); }

/* CF7 messages / validation / spinner */
.pxl-cc--form .wpcf7-not-valid-tip { color: #ff8f8f; font-size: 12.5px; margin-top: 6px; display: block; }
.pxl-cc--form .wpcf7-not-valid { border-color: rgba(255, 120, 120, .55) !important; }
.pxl-cc--form .wpcf7-response-output {
    margin: 20px 0 0; padding: 14px 18px; border-radius: 10px; font-size: 14px; line-height: 1.5;
    border: 1px solid rgba(255, 255, 255, .16); color: #fff;
}
.pxl-cc--form .wpcf7-mail-sent-ok { border-color: rgba(120, 205, 140, .6); background: rgba(120, 205, 140, .1); }
.pxl-cc--form .wpcf7-validation-errors,
.pxl-cc--form .wpcf7-mail-sent-ng { border-color: rgba(255, 120, 120, .5); background: rgba(255, 120, 120, .08); }
.pxl-cc--form .wpcf7-spinner { background-color: var(--pxl-cc-accent); }
.pxl-cc--form-missing { margin: 0; padding: 18px; border: 1px dashed rgba(255, 255, 255, .25); border-radius: 10px; color: var(--pxl-cc-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .pxl-cc { grid-template-columns: 1fr; gap: 44px; }
    .pxl-cc--right .pxl-cc--text,
    .pxl-cc--right .pxl-cc--form { order: 0; }
    .pxl-cc--desc { max-width: none; }
}
@media (max-width: 575px) {
    .pxl-cc-grid { grid-template-columns: 1fr; }
    .pxl-cc--form input[type="submit"] { width: 100%; }
}

/* ---------- color-mix fallbacks ---------- */
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .pxl-cc--desc { color: rgba(255, 255, 255, .62); }
    .pxl-cc--info-icon { background: rgba(189, 154, 95, .14); border-color: rgba(189, 154, 95, .4); }
    .pxl-cc--form .wpcf7-form-control:not(.wpcf7-submit):focus { box-shadow: 0 0 0 3px rgba(189, 154, 95, .22); }
    .pxl-cc--form input.wpcf7-file::file-selector-button,
    .pxl-cc--form input.wpcf7-file::-webkit-file-upload-button { background: rgba(189, 154, 95, .22); }
    .pxl-cc--form input[type="submit"] { box-shadow: 0 16px 34px -14px rgba(189, 154, 95, .7); }
    .pxl-cc--form input[type="submit"]:hover { background: #9c7b48; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .pxl-cc--form input[type="submit"] { transition: background .3s ease; }
    .pxl-cc--form input[type="submit"]:hover { transform: none; }
}