/**
 * Reusable Toggle Switch Styling
 * Uses Automatic.CSS variables for consistency
 * Compatible with JetFormBuilder, Bricks Forms, and standard HTML
 * 
 * Usage: Add class "switch-field" to the field wrapper or "switch-input" to the input
 */

/* ==============================================
   HIDE THE ACTUAL RADIO/CHECKBOX INPUT
   ============================================== */

.switch-field input[type="radio"],
.switch-field input[type="checkbox"],
input[type="radio"].switch-input,
input[type="checkbox"].switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ==============================================
   SWITCH LABEL STYLING
   ============================================== */

.switch-field input[type="radio"] + label,
.switch-field input[type="checkbox"] + label,
input[type="radio"].switch-input + label,
input[type="checkbox"].switch-input + label {
    position: relative;
    display: inline-block;
    padding-left: 3.5em;
    cursor: pointer;
    user-select: none;
    font-size: var(--f-option-label-size, var(--text-m, 16px));
    font-weight: var(--f-option-label-font-weight, 400);
    line-height: var(--f-option-label-line-height, 1.4);
    color: var(--f-light-label-text-color, var(--neutral-dark, #2d3748));
    margin-bottom: 0;
    transition: color 0.3s ease;
}

/* Dark mode label */
.form--dark .switch-field input[type="radio"] + label,
.form--dark .switch-field input[type="checkbox"] + label,
.form--dark input[type="radio"].switch-input + label,
.form--dark input[type="checkbox"].switch-input + label {
    color: var(--f-dark-label-text-color, var(--neutral-ultra-light, #f7fafc));
}

/* ==============================================
   SWITCH TRACK (Background)
   ============================================== */

.switch-field input[type="radio"] + label::before,
.switch-field input[type="checkbox"] + label::before,
input[type="radio"].switch-input + label::before,
input[type="checkbox"].switch-input + label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3em;
    height: 1.6em;
    background-color: var(--neutral-light, #cbd5e0);
    border-radius: 1.6em;
    transition: all 0.3s ease;
    border: 2px solid var(--f-light-option-border-color, var(--neutral, #a0aec0));
}

/* Dark mode track */
.form--dark .switch-field input[type="radio"] + label::before,
.form--dark .switch-field input[type="checkbox"] + label::before,
.form--dark input[type="radio"].switch-input + label::before,
.form--dark input[type="checkbox"].switch-input + label::before {
    background-color: var(--neutral-semi-dark, #4a5568);
    border-color: var(--f-dark-option-border-color, var(--neutral-light, #cbd5e0));
}

/* ==============================================
   SWITCH KNOB (Circle)
   ============================================== */

.switch-field input[type="radio"] + label::after,
.switch-field input[type="checkbox"] + label::after,
input[type="radio"].switch-input + label::after,
input[type="checkbox"].switch-input + label::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: calc(1.6em - 6px);
    height: calc(1.6em - 6px);
    background-color: var(--white, #ffffff);
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ==============================================
   CHECKED STATE - Green/Success
   ============================================== */

.switch-field input[type="radio"]:checked + label::before,
.switch-field input[type="checkbox"]:checked + label::before,
input[type="radio"].switch-input:checked + label::before,
input[type="checkbox"].switch-input:checked + label::before {
    background-color: var(--f-light-option-action-color, var(--success, #48bb78));
    border-color: var(--success-dark, #38a169);
}

/* Dark mode checked */
.form--dark .switch-field input[type="radio"]:checked + label::before,
.form--dark .switch-field input[type="checkbox"]:checked + label::before,
.form--dark input[type="radio"].switch-input:checked + label::before,
.form--dark input[type="checkbox"].switch-input:checked + label::before {
    background-color: var(--f-dark-option-action-color, var(--success, #48bb78));
    border-color: var(--success, #48bb78);
}

/* Move knob to the right when checked */
.switch-field input[type="radio"]:checked + label::after,
.switch-field input[type="checkbox"]:checked + label::after,
input[type="radio"].switch-input:checked + label::after,
input[type="checkbox"].switch-input:checked + label::after {
    left: calc(3em - calc(1.6em - 6px) - 3px);
}

/* ==============================================
   HOVER STATE
   ============================================== */

.switch-field input[type="radio"]:not(:disabled) + label:hover::before,
.switch-field input[type="checkbox"]:not(:disabled) + label:hover::before,
input[type="radio"].switch-input:not(:disabled) + label:hover::before,
input[type="checkbox"].switch-input:not(:disabled) + label:hover::before {
    border-color: var(--neutral-dark, #4a5568);
}

.switch-field input[type="radio"]:checked:not(:disabled) + label:hover::before,
.switch-field input[type="checkbox"]:checked:not(:disabled) + label:hover::before,
input[type="radio"].switch-input:checked:not(:disabled) + label:hover::before,
input[type="checkbox"].switch-input:checked:not(:disabled) + label:hover::before {
    background-color: var(--success-dark, #38a169);
}

/* ==============================================
   FOCUS STATE (Accessibility)
   ============================================== */

.switch-field input[type="radio"]:focus + label::before,
.switch-field input[type="checkbox"]:focus + label::before,
input[type="radio"].switch-input:focus + label::before,
input[type="checkbox"].switch-input:focus + label::before {
    outline: 2px solid var(--f-light-focus-color, var(--primary, #4299e1));
    outline-offset: 2px;
}

.form--dark .switch-field input[type="radio"]:focus + label::before,
.form--dark .switch-field input[type="checkbox"]:focus + label::before,
.form--dark input[type="radio"].switch-input:focus + label::before,
.form--dark input[type="checkbox"].switch-input:focus + label::before {
    outline-color: var(--f-dark-focus-color, var(--primary, #4299e1));
}

/* ==============================================
   DISABLED STATE
   ============================================== */

.switch-field input[type="radio"]:disabled + label,
.switch-field input[type="checkbox"]:disabled + label,
input[type="radio"].switch-input:disabled + label,
input[type="checkbox"].switch-input:disabled + label {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==============================================
   JETFORMBUILDER NATIVE SWITCHER - CONFLICT REMOVAL
   Remove conflicting styles and let JetFormBuilder's native switcher work
   ============================================== */

/* Remove any conflicting styles that might interfere with JetFormBuilder's switcher */
.field-type-switcher input.jet-form-builder__field[role="switch"] {
    /* Reset any form styling that might interfere */
    width: auto !important;
    height: auto !important;
    border: 2px solid #cbd5e0 !important;
    padding: var(--track-padding, 6px) !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: var(--track-size, 4.2rem) !important;
    
    /* Ensure proper display */
    display: grid !important;
    align-items: center !important;
    grid: [track] 1fr / [track] 1fr !important;
    
    /* Remove any custom positioning */
    position: relative !important;
    overflow: visible !important;
    
    /* Let JetFormBuilder handle sizing */
    inline-size: var(--track-size, 4.2rem) !important;
    block-size: var(--thumb-size, 1.5rem) !important;
}

/* Remove any custom ::before styles that might conflict */
.field-type-switcher input.jet-form-builder__field[role="switch"]::before {
    /* Reset to let JetFormBuilder handle it */
    content: "" !important;
    position: absolute !important;
    grid-area: track !important;
    
    /* Let JetFormBuilder handle sizing and positioning */
    inline-size: var(--thumb-size, 1rem) !important;
    block-size: var(--thumb-size, 1rem) !important;
    border-radius: 50% !important;
    background: var(--thumb-bg-color, #fff) !important;
    
    /* Let JetFormBuilder handle transitions */
    transition: transform var(--thumb-transition-duration, 0.4s) ease, box-shadow 0.25s ease !important;
    
    /* Let JetFormBuilder handle positioning */
    transform: translateX(var(--thumb-position, 0%)) !important;
}

/* Ensure JetFormBuilder's checked state works */
.field-type-switcher input.jet-form-builder__field[role="switch"]:checked {
    background: var(--checked-track-bg-color, #48bb78) !important;
    border-color: var(--checked-track-bg-color, #48bb78) !important;
    --thumb-position: calc((var(--track-size, 4.2rem) - 100%) * var(--isLTR, 1)) !important;
    --thumb-bg-color: #f3f4f6 !important;
}

/* Remove any custom hover effects that might interfere */
.field-type-switcher input.jet-form-builder__field[role="switch"]:not(:disabled):hover::before {
    --highlight-size: 0.5rem !important;
}

/* Ensure JetFormBuilder's CSS variables are properly set */
.field-type-switcher {
    --thumb-size: 1.5rem;
    --track-size: calc(var(--thumb-size) * 2.8);
    --track-padding: 6px;
    --thumb-color-highlight: hsla(0, 0%, 0%, 0.25);
    --highlight-size: 0;
    --thumb-transition-duration: 0.4s;
    --thumb-position: 0%;
    --isLTR: 1;
    --track-bg-color: #e2e8f0;
    --checked-track-bg-color: #48bb78;
    --thumb-bg-color: #9ca3af;
}

/* RTL support */
.field-type-switcher:dir(rtl) {
    --isLTR: -1;
}

/* ==============================================
   JETFORMBUILDER RADIO FIELD SWITCHES
   For converting radio fields to switches
   ============================================== */

/* Hide JetFormBuilder radio inputs */
.switch-field .jet-form-builder__field-label input[type="radio"],
.switch-field .jet-form-builder__field-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* JetFormBuilder label styling */
.switch-field .jet-form-builder__field-label.for-radio,
.switch-field .jet-form-builder__field-label.for-checkbox {
    position: relative;
    display: inline-block;
    padding-left: 3.5em;
    cursor: pointer;
    user-select: none;
    font-size: var(--f-option-label-size, var(--text-m, 16px));
    font-weight: var(--f-option-label-font-weight, 400);
    line-height: var(--f-option-label-line-height, 1.4);
    color: var(--f-light-label-text-color, var(--neutral-dark, #2d3748));
    margin-bottom: 0;
    transition: color 0.3s ease;
}

/* Dark mode for JetFormBuilder labels */
.form--dark .switch-field .jet-form-builder__field-label.for-radio,
.form--dark .switch-field .jet-form-builder__field-label.for-checkbox {
    color: var(--f-dark-label-text-color, var(--neutral-ultra-light, #f7fafc));
}

/* JetFormBuilder switch track */
.switch-field .jet-form-builder__field-label.for-radio::before,
.switch-field .jet-form-builder__field-label.for-checkbox::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3em;
    height: 1.6em;
    background-color: var(--neutral-light, #cbd5e0);
    border-radius: 1.6em;
    transition: all 0.3s ease;
    border: 2px solid var(--f-light-option-border-color, var(--neutral, #a0aec0));
}

/* Dark mode track for JetFormBuilder */
.form--dark .switch-field .jet-form-builder__field-label.for-radio::before,
.form--dark .switch-field .jet-form-builder__field-label.for-checkbox::before {
    background-color: var(--neutral-semi-dark, #4a5568);
    border-color: var(--f-dark-option-border-color, var(--neutral-light, #cbd5e0));
}

/* JetFormBuilder switch knob */
.switch-field .jet-form-builder__field-label.for-radio::after,
.switch-field .jet-form-builder__field-label.for-checkbox::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: calc(1.6em - 6px);
    height: calc(1.6em - 6px);
    background-color: var(--white, #ffffff);
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* JetFormBuilder checked state - green */
.switch-field .jet-form-builder__field-label.for-radio:has(input:checked)::before,
.switch-field .jet-form-builder__field-label.for-checkbox:has(input:checked)::before {
    background-color: var(--f-light-option-action-color, var(--success, #48bb78));
    border-color: var(--success-dark, #38a169);
}

/* Dark mode checked for JetFormBuilder */
.form--dark .switch-field .jet-form-builder__field-label.for-radio:has(input:checked)::before,
.form--dark .switch-field .jet-form-builder__field-label.for-checkbox:has(input:checked)::before {
    background-color: var(--f-dark-option-action-color, var(--success, #48bb78));
    border-color: var(--success, #48bb78);
}

/* JetFormBuilder checked - move knob right */
.switch-field .jet-form-builder__field-label.for-radio:has(input:checked)::after,
.switch-field .jet-form-builder__field-label.for-checkbox:has(input:checked)::after {
    left: calc(3em - calc(1.6em - 6px) - 3px);
}

/* JetFormBuilder hover */
.switch-field .jet-form-builder__field-label.for-radio:hover::before,
.switch-field .jet-form-builder__field-label.for-checkbox:hover::before {
    border-color: var(--neutral-dark, #4a5568);
}

.switch-field .jet-form-builder__field-label.for-radio:has(input:checked):hover::before,
.switch-field .jet-form-builder__field-label.for-checkbox:has(input:checked):hover::before {
    background-color: var(--success-dark, #38a169);
}

/* JetFormBuilder focus */
.switch-field .jet-form-builder__field-label.for-radio:has(input:focus)::before,
.switch-field .jet-form-builder__field-label.for-checkbox:has(input:focus)::before {
    outline: 2px solid var(--f-light-focus-color, var(--primary, #4299e1));
    outline-offset: 2px;
}

.form--dark .switch-field .jet-form-builder__field-label.for-radio:has(input:focus)::before,
.form--dark .switch-field .jet-form-builder__field-label.for-checkbox:has(input:focus)::before {
    outline-color: var(--f-dark-focus-color, var(--primary, #4299e1));
}

/* JetFormBuilder field wrapper spacing */
.switch-field .jet-form-builder__field-wrap,
.switch-field .jet-form-builder__fields-group {
    display: flex;
    flex-direction: column;
    gap: var(--f-option-label-spacing, 0.5em);
}

/* JetFormBuilder disabled */
.switch-field .jet-form-builder__field-label:has(input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==============================================
   BRICKS FORM SPECIFIC
   ============================================== */

.brxe-form .switch-field {
    margin-bottom: var(--f-field-margin-bottom, 1.5em);
}

/* ==============================================
   SPACING ADJUSTMENTS
   ============================================== */

/* Add spacing between multiple switches */
.switch-field input[type="radio"] + label,
.switch-field input[type="checkbox"] + label {
    margin-bottom: var(--f-option-label-spacing, 0.5em);
}

.switch-field input[type="radio"]:last-of-type + label,
.switch-field input[type="checkbox"]:last-of-type + label {
    margin-bottom: 0;
}