/* ==========================================================================
   Salesforce Web-to-Lead Form Styles
   All selectors prefixed with sbi-sf- to avoid Divi conflicts
   ========================================================================== */

/* Custom Properties */
.sbi-sf-form-wrap {
    --sbi-sf-primary: var(--sp-color-action-primary-bg);
    --sbi-sf-primary-hover: var(--sp-color-action-primary-hover-bg);
    --sbi-sf-primary-text: var(--sp-color-action-primary-text);
    --sbi-sf-error-color: var(--sp-color-text-danger);
    --sbi-sf-error-ring: var(--sp-color-status-danger-soft);
    --sbi-sf-border: var(--sp-color-border-subtle);
    --sbi-sf-border-strong: var(--sp-color-border-strong);
    --sbi-sf-border-focus: var(--sp-color-border-selected);
    --sbi-sf-focus-ring: var(--sp-state-focus-ring-color);
    --sbi-sf-bg: var(--sp-color-layer-input);
    --sbi-sf-bg-section: var(--sp-color-layer-1);
    --sbi-sf-bg-muted: var(--sp-color-layer-3);
    --sbi-sf-bg-hover: var(--sp-color-layer-hover);
    --sbi-sf-text: var(--sp-color-text-primary);
    --sbi-sf-text-strong: var(--sp-color-text-strong);
    --sbi-sf-text-muted: var(--sp-color-text-muted);
    --sbi-sf-select-arrow: var(--sp-color-text-muted);
    --sbi-sf-debug-accent: var(--sp-ref-color-utility-yellow-500, var(--sp-color-action-primary-bg));
    --sbi-sf-debug-border: color-mix(in srgb, var(--sbi-sf-debug-accent) 52%, var(--sbi-sf-border));
    --sbi-sf-debug-bg: color-mix(in srgb, var(--sbi-sf-debug-accent) 12%, var(--sbi-sf-bg-section));
    --sbi-sf-debug-field-bg: var(--sp-color-layer-canvas);
    --sbi-sf-code-bg: var(--sp-color-layer-3);
    --sbi-sf-code-text: var(--sp-color-text-strong);
    --sbi-sf-radius: var(--sp-layout-radius-sm, 6px);
    --sbi-sf-spacing: var(--sp-space-3, 20px);
    --sbi-sf-font: var(--sp-type-family-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    --sbi-sf-motion-duration: var(--sp-motion-duration-standard, 180ms);
    --sbi-sf-motion-ease: var(--sp-motion-ease-standard, ease);
}

/* Divi CSS Resets */
.sbi-sf-form-wrap,
.sbi-sf-form-wrap *,
.sbi-sf-form-wrap *::before,
.sbi-sf-form-wrap *::after {
    box-sizing: border-box;
}

.sbi-sf-form-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--sbi-sf-spacing);
    font-family: var(--sbi-sf-font);
    color: var(--sbi-sf-text);
    line-height: 1.5;
}

/* Reset Divi's aggressive input styles */
.sbi-sf-form .sbi-sf-input,
.sbi-sf-form .sbi-sf-select,
.sbi-sf-form .sbi-sf-textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none !important;
    border: 1px solid var(--sbi-sf-border) !important;
    border-radius: var(--sbi-sf-radius) !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
    font-family: var(--sbi-sf-font) !important;
    color: var(--sbi-sf-text) !important;
    background-color: var(--sbi-sf-bg) !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color var(--sbi-sf-motion-duration) var(--sbi-sf-motion-ease), box-shadow var(--sbi-sf-motion-duration) var(--sbi-sf-motion-ease);
    line-height: 1.5 !important;
}

.sbi-sf-form .sbi-sf-input::placeholder,
.sbi-sf-form .sbi-sf-textarea::placeholder {
    color: var(--sbi-sf-text-muted) !important;
    opacity: 1;
}

/* Focus states */
.sbi-sf-form .sbi-sf-input:focus,
.sbi-sf-form .sbi-sf-select:focus,
.sbi-sf-form .sbi-sf-textarea:focus {
    border-color: var(--sbi-sf-border-focus) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sbi-sf-focus-ring) 24%, transparent) !important;
}

/* Select arrow */
.sbi-sf-form .sbi-sf-select {
    padding-right: 40px !important;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--sbi-sf-select-arrow) 50%),
        linear-gradient(135deg, var(--sbi-sf-select-arrow) 50%, transparent 50%) !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 18px) center, calc(100% - 12px) center !important;
    background-size: 6px 6px, 6px 6px !important;
    cursor: pointer;
}

/* Textarea */
.sbi-sf-form .sbi-sf-textarea {
    resize: vertical;
    min-height: 80px;
}

