/**
 * Minimal White Frontend Styles for Woo Form Builder
 * Modern, clean, and subtle with floating effects
 */

:root {
    --minimal-white: #ffffff;
    --minimal-bg: #f8f9fa;
    --minimal-border: #e1e4e8;
    --minimal-text: #24292e;
    --minimal-text-light: #586069;
    --minimal-accent: #0366d6;
    --minimal-accent-light: #0366d61a;
    --minimal-success: #28a745;
    --minimal-success-light: #28a7451a;
    --minimal-shadow: rgba(0, 0, 0, 0.05);
    --minimal-shadow-hover: rgba(0, 0, 0, 0.1);
}

/* Form Wrapper */
.wfb-form-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.wfb-form {
    background: var(--minimal-white);
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 2px 8px var(--minimal-shadow);
}

/* Step Progress Container - CRITICAL FOR VISIBILITY */
.wfb-steps-progress {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
    padding: 30px 40px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 16px;
    position: relative;
    box-shadow: 0 2px 12px var(--minimal-shadow);
    gap: 80px;
}

/* Step Navigation - Alias for compatibility */
.wfb-step-navigation {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
    padding: 30px 40px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 16px;
    position: relative;
    box-shadow: 0 2px 12px var(--minimal-shadow);
    gap: 80px;
}

/* Progress Bar Behind Steps */
.wfb-step-navigation::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 20%;
    right: 20%;
    height: 3px;
    background: var(--minimal-border);
    transform: translateY(-50%);
    z-index: 0;
}

.wfb-step-indicator {
    flex: 0 0 auto !important;
    text-align: center;
    position: relative;
    color: var(--minimal-text-light);
    font-weight: 600;
    font-size: 14px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

/* Step icon (emoji or custom icon) */
.wfb-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 12px;
    background: var(--minimal-white);
    border: 3px solid var(--minimal-border);
    border-radius: 50%;
    font-weight: 700;
    font-size: 24px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px var(--minimal-shadow);
}

