/**
 * Jeeves Contact Form — Theme-Proof Typeform-Quality Design
 *
 * Uses high-specificity selectors + !important to survive ANY WordPress theme.
 * Inline styles on HTML elements serve as the ultimate fallback.
 */

/* ============================================
   Reset & Wrapper
   ============================================ */
.jcf-wrapper {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: var(--jcf-text) !important;
    box-sizing: border-box !important;
    line-height: 1.6 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.jcf-wrapper *,
.jcf-wrapper *::before,
.jcf-wrapper *::after {
    box-sizing: border-box !important;
}

/* ============================================
   Layout — single centered panel
   ============================================ */
.jcf-wrapper .jcf-container {
    max-width: 680px !important;
    margin: 0 auto !important;
    padding: 48px 24px !important;
    display: block !important;
}
@media (max-width: 600px) {
    .jcf-wrapper .jcf-container { padding: 32px 16px !important; }
}

/* ============================================
   Form Panel
   ============================================ */
.jcf-wrapper .jcf-form-panel {
    background: var(--jcf-panel-bg) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--jcf-panel-border) !important;
    border-radius: 20px !important;
    padding: 48px 44px !important;
    box-shadow:
        0 0 var(--jcf-glow-spread, 0px) rgba(var(--jcf-glow-color-rgb, 0,0,0), var(--jcf-glow-bg, 0)),
        0 0 calc(var(--jcf-glow-spread, 0px) * 1.5) rgba(var(--jcf-glow-color-rgb, 0,0,0), calc(var(--jcf-glow-bg, 0) * 0.55)),
        0 25px 60px -12px rgba(0,0,0,0.18) !important;
}
@media (max-width: 600px) {
    .jcf-wrapper .jcf-form-panel {
        padding: 32px 24px !important;
        border-radius: 16px !important;
    }
}

/* ============================================
   Heading & Subheading (inside panel)
   ============================================ */
.jcf-wrapper .jcf-heading {
    font-size: clamp(1.5rem, 3.5vw, 2rem) !important;
    font-weight: 700 !important;
    color: var(--jcf-text-heading) !important;
    line-height: 1.25 !important;
    margin: 0 0 0.5rem 0 !important;
    padding: 0 !important;
    letter-spacing: -0.02em !important;
}
.jcf-wrapper .jcf-subheading {
    font-size: 0.9375rem !important;
    color: var(--jcf-text-muted) !important;
    line-height: 1.6 !important;
    margin: 0 0 2rem 0 !important;
    padding: 0 !important;
}

/* ============================================
   Form Layout
   ============================================ */
.jcf-wrapper .jcf-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
}
.jcf-wrapper .jcf-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
}
@media (max-width: 600px) {
    .jcf-wrapper .jcf-row { grid-template-columns: 1fr !important; }
}

/* ============================================
   Field Wrapper — label ABOVE input, always
   ============================================ */
.jcf-wrapper .jcf-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================
   Field Labels — always on top
   ============================================ */
.jcf-wrapper .jcf-form .jcf-field > label:first-child {
    display: block !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--jcf-text-label) !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    order: -10 !important;
    float: none !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
}
.jcf-wrapper .jcf-req {
    color: #f87171 !important;
    font-weight: 400 !important;
}

/* ============================================
   Inputs / Select / Textarea
   ============================================ */
.jcf-wrapper .jcf-form input[type="text"],
.jcf-wrapper .jcf-form input[type="email"],
.jcf-wrapper .jcf-form input[type="url"],
.jcf-wrapper .jcf-form input[type="tel"],
.jcf-wrapper .jcf-form input[type="number"],
.jcf-wrapper .jcf-form select,
.jcf-wrapper .jcf-form textarea {
    appearance: none !important;
    -webkit-appearance: none !important;
    font-family: inherit !important;
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
    background: var(--jcf-input-bg) !important;
    border: 1.5px solid var(--jcf-input-border) !important;
    border-radius: 10px !important;
    color: var(--jcf-input-color) !important;
    padding: 14px 16px !important;
    width: 100% !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
    outline: none !important;
    order: 0 !important;
    float: none !important;
    position: static !important;
    margin: 0 !important;
    max-width: none !important;
}
.jcf-wrapper .jcf-form input::placeholder,
.jcf-wrapper .jcf-form textarea::placeholder {
    color: var(--jcf-text-placeholder) !important;
    opacity: 0.8 !important;
}
.jcf-wrapper .jcf-form input:focus,
.jcf-wrapper .jcf-form select:focus,
.jcf-wrapper .jcf-form textarea:focus {
    border-color: var(--jcf-brand) !important;
    box-shadow: 0 0 0 3px rgba(var(--jcf-brand-rgb), 0.15) !important;
    background: var(--jcf-input-bg-focus) !important;
}
.jcf-wrapper .jcf-form input:hover:not(:focus),
.jcf-wrapper .jcf-form select:hover:not(:focus),
.jcf-wrapper .jcf-form textarea:hover:not(:focus) {
    border-color: var(--jcf-input-border-hover) !important;
}
.jcf-wrapper .jcf-form textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