/* Fieldset / Section Cards */
.sbi-sf-form .sbi-sf-fieldset {
    border: 1px solid var(--sbi-sf-border);
    border-radius: var(--sp-layout-radius-md, 8px);
    background: var(--sbi-sf-bg-section);
    padding: 24px var(--sbi-sf-spacing) var(--sbi-sf-spacing);
    margin: 0 0 var(--sbi-sf-spacing) 0;
}

.sbi-sf-form .sbi-sf-legend {
    font-size: 18px;
    font-weight: 600;
    color: var(--sbi-sf-primary);
    padding: 0 8px;
    margin-left: -8px;
}

/* Grid Layout */
.sbi-sf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

.sbi-sf-field--full {
    grid-column: 1 / -1;
}

/* Field wrapper */
.sbi-sf-field {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 14px;
}

/* Labels */
.sbi-sf-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--sbi-sf-text);
    margin-bottom: 6px;
}

.sbi-sf-required {
    color: var(--sbi-sf-error-color);
}

/* Amount field with dollar sign */
.sbi-sf-amount-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.sbi-sf-dollar-sign {
    position: absolute;
    left: 14px;
    font-size: 15px;
    font-weight: 500;
    color: var(--sbi-sf-text-muted);
    pointer-events: none;
    z-index: 1;
}

.sbi-sf-form .sbi-sf-input--amount {
    padding-left: 28px !important;
}

/* Error States */
.sbi-sf-error {
    display: block;
    min-height: 0;
    margin-top: 4px;
    font-size: 13px;
    color: var(--sbi-sf-error-color);
    line-height: 1.3;
}

.sbi-sf-form .sbi-sf-input.sbi-sf-has-error,
.sbi-sf-form .sbi-sf-select.sbi-sf-has-error,
.sbi-sf-form .sbi-sf-textarea.sbi-sf-has-error {
    border-color: var(--sbi-sf-error-color) !important;
}

.sbi-sf-form .sbi-sf-input.sbi-sf-has-error:focus,
.sbi-sf-form .sbi-sf-select.sbi-sf-has-error:focus,
.sbi-sf-form .sbi-sf-textarea.sbi-sf-has-error:focus {
    box-shadow: 0 0 0 3px var(--sbi-sf-error-ring) !important;
}

/* Submit Button */
.sbi-sf-submit-wrap {
    text-align: center;
    margin-top: 8px;
}

.sbi-sf-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 48px;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--sbi-sf-font);
    color: var(--sbi-sf-primary-text);
    background: var(--sbi-sf-primary);
    border: none;
    border-radius: var(--sbi-sf-radius);
    cursor: pointer;
    transition: background-color var(--sbi-sf-motion-duration) var(--sbi-sf-motion-ease), opacity var(--sbi-sf-motion-duration) var(--sbi-sf-motion-ease);
    min-width: 220px;
}

.sbi-sf-submit:hover {
    background: var(--sbi-sf-primary-hover);
}

.sbi-sf-submit:focus-visible {
    outline: var(--sp-state-focus-ring-width, 2px) solid var(--sbi-sf-focus-ring);
    outline-offset: var(--sp-state-focus-ring-offset, 2px);
}

.sbi-sf-submit-loading {
    display: none;
    align-items: center;
    gap: 8px;
}

.sbi-sf-submit.sbi-sf-is-loading .sbi-sf-submit-text {
    display: none;
}

.sbi-sf-submit.sbi-sf-is-loading .sbi-sf-submit-loading {
    display: inline-flex;
}

.sbi-sf-submit.sbi-sf-is-loading {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

.sbi-sf-submit-debug {
    max-width: 100%;
    margin-top: var(--sp-space-2);
    border: 1px solid var(--sbi-sf-debug-border);
    border-radius: var(--sbi-sf-radius);
    background: var(--sbi-sf-debug-bg);
    color: var(--sbi-sf-text);
    font-size: var(--sp-type-size-meta);
    line-height: var(--sp-type-line-height-copy);
    overflow-wrap: anywhere;
    padding: var(--sp-space-1) var(--sp-space-2);
    text-align: left;
}

.sbi-sf-submit-debug strong {
    color: var(--sbi-sf-text-strong);
}

.sbi-sf-submit-debug code {
    display: inline;
    border-radius: 4px;
    background: var(--sbi-sf-code-bg);
    color: var(--sbi-sf-code-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.95em;
    padding: 2px 5px;
}

/* Spinner animation */
.sbi-sf-spinner {
    animation: sbi-sf-spin 0.8s linear infinite;
}

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

/* Readonly field */
.sbi-sf-form .sbi-sf-input[readonly] {
    background-color: var(--sbi-sf-bg-muted) !important;
    color: var(--sbi-sf-text-muted) !important;
    cursor: default;
}

/* Debug output */
.sbi-sf-debug-panel {
    border: 1px solid var(--sbi-sf-debug-border);
    border-left: 4px solid var(--sbi-sf-debug-accent);
    border-radius: var(--sbi-sf-radius);
    background: var(--sbi-sf-debug-bg);
    padding: 16px;
    margin: 0 0 var(--sbi-sf-spacing);
}

.sbi-sf-debug-title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--sbi-sf-text-strong);
}