.wfb-step-indicator::before {
    content: attr(data-step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 12px;
    background: var(--minimal-white);
    border: 3px solid var(--minimal-border);
    border-radius: 50%;
    font-weight: 700;
    font-size: 18px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px var(--minimal-shadow);
}

/* Hide ::before when wfb-step-icon exists */
.wfb-step-indicator:has(.wfb-step-icon)::before {
    display: none !important;
}

.wfb-step-indicator.active {
    color: var(--minimal-accent);
}

.wfb-step-indicator.active .wfb-step-icon,
.wfb-step-indicator.active::before {
    background: linear-gradient(135deg, var(--minimal-accent) 0%, #0256c2 100%);
    border-color: var(--minimal-accent);
    color: white;
    box-shadow: 0 6px 20px rgba(3, 102, 214, 0.4);
    transform: scale(1.15);
}

.wfb-step-indicator.completed {
    color: var(--minimal-success);
}

.wfb-step-indicator.completed .wfb-step-icon,
.wfb-step-indicator.completed::before {
    content: '✓';
    background: linear-gradient(135deg, var(--minimal-success) 0%, #1e7e34 100%);
    border-color: var(--minimal-success);
    color: white;
    box-shadow: 0 4px 16px rgba(40, 167, 69, 0.3);
}

/* Form Fields */
.wfb-field {
    margin-bottom: 32px;
}

.wfb-field-label {
    display: block;
    margin-bottom: 12px;
    color: var(--minimal-text);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.wfb-field-description {
    margin-top: 6px;
    color: var(--minimal-text-light);
    font-size: 13px;
    line-height: 1.5;
}

/* Text Inputs */
.wfb-input,
.wfb-textarea,
.wfb-select {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    color: var(--minimal-text);
    background: var(--minimal-white);
    border: 1px solid var(--minimal-border);
    border-radius: 8px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.wfb-input:hover,
.wfb-textarea:hover,
.wfb-select:hover {
    border-color: #cbd5e1;
}

.wfb-input:focus,
.wfb-textarea:focus,
.wfb-select:focus {
    outline: none;
    border-color: var(--minimal-accent);
    box-shadow: 0 0 0 3px var(--minimal-accent-light);
}

.wfb-textarea {
    min-height: 120px;
    resize: vertical;
}

/* Radio and Checkbox - Standard (No Images) */
.wfb-radio-group,
.wfb-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wfb-option-label {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--minimal-white);
    border: 1px solid var(--minimal-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.wfb-option-label:hover {
    border-color: var(--minimal-accent);
    background: var(--minimal-bg);
}

.wfb-option-label input[type="radio"],
.wfb-option-label input[type="checkbox"] {
    margin-right: 12px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Radio and Checkbox - WITH IMAGES */
.wfb-with-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    padding: 0;
}

.wfb-with-images .wfb-option-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    background: var(--minimal-white);
    border: 1px solid var(--minimal-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    min-height: 220px;
    margin: 0;
    overflow: hidden;
}

.wfb-with-images .wfb-option-label::before {
    display: none;
}

.wfb-with-images .wfb-option-label:hover {
    border-color: var(--minimal-accent);
    background: var(--minimal-white);
    transform: translateY(-2px);
}

.wfb-with-images .wfb-option-label input[type="radio"],
.wfb-with-images .wfb-option-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Custom Radio/Checkbox Indicator (Checkmark) */
.wfb-with-images .wfb-option-label::after {
    content: '✓';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    background: var(--minimal-success);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

.wfb-with-images .wfb-option-label:has(input:checked)::after {
    opacity: 1;
    transform: scale(1);
}

/* Option Image */
.wfb-option-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    margin: 0;
    border: none;
    border-bottom: 1px solid var(--minimal-border);
    transition: all 0.4s ease;
}

.wfb-with-images .wfb-option-label:hover .wfb-option-image {
    transform: scale(1.05);
}

.wfb-with-images .wfb-option-label:has(input:checked) .wfb-option-image {
    opacity: 0.95;
}

/* Option Text Container */
.wfb-option-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    font-size: 15px;
    color: var(--minimal-text);
    font-weight: 600;
    line-height: 1.4;
    padding: 16px;
    width: 100%;
    background: var(--minimal-white);
}

.wfb-with-images .wfb-option-label {
    opacity: 1;
}

.wfb-with-images .wfb-option-label:hover {
    opacity: 1;
}

.wfb-with-images .wfb-option-label:has(input:checked) {
    border-color: var(--minimal-success);
    background: var(--minimal-white);
}

/* Subtle pulse animation for selected items */
@keyframes subtle-pulse {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

/* Price Badge - Minimal Style */
.wfb-price-badge {
    display: block;
    background: var(--minimal-bg);
    color: var(--minimal-text);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    border: 1px solid var(--minimal-border);
    letter-spacing: 0.3px;
}

.wfb-with-images .wfb-option-label:has(input:checked) .wfb-price-badge {
    background: var(--minimal-success);
    color: white;
    border-color: var(--minimal-success);
}

/* Number Input */
.wfb-number {
    width: 100%;
    max-width: 100%;
}

/* Date Input */
.wfb-date {
    width: 100%;
    max-width: 100%;
}

/* File Upload */
.wfb-file-upload {
    position: relative;
    display: inline-block;
}

.wfb-file-upload input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.wfb-file-upload-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--minimal-white);
    border: 1px solid var(--minimal-border);
    border-radius: 8px;
    color: var(--minimal-accent);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wfb-file-upload-label:hover {
    background: var(--minimal-bg);
    border-color: var(--minimal-accent);
}

/* Buttons */
.wfb-button {
    padding: 16px 40px;
    font-size: 16px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, var(--minimal-accent) 0%, #0256c2 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(3, 102, 214, 0.3);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wfb-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.wfb-button:hover::before {
    width: 300px;
    height: 300px;
}

.wfb-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(3, 102, 214, 0.5);
}

.wfb-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(3, 102, 214, 0.3);
}

.wfb-button-secondary {
    background: var(--minimal-white);
    color: var(--minimal-text);
    border: 2px solid var(--minimal-border);
    box-shadow: 0 2px 8px var(--minimal-shadow);
}

.wfb-button-secondary:hover {
    background: var(--minimal-bg);
    border-color: var(--minimal-accent);
    box-shadow: 0 4px 12px var(--minimal-shadow-hover);
    color: var(--minimal-accent);
}

/* Navigation Buttons */
.wfb-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 50px;
    padding-top: 40px;
    border-top: 2px solid var(--minimal-border);
}

.wfb-prev-step,
.wfb-next-step,
.wfb-add-to-cart,
.wfb-submit,
.single_add_to_cart_button {
    padding: 18px 50px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.wfb-prev-step::before,
.wfb-next-step::before,
.wfb-add-to-cart::before,
.wfb-submit::before,
.single_add_to_cart_button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
    z-index: 0;
}

.wfb-prev-step:hover::before,
.wfb-next-step:hover::before,
.wfb-add-to-cart:hover::before,
.wfb-submit:hover::before,
.single_add_to_cart_button:hover::before {
    width: 400px;
    height: 400px;
}

.wfb-prev-step {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: var(--minimal-text) !important;
    border: 2px solid var(--minimal-border) !important;
    box-shadow: 0 4px 12px var(--minimal-shadow);
}

.wfb-prev-step:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    border-color: var(--minimal-accent) !important;
    color: var(--minimal-accent) !important;
    box-shadow: 0 6px 20px var(--minimal-shadow-hover);
    transform: scale(1.05);
}

.wfb-next-step,
.wfb-add-to-cart,
.wfb-submit,
.single_add_to_cart_button {
    background: linear-gradient(135deg, #0366d6 0%, #0256c2 100%) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(3, 102, 214, 0.4) !important;
}

/* CRITICAL: Force submit button visibility with maximum specificity */
body .wfb-form-wrapper button.wfb-submit,
body .wfb-step-navigation button.wfb-submit,
body button.wfb-submit.single_add_to_cart_button,
body .wfb-form button.wfb-submit.button.alt,
form.cart .wfb-step-navigation button.wfb-submit {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    margin-top: 20px !important;
}

.wfb-next-step:hover,
.wfb-add-to-cart:hover,
.wfb-submit:hover,
.single_add_to_cart_button:hover {
    background: linear-gradient(135deg, #0256c2 0%, #024a9e 100%) !important;
    box-shadow: 0 8px 28px rgba(3, 102, 214, 0.6) !important;
    transform: scale(1.05) !important;
}

.wfb-next-step:active,
.wfb-prev-step:active,
.wfb-add-to-cart:active,
.wfb-submit:active,
.single_add_to_cart_button:active {
    transform: scale(0.98) !important;
}

/* Add to Cart specific styling */
.wfb-add-to-cart::after,
.wfb-submit::after,
.single_add_to_cart_button::after {
    content: '→';
    margin-left: 12px;
    font-size: 20px;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

/* Price Summary */
.wfb-price-summary {
    background: var(--minimal-bg);
    padding: 24px;
    border-radius: 12px;
    border: 2px solid var(--minimal-border);
    margin-top: 32px;
}

.wfb-price-label {
    font-size: 14px;
    color: var(--minimal-text-light);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wfb-price-amount {
    font-size: 32px;
    color: var(--minimal-text);
    font-weight: 700;
    margin-top: 8px;
}

/* Currency symbol now output by PHP renderer, not CSS */
/* .wfb-price-amount::before { content: '$'; } */

/* Required Field Indicator */
.wfb-required {
    color: #d73a49;
    margin-left: 4px;
}

/* Error States */
.wfb-field.error .wfb-input,
.wfb-field.error .wfb-textarea,
.wfb-field.error .wfb-select {
    border-color: #d73a49;
}

.wfb-error-message {
    color: #d73a49;
    font-size: 13px;
    margin-top: 6px;
    display: none;
}

.wfb-field.error .wfb-error-message {
    display: block;
}

/* Validation Error Messages - Modern Style */
.wfb-validation-error {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #dc3545;
    background: #fff5f5;
    border: 1px solid #ffcccc;
    border-left: 4px solid #dc3545;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 500;
    animation: slideDown 0.3s ease;
}

.wfb-validation-error::before {
    content: '⚠ ';
    font-size: 16px;
    margin-right: 6px;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Invalid Input Styling */
input.wfb-invalid,
textarea.wfb-invalid,
select.wfb-invalid {
    border-color: #dc3545 !important;
    background: #fff5f5 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important;
}

input.wfb-invalid:focus,
textarea.wfb-invalid:focus,
select.wfb-invalid:focus {
    border-color: #bb2d3b !important;
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.15) !important;
}

/* Loading State */
.wfb-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .wfb-form {
        padding: 24px;
    }

    .wfb-with-images {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 16px;
    }

    .wfb-option-image {
        height: 140px;
    }

    .wfb-step-navigation {
        flex-wrap: wrap;
    }

    .wfb-navigation {
        flex-direction: column;
    }

    .wfb-prev-step,
    .wfb-next-step {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .wfb-with-images {
        grid-template-columns: 1fr;
    }

    .wfb-price-amount {
        font-size: 28px;
    }
}

/* Smooth Transitions for All Interactive Elements */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Floating Animation */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.wfb-with-images .wfb-option-label:hover {
    animation: float 2s ease-in-out;
}

/* ============================================
   QUANTITY CONTROLS - Modern Design
   ============================================ */
.wfb-quantity-control {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--minimal-white);
    border: 2px solid var(--minimal-border);
    border-radius: 12px;
    padding: 4px;
    box-shadow: 0 2px 8px var(--minimal-shadow);
    transition: all 0.3s ease;
}

.wfb-quantity-control:focus-within {
    border-color: var(--minimal-accent);
    box-shadow: 0 0 0 3px var(--minimal-accent-light);
}

.wfb-qty-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--minimal-bg) 0%, var(--minimal-white) 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    color: var(--minimal-accent);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.wfb-qty-btn:hover {
    background: linear-gradient(135deg, var(--minimal-accent) 0%, #0256c2 100%);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(3, 102, 214, 0.3);
}

.wfb-qty-btn:active {
    transform: scale(0.95);
}

.wfb-qty-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: var(--minimal-bg);
    color: var(--minimal-text-light);
}

.wfb-qty-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

.wfb-qty-input {
    width: 60px;
    height: 40px;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    color: var(--minimal-text);
    outline: none;
}

.wfb-qty-input::-webkit-inner-spin-button,
.wfb-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.wfb-qty-input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Quantity in checkout/summary */
.wfb-item-quantity {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.wfb-item-quantity label {
    font-size: 14px;
    font-weight: 600;
    color: var(--minimal-text);
}

/* Enhanced Price Summary with Quantity */
.wfb-price-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--minimal-border);
}

.wfb-price-summary-item:last-child {
    border-bottom: none;
    padding-top: 20px;
    margin-top: 12px;
    border-top: 2px solid var(--minimal-text);
}

.wfb-price-summary-label {
    font-size: 15px;
    color: var(--minimal-text);
    font-weight: 500;
}

.wfb-price-summary-qty {
    font-size: 13px;
    color: var(--minimal-text-light);
    margin-left: 8px;
}

.wfb-price-summary-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--minimal-text);
}