/* Select dropdown chevron */
.jcf-wrapper .jcf-form select {
    cursor: pointer !important;
    background-image: var(--jcf-select-arrow) !important;
    background-position: right 14px center !important;
    background-repeat: no-repeat !important;
    background-size: 1.125em !important;
    padding-right: 44px !important;
}
.jcf-wrapper .jcf-form select option {
    background: var(--jcf-select-option-bg) !important;
    color: var(--jcf-input-color) !important;
}

/* Error state on inputs */
.jcf-wrapper .jcf-input-error {
    border-color: #f87171 !important;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15) !important;
}

/* ============================================
   Checkboxes — Typeform-style stacked cards
   ============================================ */
.jcf-wrapper .jcf-form .jcf-checkboxes {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 4px !important;
    padding: 0 !important;
    list-style: none !important;
}
.jcf-wrapper .jcf-form .jcf-checkboxes.jcf-cols-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
}
@media (max-width: 600px) {
    .jcf-wrapper .jcf-form .jcf-checkboxes.jcf-cols-2 {
        grid-template-columns: 1fr !important;
    }
}

.jcf-wrapper .jcf-form .jcf-checkboxes label.jcf-checkbox-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    border: 1.5px solid var(--jcf-input-border) !important;
    background: var(--jcf-input-bg) !important;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 0.9375rem !important;
    font-weight: 450 !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    position: static !important;
}
.jcf-wrapper .jcf-form .jcf-checkboxes label.jcf-checkbox-label:hover {
    border-color: var(--jcf-input-border-hover) !important;
    background: var(--jcf-input-bg-focus) !important;
}

.jcf-wrapper .jcf-form .jcf-checkbox-label input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    border: 2px solid var(--jcf-control-border) !important;
    border-radius: 6px !important;
    background: transparent !important;
    display: grid !important;
    place-content: center !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    order: -1 !important;
    position: static !important;
    float: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}
.jcf-wrapper .jcf-form .jcf-checkbox-label input[type="checkbox"]::before {
    content: "" !important;
    width: 0.65em !important;
    height: 0.65em !important;
    transform: scale(0) !important;
    transition: transform 0.12s ease !important;
    box-shadow: inset 1em 1em white !important;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%) !important;
}
.jcf-wrapper .jcf-form .jcf-checkbox-label input[type="checkbox"]:checked {
    background: var(--jcf-brand) !important;
    border-color: var(--jcf-brand) !important;
}
.jcf-wrapper .jcf-form .jcf-checkbox-label input[type="checkbox"]:checked::before {
    transform: scale(1) !important;
}
.jcf-wrapper .jcf-form .jcf-checkbox-label:has(input:checked) {
    border-color: var(--jcf-brand) !important;
    background: rgba(var(--jcf-brand-rgb), 0.08) !important;
    box-shadow: 0 0 0 1px rgba(var(--jcf-brand-rgb), 0.2) !important;
}
.jcf-wrapper .jcf-form .jcf-checkbox-label:hover input[type="checkbox"]:not(:checked) {
    border-color: rgba(var(--jcf-brand-rgb), 0.5) !important;
}
.jcf-wrapper .jcf-form .jcf-checkbox-label span {
    font-size: 0.9375rem !important;
    color: var(--jcf-text-label) !important;
    line-height: 1.4 !important;
    font-weight: 450 !important;
    order: 1 !important;
}

/* ============================================
   Radio Buttons — Typeform-style stacked cards
   ============================================ */
.jcf-wrapper .jcf-form .jcf-radios {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 4px !important;
    padding: 0 !important;
    list-style: none !important;
}
.jcf-wrapper .jcf-form .jcf-radios.jcf-cols-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
}
@media (max-width: 600px) {
    .jcf-wrapper .jcf-form .jcf-radios.jcf-cols-2 {
        grid-template-columns: 1fr !important;
    }
}