.sbi-sf-debug-section {
    margin-top: 14px;
}

.sbi-sf-debug-section h4 {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--sbi-sf-text-strong);
    text-transform: uppercase;
}

.sbi-sf-debug-list {
    display: grid;
    gap: 6px;
    margin: 0;
}

.sbi-sf-debug-row,
.sbi-sf-debug-field {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.sbi-sf-debug-row {
    grid-template-columns: minmax(120px, 160px) minmax(0, 1fr);
    align-items: start;
}

.sbi-sf-debug-row dt {
    font-weight: 700;
    color: var(--sbi-sf-text-strong);
}

.sbi-sf-debug-row dd {
    min-width: 0;
    margin: 0;
}

.sbi-sf-debug-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.sbi-sf-debug-field {
    border: 1px solid var(--sbi-sf-debug-border);
    border-radius: var(--sbi-sf-radius);
    background: var(--sbi-sf-debug-field-bg);
    padding: 8px;
}

.sbi-sf-debug-field strong,
.sbi-sf-debug-field span {
    font-size: 12px;
    line-height: 1.3;
}

.sbi-sf-debug-field strong {
    color: var(--sbi-sf-text-strong);
}

.sbi-sf-debug-field span {
    color: var(--sbi-sf-text-muted);
}

.sbi-sf-debug-panel code,
.sbi-sf-debug-chip code {
    display: inline-block;
    max-width: 100%;
    border-radius: 4px;
    background: var(--sbi-sf-code-bg);
    color: var(--sbi-sf-code-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    padding: 2px 5px;
}

.sbi-sf-debug-chip {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.sbi-sf-form-debug {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--sbi-sf-spacing);
    padding: 8px 10px;
    border: 1px dashed var(--sbi-sf-debug-border);
    border-radius: var(--sbi-sf-radius);
    background: color-mix(in srgb, var(--sbi-sf-debug-bg) 52%, transparent);
    color: var(--sbi-sf-text-muted);
    font-size: 11px;
    line-height: 1.4;
}

.sbi-sf-form-debug strong {
    color: var(--sbi-sf-text);
    font-size: 12px;
}

.sbi-sf-form-debug code,
.sbi-sf-inline-debug code {
    border-radius: 999px;
    background: color-mix(in srgb, var(--sbi-sf-code-bg) 64%, transparent);
    color: var(--sbi-sf-code-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 10px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    padding: 2px 6px;
}

.sbi-sf-inline-debug {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin-top: 4px;
    opacity: 0.78;
}

.sbi-sf-inline-debug__prefix {
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--sbi-sf-debug-bg);
    color: var(--sbi-sf-text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.4;
    padding: 2px 5px;
}

.sbi-sf-submit-wrap .sbi-sf-inline-debug {
    justify-content: center;
    margin-top: 8px;
}

/* Google Places autocomplete dropdown */
.pac-container {
    z-index: 99999 !important;
    font-family: var(--sbi-sf-font);
    border-radius: var(--sbi-sf-radius);
    border: 1px solid var(--sbi-sf-border);
    background: var(--sbi-sf-bg);
    color: var(--sbi-sf-text);
    box-shadow: var(--sp-layout-shadow-dropdown, none);
    margin-top: 4px;
}

.pac-item {
    padding: 8px 14px;
    font-size: 14px;
    color: var(--sbi-sf-text-muted);
    border-top: 1px solid var(--sbi-sf-border);
    cursor: pointer;
}

.pac-item:hover {
    background-color: var(--sbi-sf-bg-hover);
}

.pac-item-query {
    color: var(--sbi-sf-text-strong);
}

.pac-matched {
    color: var(--sbi-sf-primary);
}

/* Responsive: collapse to 1 column on mobile */
@media (max-width: 768px) {
    .sbi-sf-grid {
        grid-template-columns: 1fr;
    }

    .sbi-sf-form-wrap {
        padding: 12px;
    }

    .sbi-sf-form .sbi-sf-fieldset {
        padding: 20px 16px 16px;
    }

    .sbi-sf-submit {
        width: 100%;
    }

    .sbi-sf-debug-row {
        grid-template-columns: 1fr;
    }
}