.wfb-price-total {
    font-size: 24px;
    font-weight: 700;
    color: var(--minimal-accent);
}

/* Required field indicator */
.required {
    color: #dc3232;
    margin-left: 3px;
}
/* Row and Column Layout for Frontend */
.wfb-form-row {
    display: flex;
    gap: 32px;
    margin-bottom: 20px;
}

.wfb-form-column {
    flex: 1;
    min-width: 0;
}

.wfb-form-row.wfb-cols-1 .wfb-form-column {
    flex: 0 0 100%;
}

.wfb-form-row.wfb-cols-2 .wfb-form-column {
    flex: 0 0 calc(50% - 16px);
}

.wfb-form-row.wfb-cols-3 .wfb-form-column {
    flex: 0 0 calc(33.333% - 22px);
}

@media (max-width: 768px) {
    .wfb-form-row {
        flex-direction: column;
        gap: 15px;
    }
    
    .wfb-form-row.wfb-cols-2 .wfb-form-column,
    .wfb-form-row.wfb-cols-3 .wfb-form-column {
        flex: 0 0 100%;
    }
}

/* MySKU Field Styling */
.wfb-mysku-field {
    margin-bottom: 20px;
}

.wfb-mysku-product-info {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 10px;
    border: 1px solid #e0e0e0;
}

.wfb-mysku-product-name {
    font-weight: 700;
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
}

.wfb-mysku-product-sku {
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
}

.wfb-mysku-product-price {
    font-size: 16px;
    font-weight: 700;
    color: #10b981;
    margin-top: 8px;
}

.wfb-mysku-select {
    width: 100%;
    padding: 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    background-color: white;
    cursor: pointer;
}

.wfb-mysku-select:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.wfb-mysku-display {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 2px solid #10b981;
}

/* MySwatch SKU styling */
.wfb-swatch-sku {
    font-size: 12px;
    color: #666;
    font-family: 'Courier New', monospace;
    background: #f5f5f5;
    padding: 4px 8px;
    border-radius: 3px;
    margin-top: 4px;
    margin-bottom: 4px;
    display: inline-block;
    width: fit-content;
    pointer-events: none;
}

/* MySwatch grid and swatch items */
.wfb-swatches-grid,
.wfb-swatches-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(100px, 120px)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 600px !important;
}

/* Ensure swatch items display properly in grid */
.wfb-swatch-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 100px !important;
    max-width: 120px !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 10px !important;
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
    background: #fff !important;
    transition: all 0.3s ease !important;
}

.wfb-swatch-item:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Color swatches should be constrained */
.wfb-swatch-color {
    flex-shrink: 0 !important;
    width: 100% !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
}

/* Image swatches should maintain aspect ratio */
.wfb-swatch-image {
    width: 100% !important;
    height: auto !important;
    max-height: 80px !important;
    object-fit: contain !important;
}

.wfb-swatch-label {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 6px;
    line-height: 1.3;
}

.wfb-swatch-price {
    font-size: 18px;
    font-weight: 400;
    color: #10b981;
    letter-spacing: 0.5px;
}

/* ============================= */
/* ADVANCED IMAGE CONTROLS CSS  */
/* ============================= */

/* Base styles for images */
.wfb-with-images .wfb-option-image-wrapper {
    display: inline-block;
    overflow: hidden;
    position: relative;
}

.wfb-with-images .wfb-option-image {
    display: block;
    transition: all 0.3s ease;
}

/* Layout: Inline (default) */
.wfb-radio-group.wfb-layout-inline,
.wfb-checkbox-group.wfb-layout-inline {
    display: flex !important;
    flex-direction: column !important;
}

.wfb-layout-inline .wfb-option-label {
    display: flex;
    align-items: center;
    gap: var(--image-spacing, 10px);
    padding: 10px;
    margin-bottom: 10px;
}

/* Layout: Stacked */
.wfb-radio-group.wfb-layout-stacked,
.wfb-checkbox-group.wfb-layout-stacked {
    display: flex !important;
    flex-direction: column !important;
}

.wfb-layout-stacked .wfb-option-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
    margin-bottom: 15px;
}

.wfb-layout-stacked .wfb-option-image-wrapper {
    margin-bottom: 10px;
}

/* Layout: Grid 2 columns */
.wfb-radio-group.wfb-layout-grid-2,
.wfb-checkbox-group.wfb-layout-grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
}

.wfb-layout-grid-2 .wfb-option-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
}

/* Layout: Grid 3 columns */
.wfb-radio-group.wfb-layout-grid-3,
.wfb-checkbox-group.wfb-layout-grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px !important;
}

.wfb-layout-grid-3 .wfb-option-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
}

/* Layout: Grid 4 columns */
.wfb-radio-group.wfb-layout-grid-4,
.wfb-checkbox-group.wfb-layout-grid-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 15px !important;
}

.wfb-layout-grid-4 .wfb-option-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px;
}

/* Label Display: Show (default) */
.wfb-label-show .wfb-option-text .wfb-option-text-content {
    display: inline-block;
}

/* Label Display: Hide */
.wfb-label-hide .wfb-option-text .wfb-option-text-content {
    display: none !important;
}

/* Label Display: Tooltip */
.wfb-label-tooltip .wfb-option-label {
    position: relative;
}

.wfb-label-tooltip .wfb-option-text .wfb-option-text-content {
    position: absolute;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
}

.wfb-label-tooltip .wfb-option-label:hover .wfb-option-text .wfb-option-text-content {
    opacity: 1;
    visibility: visible;
}