.jcf-wrapper .jcf-form .jcf-radios label.jcf-radio-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    border: 1.5px solid var(--jcf-input-border) !important;
    background: var(--jcf-input-bg) !important;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 0.9375rem !important;
    font-weight: 450 !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    position: static !important;
}
.jcf-wrapper .jcf-form .jcf-radios label.jcf-radio-label:hover {
    border-color: var(--jcf-input-border-hover) !important;
    background: var(--jcf-input-bg-focus) !important;
}

.jcf-wrapper .jcf-form .jcf-radio-label input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    border: 2px solid var(--jcf-control-border) !important;
    border-radius: 50% !important;
    background: transparent !important;
    display: grid !important;
    place-content: center !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    order: -1 !important;
    position: static !important;
    float: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}
.jcf-wrapper .jcf-form .jcf-radio-label input[type="radio"]::before {
    content: "" !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    transform: scale(0) !important;
    transition: transform 0.12s ease !important;
    background: #fff !important;
}
.jcf-wrapper .jcf-form .jcf-radio-label input[type="radio"]:checked {
    background: var(--jcf-brand) !important;
    border-color: var(--jcf-brand) !important;
}
.jcf-wrapper .jcf-form .jcf-radio-label input[type="radio"]:checked::before {
    transform: scale(1) !important;
}
.jcf-wrapper .jcf-form .jcf-radio-label:has(input:checked) {
    border-color: var(--jcf-brand) !important;
    background: rgba(var(--jcf-brand-rgb), 0.08) !important;
    box-shadow: 0 0 0 1px rgba(var(--jcf-brand-rgb), 0.2) !important;
}
.jcf-wrapper .jcf-form .jcf-radio-label:hover input[type="radio"]:not(:checked) {
    border-color: rgba(var(--jcf-brand-rgb), 0.5) !important;
}
.jcf-wrapper .jcf-form .jcf-radio-label span {
    font-size: 0.9375rem !important;
    color: var(--jcf-text-label) !important;
    line-height: 1.4 !important;
    font-weight: 450 !important;
    order: 1 !important;
}

/* ============================================
   Submit Button
   ============================================ */
.jcf-wrapper .jcf-form .jcf-submit {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 15px 28px !important;
    font-family: inherit !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    color: #fff !important;
    background: var(--jcf-brand) !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(var(--jcf-brand-rgb), 0.3) !important;
    margin-top: 8px !important;
    float: none !important;
}
.jcf-wrapper .jcf-form .jcf-submit:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(var(--jcf-brand-rgb), 0.4) !important;
    filter: brightness(1.08) !important;
}
.jcf-wrapper .jcf-form .jcf-submit:active {
    transform: translateY(0) !important;
}
.jcf-wrapper .jcf-form .jcf-submit:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    transform: none !important;
    filter: none !important;
}

.jcf-wrapper .jcf-btn-loader {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}
.jcf-wrapper .jcf-spinner { vertical-align: middle !important; }

/* ============================================
   Error Messages
   ============================================ */
.jcf-wrapper .jcf-error {
    display: none;
    font-size: 0.8125rem !important;
    color: #f87171 !important;
    margin-top: 6px !important;
    animation: jcf-slide-down 0.2s ease-out;
}
@keyframes jcf-slide-down {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   Character Count
   ============================================ */
.jcf-wrapper .jcf-field-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 6px !important;
}
.jcf-wrapper .jcf-char-count {
    font-size: 0.6875rem !important;
    color: var(--jcf-text-placeholder) !important;
    opacity: 0.7 !important;
    margin-left: auto !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
}
.jcf-wrapper .jcf-char-count.jcf-valid {
    color: #34d399 !important;
}

/* ============================================
   Response Messages
   ============================================ */
.jcf-wrapper .jcf-response {
    padding: 14px 18px !important;
    border-radius: 10px !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    animation: jcf-slide-down 0.3s ease-out;
}
.jcf-wrapper .jcf-response--success {
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1.5px solid rgba(16, 185, 129, 0.25) !important;
    color: #34d399 !important;
}
.jcf-wrapper .jcf-response--error {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1.5px solid rgba(239, 68, 68, 0.25) !important;
    color: #f87171 !important;
}

/* ============================================
   Honeypot (invisible — triple protection)
   ============================================ */
.jcf-wrapper .jcf-honeypot,
.jcf-form .jcf-honeypot,
input.jcf-honeypot {
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    visibility: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}