/* Label Display: Overlay */
.wfb-label-overlay .wfb-option-image-wrapper {
    position: relative;
}

.wfb-label-overlay .wfb-option-text-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: white;
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

/* Label Display: Badge */
.wfb-label-badge .wfb-option-text .wfb-option-text-content {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #3b82f6;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    z-index: 10;
}

/* Label Display: Bottom Center */
.wfb-label-bottom .wfb-option-text .wfb-option-text-content {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid #e5e7eb;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Check Style: Radio/Checkbox (default) - visible */
.wfb-check-radio input[type="radio"],
.wfb-check-checkbox input[type="checkbox"] {
    display: inline-block;
    margin: 0;
}

/* Check Style: Checkmark Icon */
.wfb-check-checkmark input[type="radio"],
.wfb-check-checkmark input[type="checkbox"] {
    display: none;
}

.wfb-check-checkmark .wfb-option-label {
    position: relative;
}

.wfb-check-checkmark .wfb-option-label::after {
    content: '✓';
    position: absolute;
    top: 10px;
    right: 10px;
    background: #10b981;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
}

.wfb-check-checkmark .wfb-option-label.wfb-selected::after {
    opacity: 1;
    transform: scale(1);
}

/* Check Style: Border Highlight */
.wfb-check-border input[type="radio"],
.wfb-check-border input[type="checkbox"] {
    display: none;
}

.wfb-check-border .wfb-option-label {
    border: 3px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.wfb-check-border .wfb-option-label.wfb-selected {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

/* Check Style: Overlay Effect */
.wfb-check-overlay input[type="radio"],
.wfb-check-overlay input[type="checkbox"] {
    display: none;
}

.wfb-check-overlay .wfb-option-image-wrapper {
    position: relative;
}

.wfb-check-overlay .wfb-option-image-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(59, 130, 246, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.wfb-check-overlay .wfb-option-label.wfb-selected .wfb-option-image-wrapper::after {
    opacity: 1;
}

/* Check Style: Toggle Switch */
.wfb-check-toggle input[type="radio"],
.wfb-check-toggle input[type="checkbox"] {
    display: none;
}

.wfb-check-toggle .wfb-option-label {
    position: relative;
    padding-left: 60px;
}

.wfb-check-toggle .wfb-option-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 24px;
    background: #ccc;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.wfb-check-toggle .wfb-option-label::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.wfb-check-toggle .wfb-option-label.wfb-selected::before {
    background: #10b981;
}

.wfb-check-toggle .wfb-option-label.wfb-selected::after {
    transform: translateY(-50%) translateX(26px);
}

/* Check Style: None (hidden) */
.wfb-check-none input[type="radio"],
.wfb-check-none input[type="checkbox"] {
    display: none;
}

/* Hover Effect: None - Default behavior, no special effects */

/* Hover Effect: Zoom In */
.wfb-hover-zoom .wfb-option-label:hover .wfb-option-image {
    transform: scale(1.1);
}

/* Hover Effect: Lift Up */
.wfb-hover-lift .wfb-option-label {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wfb-hover-lift .wfb-option-label:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Hover Effect: Glow */
.wfb-hover-glow .wfb-option-label:hover {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
}

/* Hover Effect: Brightness */
.wfb-hover-brightness .wfb-option-label:hover .wfb-option-image {
    filter: brightness(1.2);
}

/* Hover Effect: Pulse */
.wfb-hover-pulse .wfb-option-label:hover .wfb-option-image {
    animation: wfb-pulse 0.6s ease-in-out;
}

@keyframes wfb-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Hover Effect: Rotate */
.wfb-hover-rotate .wfb-option-label:hover .wfb-option-image {
    transform: rotate(5deg);
}

/* Hover Effect: Slide Up */
.wfb-hover-slide .wfb-option-label:hover .wfb-option-image {
    transform: translateY(-10px);
}

/* Advanced Image Controls JavaScript Support */
.wfb-js-ready .wfb-option-label {
    cursor: pointer;
}

.wfb-js-ready .wfb-option-label:hover {
    opacity: 0.9;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .wfb-layout-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .wfb-layout-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .wfb-layout-grid-2 {
        grid-template-columns: 1fr;
    }
    
    .wfb-label-badge .wfb-option-text .wfb-option-text-content,
    .wfb-label-bottom .wfb-option-text .wfb-option-text-content {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        transform: none;
        display: block;
        margin-top: 8px;
    }
}

/* JavaScript for Advanced Image Controls */

/* ============================================
   DISPLAY OPTIONS - Layout, Border, Accent, etc.
   ============================================ */

/* Display Mode Classes - Inline Layout */
.wfb-radio-group.wfb-display-inline:not(.wfb-with-images),
.wfb-checkbox-group.wfb-display-inline:not(.wfb-with-images) {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.wfb-radio-group.wfb-display-inline:not(.wfb-with-images) .wfb-option-label,
.wfb-checkbox-group.wfb-display-inline:not(.wfb-with-images) .wfb-option-label {
    flex: 0 0 auto;
    padding: 10px 16px;
}

/* Display Mode Classes - Stacked (default, full width) */
.wfb-radio-group.wfb-display-stacked:not(.wfb-with-images),
.wfb-checkbox-group.wfb-display-stacked:not(.wfb-with-images) {
    flex-direction: column;
}

.wfb-radio-group.wfb-display-stacked:not(.wfb-with-images) .wfb-option-label,
.wfb-checkbox-group.wfb-display-stacked:not(.wfb-with-images) .wfb-option-label {
    width: 100%;
}

/* Display Mode Classes - Grid Layout */
.wfb-radio-group.wfb-display-grid-2:not(.wfb-with-images),
.wfb-checkbox-group.wfb-display-grid-2:not(.wfb-with-images) {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.wfb-radio-group.wfb-display-grid-3:not(.wfb-with-images),
.wfb-checkbox-group.wfb-display-grid-3:not(.wfb-with-images) {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.wfb-radio-group.wfb-display-grid-4:not(.wfb-with-images),
.wfb-checkbox-group.wfb-display-grid-4:not(.wfb-with-images) {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

/* Display Mode Classes - Button Style */
.wfb-radio-group.wfb-display-buttons:not(.wfb-with-images),
.wfb-checkbox-group.wfb-display-buttons:not(.wfb-with-images) {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.wfb-radio-group.wfb-display-buttons:not(.wfb-with-images) .wfb-option-label,
.wfb-checkbox-group.wfb-display-buttons:not(.wfb-with-images) .wfb-option-label {
    padding: 12px 20px;
    border-radius: 25px;
    background: #f1f5f9;
    border: 2px solid transparent;
    font-weight: 600;
}

.wfb-radio-group.wfb-display-buttons:not(.wfb-with-images) .wfb-option-label input,
.wfb-checkbox-group.wfb-display-buttons:not(.wfb-with-images) .wfb-option-label input {
    display: none;
}

.wfb-radio-group.wfb-display-buttons:not(.wfb-with-images) .wfb-option-label:has(input:checked),
.wfb-checkbox-group.wfb-display-buttons:not(.wfb-with-images) .wfb-option-label:has(input:checked) {
    background: var(--minimal-accent, #0366d6);
    color: white;
    border-color: var(--minimal-accent, #0366d6);
}

.wfb-radio-group.wfb-display-buttons:not(.wfb-with-images) .wfb-option-label:has(input:checked) .wfb-option-text,
.wfb-checkbox-group.wfb-display-buttons:not(.wfb-with-images) .wfb-option-label:has(input:checked) .wfb-option-text,
.wfb-radio-group.wfb-display-buttons:not(.wfb-with-images) .wfb-option-label:has(input:checked) .wfb-option-text-content,
.wfb-checkbox-group.wfb-display-buttons:not(.wfb-with-images) .wfb-option-label:has(input:checked) .wfb-option-text-content {
    color: white !important;
}

/* Display Mode Classes - Card Style */
.wfb-radio-group.wfb-display-cards:not(.wfb-with-images),
.wfb-checkbox-group.wfb-display-cards:not(.wfb-with-images) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.wfb-radio-group.wfb-display-cards:not(.wfb-with-images) .wfb-option-label,
.wfb-checkbox-group.wfb-display-cards:not(.wfb-with-images) .wfb-option-label {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    min-height: 100px;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.wfb-radio-group.wfb-display-cards:not(.wfb-with-images) .wfb-option-label input,
.wfb-checkbox-group.wfb-display-cards:not(.wfb-with-images) .wfb-option-label input {
    position: absolute;
    top: 12px;
    right: 12px;
}

.wfb-radio-group.wfb-display-cards:not(.wfb-with-images) .wfb-option-text,
.wfb-checkbox-group.wfb-display-cards:not(.wfb-with-images) .wfb-option-text {
    flex-direction: column;
}

/* ============================================
   ACCENT COLOR VARIATIONS
   ============================================ */
/* Default Blue Accent */
.wfb-radio-group.wfb-accent-blue:not(.wfb-with-images) .wfb-option-label:has(input:checked),
.wfb-checkbox-group.wfb-accent-blue:not(.wfb-with-images) .wfb-option-label:has(input:checked) {
    border-color: #3b82f6;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(37, 99, 235, 0.08) 100%);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.wfb-radio-group.wfb-accent-blue:not(.wfb-with-images) .wfb-option-label input {
    accent-color: #3b82f6;
}

/* Green Accent */
.wfb-radio-group.wfb-accent-green:not(.wfb-with-images) .wfb-option-label:has(input:checked),
.wfb-checkbox-group.wfb-accent-green:not(.wfb-with-images) .wfb-option-label:has(input:checked) {
    border-color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.08) 100%);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.wfb-radio-group.wfb-accent-green:not(.wfb-with-images) .wfb-option-label input {
    accent-color: #10b981;
}

/* Purple Accent */
.wfb-radio-group.wfb-accent-purple:not(.wfb-with-images) .wfb-option-label:has(input:checked),
.wfb-checkbox-group.wfb-accent-purple:not(.wfb-with-images) .wfb-option-label:has(input:checked) {
    border-color: #8b5cf6;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(124, 58, 237, 0.08) 100%);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
.wfb-radio-group.wfb-accent-purple:not(.wfb-with-images) .wfb-option-label input {
    accent-color: #8b5cf6;
}

/* Pink Accent */
.wfb-radio-group.wfb-accent-pink:not(.wfb-with-images) .wfb-option-label:has(input:checked),
.wfb-checkbox-group.wfb-accent-pink:not(.wfb-with-images) .wfb-option-label:has(input:checked) {
    border-color: #ec4899;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.08) 0%, rgba(219, 39, 119, 0.08) 100%);
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.15);
}
.wfb-radio-group.wfb-accent-pink:not(.wfb-with-images) .wfb-option-label input {
    accent-color: #ec4899;
}

/* Orange Accent */
.wfb-radio-group.wfb-accent-orange:not(.wfb-with-images) .wfb-option-label:has(input:checked),
.wfb-checkbox-group.wfb-accent-orange:not(.wfb-with-images) .wfb-option-label:has(input:checked) {
    border-color: #f97316;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.08) 0%, rgba(234, 88, 12, 0.08) 100%);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}
.wfb-radio-group.wfb-accent-orange:not(.wfb-with-images) .wfb-option-label input {
    accent-color: #f97316;
}

/* Cyan Accent */
.wfb-radio-group.wfb-accent-cyan:not(.wfb-with-images) .wfb-option-label:has(input:checked),
.wfb-checkbox-group.wfb-accent-cyan:not(.wfb-with-images) .wfb-option-label:has(input:checked) {
    border-color: #06b6d4;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.08) 0%, rgba(8, 145, 178, 0.08) 100%);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
}
.wfb-radio-group.wfb-accent-cyan:not(.wfb-with-images) .wfb-option-label input {
    accent-color: #06b6d4;
}

/* Red Accent */
.wfb-radio-group.wfb-accent-red:not(.wfb-with-images) .wfb-option-label:has(input:checked),
.wfb-checkbox-group.wfb-accent-red:not(.wfb-with-images) .wfb-option-label:has(input:checked) {
    border-color: #ef4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(220, 38, 38, 0.08) 100%);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
.wfb-radio-group.wfb-accent-red:not(.wfb-with-images) .wfb-option-label input {
    accent-color: #ef4444;
}

/* Yellow Accent */
.wfb-radio-group.wfb-accent-yellow:not(.wfb-with-images) .wfb-option-label:has(input:checked),
.wfb-checkbox-group.wfb-accent-yellow:not(.wfb-with-images) .wfb-option-label:has(input:checked) {
    border-color: #eab308;
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.08) 0%, rgba(202, 138, 4, 0.08) 100%);
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15);
}
.wfb-radio-group.wfb-accent-yellow:not(.wfb-with-images) .wfb-option-label input {
    accent-color: #eab308;
}

/* Indigo Accent */
.wfb-radio-group.wfb-accent-indigo:not(.wfb-with-images) .wfb-option-label:has(input:checked),
.wfb-checkbox-group.wfb-accent-indigo:not(.wfb-with-images) .wfb-option-label:has(input:checked) {
    border-color: #6366f1;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(79, 70, 229, 0.08) 100%);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.wfb-radio-group.wfb-accent-indigo:not(.wfb-with-images) .wfb-option-label input {
    accent-color: #6366f1;
}

/* ============================================
   BORDER STYLE VARIATIONS
   ============================================ */
.wfb-radio-group.wfb-border-dashed:not(.wfb-with-images) .wfb-option-label,
.wfb-checkbox-group.wfb-border-dashed:not(.wfb-with-images) .wfb-option-label {
    border-style: dashed;
}

.wfb-radio-group.wfb-border-rounded:not(.wfb-with-images) .wfb-option-label,
.wfb-checkbox-group.wfb-border-rounded:not(.wfb-with-images) .wfb-option-label {
    border-radius: 20px;
}

.wfb-radio-group.wfb-border-none:not(.wfb-with-images) .wfb-option-label,
.wfb-checkbox-group.wfb-border-none:not(.wfb-with-images) .wfb-option-label {
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* ============================================
   SIZE VARIATIONS
   ============================================ */
.wfb-radio-group.wfb-size-compact:not(.wfb-with-images) .wfb-option-label,
.wfb-checkbox-group.wfb-size-compact:not(.wfb-with-images) .wfb-option-label {
    padding: 8px 12px;
}
.wfb-radio-group.wfb-size-compact:not(.wfb-with-images) .wfb-option-text,
.wfb-checkbox-group.wfb-size-compact:not(.wfb-with-images) .wfb-option-text {
    font-size: 13px;
}

.wfb-radio-group.wfb-size-large:not(.wfb-with-images) .wfb-option-label,
.wfb-checkbox-group.wfb-size-large:not(.wfb-with-images) .wfb-option-label {
    padding: 18px 22px;
}
.wfb-radio-group.wfb-size-large:not(.wfb-with-images) .wfb-option-text,
.wfb-checkbox-group.wfb-size-large:not(.wfb-with-images) .wfb-option-text {
    font-size: 17px;
}
.wfb-radio-group.wfb-size-large:not(.wfb-with-images) .wfb-option-label input,
.wfb-checkbox-group.wfb-size-large:not(.wfb-with-images) .wfb-option-label input {
    width: 24px;
    height: 24px;
}

/* Extra Large Size */
.wfb-radio-group.wfb-size-extra-large:not(.wfb-with-images) .wfb-option-label,
.wfb-checkbox-group.wfb-size-extra-large:not(.wfb-with-images) .wfb-option-label {
    padding: 22px 26px;
}
.wfb-radio-group.wfb-size-extra-large:not(.wfb-with-images) .wfb-option-text,
.wfb-checkbox-group.wfb-size-extra-large:not(.wfb-with-images) .wfb-option-text {
    font-size: 18px;
}
.wfb-radio-group.wfb-size-extra-large:not(.wfb-with-images) .wfb-option-label input,
.wfb-checkbox-group.wfb-size-extra-large:not(.wfb-with-images) .wfb-option-label input {
    width: 28px;
    height: 28px;
}

/* ============================================
   HIDE INDICATOR OPTION
   ============================================ */
.wfb-radio-group.wfb-hide-indicator:not(.wfb-with-images) .wfb-option-label input,
.wfb-checkbox-group.wfb-hide-indicator:not(.wfb-with-images) .wfb-option-label input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* ============================================
   HOVER EFFECTS (for non-image fields)
   ============================================ */
.wfb-radio-group.wfb-hover-lift:not(.wfb-with-images) .wfb-option-label:hover,
.wfb-checkbox-group.wfb-hover-lift:not(.wfb-with-images) .wfb-option-label:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.wfb-radio-group.wfb-hover-glow:not(.wfb-with-images) .wfb-option-label:hover,
.wfb-checkbox-group.wfb-hover-glow:not(.wfb-with-images) .wfb-option-label:hover {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.wfb-radio-group.wfb-hover-scale:not(.wfb-with-images) .wfb-option-label:hover,
.wfb-checkbox-group.wfb-hover-scale:not(.wfb-with-images) .wfb-option-label:hover {
    transform: scale(1.02);
}

.wfb-radio-group.wfb-hover-none:not(.wfb-with-images) .wfb-option-label:hover,
.wfb-checkbox-group.wfb-hover-none:not(.wfb-with-images) .wfb-option-label:hover {
    transform: none;
    box-shadow: none;
}

/* ============================================
   FONT WEIGHT VARIATIONS
   ============================================ */
.wfb-radio-group.wfb-weight-normal:not(.wfb-with-images) .wfb-option-text,
.wfb-checkbox-group.wfb-weight-normal:not(.wfb-with-images) .wfb-option-text {
    font-weight: 400;
}

.wfb-radio-group.wfb-weight-medium:not(.wfb-with-images) .wfb-option-text,
.wfb-checkbox-group.wfb-weight-medium:not(.wfb-with-images) .wfb-option-text {
    font-weight: 500;
}

.wfb-radio-group.wfb-weight-semibold:not(.wfb-with-images) .wfb-option-text,
.wfb-checkbox-group.wfb-weight-semibold:not(.wfb-with-images) .wfb-option-text {
    font-weight: 600;
}

.wfb-radio-group.wfb-weight-bold:not(.wfb-with-images) .wfb-option-text,
.wfb-checkbox-group.wfb-weight-bold:not(.wfb-with-images) .wfb-option-text {
    font-weight: 700;
}

/* ============================================
   SPACING VARIATIONS
   ============================================ */
.wfb-radio-group.wfb-spacing-tight:not(.wfb-with-images),
.wfb-checkbox-group.wfb-spacing-tight:not(.wfb-with-images) {
    gap: 6px;
}

.wfb-radio-group.wfb-spacing-normal:not(.wfb-with-images),
.wfb-checkbox-group.wfb-spacing-normal:not(.wfb-with-images) {
    gap: 12px;
}

.wfb-radio-group.wfb-spacing-relaxed:not(.wfb-with-images),
.wfb-checkbox-group.wfb-spacing-relaxed:not(.wfb-with-images) {
    gap: 18px;
}

.wfb-radio-group.wfb-spacing-loose:not(.wfb-with-images),
.wfb-checkbox-group.wfb-spacing-loose:not(.wfb-with-images) {
    gap: 24px;
}

/* Checkmark Indicator Style */
.wfb-radio-group:not(.wfb-with-images) .wfb-option-label.wfb-indicator-checkmark input,
.wfb-checkbox-group:not(.wfb-with-images) .wfb-option-label.wfb-indicator-checkmark input {
    display: none;
}

.wfb-radio-group:not(.wfb-with-images) .wfb-option-label.wfb-indicator-checkmark::after,
.wfb-checkbox-group:not(.wfb-with-images) .wfb-option-label.wfb-indicator-checkmark::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e5e7eb;
    transition: all 0.2s;
}

.wfb-radio-group:not(.wfb-with-images) .wfb-option-label.wfb-indicator-checkmark:has(input:checked)::after,
.wfb-checkbox-group:not(.wfb-with-images) .wfb-option-label.wfb-indicator-checkmark:has(input:checked)::after {
    background: #10b981;
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 14px;
}

/* Responsive adjustments for display options grid layouts */
@media (max-width: 768px) {
    .wfb-radio-group.wfb-display-grid-3:not(.wfb-with-images),
    .wfb-checkbox-group.wfb-display-grid-3:not(.wfb-with-images),
    .wfb-radio-group.wfb-display-grid-4:not(.wfb-with-images),
    .wfb-checkbox-group.wfb-display-grid-4:not(.wfb-with-images) {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .wfb-radio-group.wfb-display-grid-2:not(.wfb-with-images),
    .wfb-checkbox-group.wfb-display-grid-2:not(.wfb-with-images),
    .wfb-radio-group.wfb-display-grid-3:not(.wfb-with-images),
    .wfb-checkbox-group.wfb-display-grid-3:not(.wfb-with-images),
    .wfb-radio-group.wfb-display-grid-4:not(.wfb-with-images),
    .wfb-checkbox-group.wfb-display-grid-4:not(.wfb-with-images) {
        grid-template-columns: 1fr;
    }
    
    .wfb-radio-group.wfb-display-inline:not(.wfb-with-images),
    .wfb-checkbox-group.wfb-display-inline:not(.wfb-with-images) {
        flex-direction: column;
    }
}

/* ============================================
   TOGGLE SWITCH STYLES
   ============================================ */

/* Base Toggle Container - Hide original input */
.wfb-radio-group.wfb-toggle:not(.wfb-with-images) .wfb-option-label input,
.wfb-checkbox-group.wfb-toggle:not(.wfb-with-images) .wfb-option-label input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Toggle Label Structure */
.wfb-radio-group.wfb-toggle:not(.wfb-with-images) .wfb-option-label,
.wfb-checkbox-group.wfb-toggle:not(.wfb-with-images) .wfb-option-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    position: relative;
}

/* Toggle Track Base */
.wfb-toggle-track {
    position: relative;
    flex-shrink: 0;
    background: #d1d5db;
    border-radius: 9999px;
    transition: all 0.3s ease;
}

.wfb-toggle-knob {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ============================================
   TOGGLE STYLE: BASIC
   ============================================ */
.wfb-toggle-basic .wfb-toggle-track {
    width: 44px;
    height: 24px;
    background: #d1d5db;
}

.wfb-toggle-basic .wfb-toggle-knob {
    width: 20px;
    height: 20px;
    left: 2px;
}

.wfb-toggle-basic .wfb-option-label:has(input:checked) .wfb-toggle-track {
    background: var(--toggle-color, #10b981);
}

.wfb-toggle-basic .wfb-option-label:has(input:checked) .wfb-toggle-knob {
    left: 22px;
}

/* ============================================
   TOGGLE STYLE: iOS
   ============================================ */
.wfb-toggle-ios .wfb-toggle-track {
    width: 51px;
    height: 31px;
    background: #e5e5ea;
    border-radius: 15.5px;
}

.wfb-toggle-ios .wfb-toggle-knob {
    width: 27px;
    height: 27px;
    left: 2px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06);
}

.wfb-toggle-ios .wfb-option-label:has(input:checked) .wfb-toggle-track {
    background: var(--toggle-color, #34c759);
}

.wfb-toggle-ios .wfb-option-label:has(input:checked) .wfb-toggle-knob {
    left: 22px;
}

/* ============================================
   TOGGLE STYLE: MATERIAL DESIGN
   ============================================ */
.wfb-toggle-material .wfb-toggle-track {
    width: 36px;
    height: 14px;
    background: #9e9e9e;
    opacity: 0.38;
}

.wfb-toggle-material .wfb-toggle-knob {
    width: 20px;
    height: 20px;
    left: -2px;
    background: #fafafa;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}

.wfb-toggle-material .wfb-option-label:has(input:checked) .wfb-toggle-track {
    background: var(--toggle-color, #4caf50);
    opacity: 0.5;
}

.wfb-toggle-material .wfb-option-label:has(input:checked) .wfb-toggle-knob {
    left: 18px;
    background: var(--toggle-color, #4caf50);
}

/* ============================================
   TOGGLE STYLE: FLAT MODERN
   ============================================ */
.wfb-toggle-flat .wfb-toggle-track {
    width: 48px;
    height: 26px;
    background: #e2e8f0;
    border: 2px solid #cbd5e1;
}

.wfb-toggle-flat .wfb-toggle-knob {
    width: 18px;
    height: 18px;
    left: 4px;
    background: #94a3b8;
    box-shadow: none;
}

.wfb-toggle-flat .wfb-option-label:has(input:checked) .wfb-toggle-track {
    background: var(--toggle-color, #10b981);
    border-color: var(--toggle-color, #10b981);
}

.wfb-toggle-flat .wfb-option-label:has(input:checked) .wfb-toggle-knob {
    left: 26px;
    background: white;
}

/* ============================================
   TOGGLE STYLE: 3D SKEUOMORPHIC
   ============================================ */
.wfb-toggle-skeuomorphic .wfb-toggle-track {
    width: 60px;
    height: 30px;
    background: linear-gradient(to bottom, #cccccc 0%, #e6e6e6 50%, #f0f0f0 100%);
    border: 1px solid #999;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2), 0 1px 1px rgba(255,255,255,0.8);
}

.wfb-toggle-skeuomorphic .wfb-toggle-knob {
    width: 26px;
    height: 26px;
    left: 2px;
    background: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 50%, #e6e6e6 100%);
    border: 1px solid #aaa;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.8);
}

.wfb-toggle-skeuomorphic .wfb-option-label:has(input:checked) .wfb-toggle-track {
    background: linear-gradient(to bottom, var(--toggle-color, #28a745) 0%, var(--toggle-color-light, #34ce57) 50%, var(--toggle-color, #28a745) 100%);
    border-color: var(--toggle-color-dark, #1e7e34);
}

.wfb-toggle-skeuomorphic .wfb-option-label:has(input:checked) .wfb-toggle-knob {
    left: 32px;
}

/* ============================================
   TOGGLE STYLE: NEON GLOW
   ============================================ */
.wfb-toggle-neon .wfb-toggle-track {
    width: 50px;
    height: 26px;
    background: #1a1a2e;
    border: 2px solid #333;
}

.wfb-toggle-neon .wfb-toggle-knob {
    width: 18px;
    height: 18px;
    left: 4px;
    background: #555;
    box-shadow: none;
}

.wfb-toggle-neon .wfb-option-label:has(input:checked) .wfb-toggle-track {
    background: #1a1a2e;
    border-color: var(--toggle-color, #00ff88);
    box-shadow: 0 0 10px var(--toggle-color, #00ff88), 0 0 20px var(--toggle-color, #00ff88), inset 0 0 10px rgba(0, 255, 136, 0.2);
}

.wfb-toggle-neon .wfb-option-label:has(input:checked) .wfb-toggle-knob {
    left: 28px;
    background: var(--toggle-color, #00ff88);
    box-shadow: 0 0 10px var(--toggle-color, #00ff88), 0 0 20px var(--toggle-color, #00ff88);
}

/* ============================================
   TOGGLE STYLE: RETRO SWITCH
   ============================================ */
.wfb-toggle-retro .wfb-toggle-track {
    width: 56px;
    height: 28px;
    background: #8b4513;
    border: 3px solid #5d3a1a;
    border-radius: 4px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

.wfb-toggle-retro .wfb-toggle-knob {
    width: 20px;
    height: 20px;
    left: 4px;
    background: linear-gradient(135deg, #d4af37 0%, #b8860b 50%, #cd853f 100%);
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}

.wfb-toggle-retro .wfb-option-label:has(input:checked) .wfb-toggle-track {
    background: var(--toggle-color, #228b22);
}

.wfb-toggle-retro .wfb-option-label:has(input:checked) .wfb-toggle-knob {
    left: 32px;
}

/* ============================================
   TOGGLE COLORS
   ============================================ */
.wfb-toggle-color-green { --toggle-color: #10b981; --toggle-color-light: #34d399; --toggle-color-dark: #059669; }
.wfb-toggle-color-blue { --toggle-color: #3b82f6; --toggle-color-light: #60a5fa; --toggle-color-dark: #2563eb; }
.wfb-toggle-color-purple { --toggle-color: #8b5cf6; --toggle-color-light: #a78bfa; --toggle-color-dark: #7c3aed; }
.wfb-toggle-color-pink { --toggle-color: #ec4899; --toggle-color-light: #f472b6; --toggle-color-dark: #db2777; }
.wfb-toggle-color-orange { --toggle-color: #f97316; --toggle-color-light: #fb923c; --toggle-color-dark: #ea580c; }
.wfb-toggle-color-cyan { --toggle-color: #06b6d4; --toggle-color-light: #22d3ee; --toggle-color-dark: #0891b2; }
.wfb-toggle-color-red { --toggle-color: #ef4444; --toggle-color-light: #f87171; --toggle-color-dark: #dc2626; }

/* ============================================
   TOGGLE SIZES
   ============================================ */
.wfb-toggle-size-small .wfb-toggle-track { transform: scale(0.8); }
.wfb-toggle-size-large .wfb-toggle-track { transform: scale(1.25); }

/* ============================================
   TOGGLE ANIMATIONS
   ============================================ */
/* Smooth (default) */
.wfb-toggle-anim-smooth .wfb-toggle-knob,
.wfb-toggle-anim-smooth .wfb-toggle-track {
    transition: all 0.3s ease;
}

/* Bounce */
.wfb-toggle-anim-bounce .wfb-toggle-knob {
    transition: left 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wfb-toggle-anim-bounce .wfb-toggle-track {
    transition: all 0.3s ease;
}

/* Elastic */
.wfb-toggle-anim-elastic .wfb-toggle-knob {
    transition: left 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.wfb-toggle-anim-elastic .wfb-toggle-track {
    transition: all 0.3s ease;
}

/* None */
.wfb-toggle-anim-none .wfb-toggle-knob,
.wfb-toggle-anim-none .wfb-toggle-track {
    transition: none;
}

/* ============================================
   CHECKBOX STYLES (Custom styled checkboxes)
   ============================================ */

/* Base checkbox styled container */
.wfb-checkbox-styled .wfb-option-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    position: relative;
}

.wfb-checkbox-styled input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none;
}

/* Custom checkbox element */
.wfb-checkbox-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.wfb-checkbox-custom .wfb-checkbox-check {
    width: 14px;
    height: 14px;
    stroke: transparent;
    stroke-width: 3;
    transition: all 0.2s ease;
}

/* Checked state */
.wfb-checkbox-styled .wfb-option-label:has(input:checked) .wfb-checkbox-custom {
    background: var(--checkbox-color, #10b981);
    border-color: var(--checkbox-color, #10b981);
}

.wfb-checkbox-styled .wfb-option-label:has(input:checked) .wfb-checkbox-check {
    stroke: #ffffff;
}

/* ============================================
   CHECKBOX STYLE VARIATIONS
   ============================================ */

/* Default - square with slight rounding */
.checkbox-default .wfb-checkbox-custom {
    border-radius: 4px;
}

/* Rounded - more rounded corners */
.checkbox-rounded .wfb-checkbox-custom {
    border-radius: 6px;
}

/* Circle - fully rounded */
.checkbox-circle .wfb-checkbox-custom {
    border-radius: 50%;
}

/* Filled - filled background when unchecked */
.checkbox-filled .wfb-checkbox-custom {
    background: #f1f5f9;
}

.checkbox-filled .wfb-option-label:has(input:checked) .wfb-checkbox-custom {
    background: var(--checkbox-color, #10b981);
}

/* Outline - transparent background, colored check */
.checkbox-outline .wfb-checkbox-custom {
    background: transparent;
}

.checkbox-outline .wfb-option-label:has(input:checked) .wfb-checkbox-custom {
    background: transparent;
    border-color: var(--checkbox-color, #10b981);
}

.checkbox-outline .wfb-option-label:has(input:checked) .wfb-checkbox-check {
    stroke: var(--checkbox-color, #10b981);
}

/* Animated - scale effect on check */
.checkbox-animated .wfb-option-label:has(input:checked) .wfb-checkbox-custom {
    animation: checkboxPop 0.3s ease;
}

@keyframes checkboxPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Bounce - bounce effect on check */
.checkbox-bounce .wfb-option-label:has(input:checked) .wfb-checkbox-custom {
    animation: checkboxBounce 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes checkboxBounce {
    0% { transform: scale(1); }
    40% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* ============================================
   CHECKBOX COLORS
   ============================================ */
.wfb-checkbox-color-green { --checkbox-color: #10b981; }
.wfb-checkbox-color-blue { --checkbox-color: #3b82f6; }
.wfb-checkbox-color-purple { --checkbox-color: #8b5cf6; }
.wfb-checkbox-color-pink { --checkbox-color: #ec4899; }
.wfb-checkbox-color-orange { --checkbox-color: #f97316; }
.wfb-checkbox-color-cyan { --checkbox-color: #06b6d4; }
.wfb-checkbox-color-red { --checkbox-color: #ef4444; }

/* ============================================
   CHECKBOX SIZES
   ============================================ */
.wfb-checkbox-size-small .wfb-checkbox-custom {
    width: 16px;
    height: 16px;
}

.wfb-checkbox-size-small .wfb-checkbox-check {
    width: 11px;
    height: 11px;
}

.wfb-checkbox-size-large .wfb-checkbox-custom {
    width: 26px;
    height: 26px;
}

.wfb-checkbox-size-large .wfb-checkbox-check {
    width: 18px;
    height: 18px;
}

/* ============================================
   CHECKBOX ANIMATIONS (for transitions)
   ============================================ */
.wfb-checkbox-anim-smooth .wfb-checkbox-custom,
.wfb-checkbox-anim-smooth .wfb-checkbox-check {
    transition: all 0.3s ease;
}

.wfb-checkbox-anim-bounce .wfb-checkbox-custom {
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wfb-checkbox-anim-elastic .wfb-checkbox-custom {
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wfb-checkbox-anim-none .wfb-checkbox-custom,
.wfb-checkbox-anim-none .wfb-checkbox-check {
    transition: none;
}