/* JCR Booking Plugin - Frontend Styles (Elementor Compatible) */

.jcr-booking-form-container {
    max-width: 600px;
    margin: 20px auto;
    padding: 0 20px;
}

.jcr-booking-form {
    background: var(--e-global-color-background, #ffffff);
    padding: 40px;
    border: 1px solid var(--e-global-color-border, #e0e0e0);
    border-radius: var(--e-global-radius, 8px);
    box-shadow: var(--e-global-box-shadow, 0 2px 10px rgba(0, 0, 0, 0.1));
    font-family: var(--e-global-typography-text-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

.jcr-booking-form h2 {
    margin-top: 0;
    margin-bottom: 30px;
    color: var(--e-global-color-text, #1d2327);
    font-size: var(--e-global-typography-primary-font-size, 24px);
    font-weight: var(--e-global-typography-primary-font-weight, 600);
    font-family: var(--e-global-typography-primary-font-family, inherit);
    line-height: var(--e-global-typography-primary-line-height, 1.3);
}

.jcr-form-group {
    margin-bottom: 20px;
}

.jcr-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: var(--e-global-typography-text-font-weight, 600);
    color: var(--e-global-color-text, #1d2327);
    font-size: var(--e-global-typography-text-font-size, 14px);
    font-family: var(--e-global-typography-text-font-family, inherit);
    line-height: var(--e-global-typography-text-line-height, 1.3);
}

.jcr-form-group .required {
    color: var(--e-global-color-accent, #d63638);
    font-weight: 400;
}

.jcr-form-group input[type="text"],
.jcr-form-group input[type="email"],
.jcr-form-group input[type="date"],
.jcr-form-group input[type="time"],
.jcr-form-group select,
.jcr-form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--e-global-color-border, #e0e0e0);
    border-radius: var(--e-global-radius, 4px);
    font-size: var(--e-global-typography-text-font-size, 14px);
    color: var(--e-global-color-text, #2c3338);
    background-color: var(--e-global-color-background, #ffffff);
    transition: all 0.3s ease;
    line-height: 1.4;
    box-sizing: border-box;
    font-family: var(--e-global-typography-text-font-family, inherit);
}

.jcr-form-group input:focus,
.jcr-form-group select:focus,
.jcr-form-group textarea:focus {
    outline: none;
    border-color: var(--e-global-color-primary, #007cba);
    box-shadow: 0 0 0 2px rgba(var(--e-global-color-primary-rgb, 0, 124, 186), 0.1);
}

.jcr-form-group input.error,
.jcr-form-group select.error,
.jcr-form-group textarea.error {
    border-color: var(--e-global-color-accent, #d63638);
    box-shadow: 0 0 0 2px rgba(var(--e-global-color-accent-rgb, 214, 54, 56), 0.1);
}

.jcr-form-group textarea {
    resize: vertical;
    min-height: 120px;
    font-family: var(--e-global-typography-text-font-family, inherit);
}

/* Checkbox Styles */
.jcr-section-label {
    display: block;
    margin-bottom: 12px;
    font-weight: var(--e-global-typography-text-font-weight, 600);
    color: var(--e-global-color-text, #1d2327);
    font-size: var(--e-global-typography-text-font-size, 14px);
    font-family: var(--e-global-typography-text-font-family, inherit);
}

.jcr-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jcr-checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.jcr-checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--e-global-color-primary, #007cba);
    cursor: pointer;
}

.jcr-checkbox-label {
    margin: 0;
    font-weight: 400;
    color: var(--e-global-color-text, #2c3338);
    font-size: var(--e-global-typography-text-font-size, 14px);
    line-height: 1.4;
    cursor: pointer;
    font-family: var(--e-global-typography-text-font-family, inherit);
}

.jcr-checkbox-label:hover {
    color: var(--e-global-color-primary, #007cba);
}

/* Time Selection Styles */
.time-range-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 15px;
}

.time-input-group {
    display: flex;
    flex-direction: column;
}

.time-input-group label {
    font-size: 13px;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--e-global-color-secondary, #50575e);
}

.availability-info {
    background-color: var(--e-global-color-background-light, #f6f7f7);
    border: 1px solid var(--e-global-color-border, #e0e0e0);
    border-radius: var(--e-global-radius, 4px);
    padding: 20px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--e-global-color-text, #2c3338);
    margin-top: 10px;
}

.availability-info .operating-hours {
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--e-global-color-text, #1d2327);
    padding: 12px 16px;
    background-color: var(--e-global-color-background, #ffffff);
    border-radius: var(--e-global-radius, 4px);
    border: 1px solid var(--e-global-color-border-light, #dcdcde);
}

.availability-info .existing-bookings {
    margin-top: 15px;
}

.availability-info .existing-bookings strong {
    color: var(--e-global-color-text, #1d2327);
    display: block;
    margin-bottom: 10px;
}

.availability-info .existing-bookings ul {
    margin: 0 0 0 20px;
    padding: 0;
    list-style-type: disc;
}

.availability-info .existing-bookings li {
    margin-bottom: 6px;
    color: var(--e-global-color-secondary, #50575e);
    padding: 4px 0;
}

.availability-info .no-bookings {
    color: var(--e-global-color-success, #00a32a);
    font-style: italic;
    font-weight: 500;
}

.jcr-submit-btn {
    background: var(--e-global-color-primary, #007cba);
    border: 1px solid var(--e-global-color-primary, #007cba);
    color: var(--e-global-color-background, #ffffff);
    border-radius: var(--e-global-radius, 4px);
    padding: 12px 24px;
    font-size: var(--e-global-typography-accent-font-size, 16px);
    font-weight: var(--e-global-typography-accent-font-weight, 600);
    font-family: var(--e-global-typography-accent-font-family, inherit);
    line-height: 1.5;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    margin: 0;
    transition: all 0.3s ease;
    min-height: auto;
    appearance: none;
    text-transform: var(--e-global-typography-accent-text-transform, none);
    letter-spacing: var(--e-global-typography-accent-letter-spacing, normal);
}

.jcr-submit-btn:hover {
    background: var(--e-global-color-primary-hover, #005a87);
    border-color: var(--e-global-color-primary-hover, #005a87);
    color: var(--e-global-color-background, #ffffff);
    transform: translateY(-1px);
}

.jcr-submit-btn:focus {
    background: var(--e-global-color-primary-hover, #005a87);
    border-color: var(--e-global-color-primary-hover, #005a87);
    color: var(--e-global-color-background, #ffffff);
    box-shadow: 0 0 0 2px rgba(var(--e-global-color-primary-rgb, 0, 124, 186), 0.3);
    outline: none;
}

.jcr-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.jcr-message {
    margin-top: 20px;
    padding: 16px 20px;
    border-radius: var(--e-global-radius, 4px);
    display: none;
    border-left: 4px solid;
    font-family: var(--e-global-typography-text-font-family, inherit);
}

.jcr-message.success {
    background-color: var(--e-global-color-success-light, #edfaef);
    color: var(--e-global-color-success, #00a32a);
    border-left-color: var(--e-global-color-success, #00a32a);
    border: 1px solid var(--e-global-color-success-light, #c6e9c9);
    display: block;
}

.jcr-message.error {
    background-color: var(--e-global-color-accent-light, #fcf0f1);
    color: var(--e-global-color-accent, #d63638);
    border-left-color: var(--e-global-color-accent, #d63638);
    border: 1px solid var(--e-global-color-accent-light, #f1adad);
    display: block;
}

.jcr-loading {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--e-global-color-border, #e0e0e0);
    border-top: 2px solid var(--e-global-color-primary, #007cba);
    border-radius: 50%;
    animation: jcr-spin 1s linear infinite;
    margin-left: 10px;
    vertical-align: middle;
}

@keyframes jcr-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Elementor-style form layout */
.jcr-form-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.jcr-form-row .jcr-form-group {
    flex: 1;
}

/* Responsive Design */
@media (max-width: 767px) {
    .jcr-booking-form-container {
        padding: 10px;
    }
    
    .jcr-booking-form {
        padding: 30px 20px;
    }
    
    .time-range-inputs {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .jcr-form-row {
        flex-direction: column;
        gap: 0;
    }
    
    .jcr-submit-btn {
        width: 100%;
        padding: 15px;
        font-size: 16px;
    }
}

/* Elementor responsive breakpoint */
@media (max-width: 1024px) {
    .jcr-booking-form {
        padding: 35px 25px;
    }
}

/* Input focus states matching Elementor */
.jcr-form-group input[type="text"]:focus,
.jcr-form-group input[type="email"]:focus,
.jcr-form-group input[type="date"]:focus,
.jcr-form-group input[type="time"]:focus,
.jcr-form-group select:focus,
.jcr-form-group textarea:focus {
    border-color: var(--e-global-color-primary, #007cba);
    box-shadow: 0 0 0 2px rgba(var(--e-global-color-primary-rgb, 0, 124, 186), 0.1);
}

/* Custom select styling to match Elementor */
.jcr-form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

/* Date and time picker styling */
input[type="date"],
input[type="time"] {
    position: relative;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    margin-left: 8px;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Accessibility improvements */
.jcr-form-group input:focus,
.jcr-form-group select:focus,
.jcr-form-group textarea:focus {
    outline: 2px solid transparent;
    outline-offset: -2px;
}

/* Form validation styling */
.jcr-form-group .field-error {
    color: var(--e-global-color-accent, #d63638);
    font-size: 12px;
    margin-top: 6px;
    display: block;
}

/* Loading state styling */
.jcr-submit-btn.loading {
    position: relative;
    color: transparent;
}

.jcr-submit-btn.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: jcr-spin 1s linear infinite;
}

/* Elementor Widget Compatibility */
.elementor-widget-container .jcr-booking-form-container {
    margin: 0;
    padding: 0;
}

.elementor-widget-container .jcr-booking-form {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

.elementor-widget-container .jcr-booking-form h2 {
    margin-bottom: 20px;
}

/* Dark theme support - Comprehensive night mode enhancements */
@media (prefers-color-scheme: dark) {
    /* Main form container */
    .jcr-booking-form {
        background: var(--e-global-color-background-dark, #1e1e1e);
        border-color: var(--e-global-color-border-dark, #404040);
        box-shadow: var(--e-global-box-shadow-dark, 0 2px 10px rgba(0, 0, 0, 0.3));
    }
    
    /* Headings and labels */
    .jcr-booking-form h2,
    .jcr-form-group label,
    .jcr-section-label {
        color: var(--e-global-color-text-dark, #f0f0f0) !important;
    }
    
    /* Form inputs */
    .jcr-form-group input[type="text"],
    .jcr-form-group input[type="email"],
    .jcr-form-group input[type="date"],
    .jcr-form-group input[type="time"],
    .jcr-form-group select,
    .jcr-form-group textarea {
        background-color: var(--e-global-color-background-dark, #2a2a2a);
        border-color: var(--e-global-color-border-dark, #505050);
        color: var(--e-global-color-text-dark, #f0f0f0);
    }
    
    /* Input focus states */
    .jcr-form-group input:focus,
    .jcr-form-group select:focus,
    .jcr-form-group textarea:focus {
        border-color: var(--e-global-color-primary, #4a9eff);
        box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.2);
    }
    
    /* Input placeholders */
    .jcr-form-group input::placeholder,
    .jcr-form-group textarea::placeholder {
        color: #999999;
        opacity: 1;
    }
    
    /* Checkbox styling */
    .jcr-checkbox-label {
        color: var(--e-global-color-text-dark, #e0e0e0) !important;
    }
    
    .jcr-checkbox-label:hover {
        color: var(--e-global-color-primary, #4a9eff) !important;
    }
    
    /* Time input group labels */
    .time-input-group label {
        color: var(--e-global-color-secondary-dark, #c0c0c0) !important;
    }
    
    /* Availability info section */
    .availability-info {
        background-color: var(--e-global-color-background-light-dark, #2a2a2a);
        border-color: var(--e-global-color-border-dark, #505050);
        color: var(--e-global-color-text-dark, #e0e0e0);
    }
    
    .availability-info .operating-hours {
        background-color: var(--e-global-color-background-dark, #1e1e1e);
        border-color: var(--e-global-color-border-light-dark, #404040);
        color: var(--e-global-color-text-dark, #f0f0f0);
    }
    
    .availability-info .existing-bookings strong {
        color: var(--e-global-color-text-dark, #f0f0f0);
    }
    
    .availability-info .existing-bookings li {
        color: var(--e-global-color-secondary-dark, #c0c0c0);
    }
    
    .availability-info .no-bookings {
        color: var(--e-global-color-success-dark, #4ade80);
    }
    
    /* Button styling */
    .jcr-submit-btn {
        background: var(--e-global-color-primary, #4a9eff);
        border-color: var(--e-global-color-primary, #4a9eff);
        color: var(--e-global-color-background-dark, #ffffff);
    }
    
    .jcr-submit-btn:hover {
        background: var(--e-global-color-primary-hover, #3b82f6);
        border-color: var(--e-global-color-primary-hover, #3b82f6);
    }
    
    .jcr-submit-btn:focus {
        background: var(--e-global-color-primary-hover, #3b82f6);
        border-color: var(--e-global-color-primary-hover, #3b82f6);
        box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.3);
    }
    
    /* Success and error messages */
    .jcr-message.success {
        background-color: var(--e-global-color-success-light-dark, #1a4d1a);
        color: var(--e-global-color-success-dark, #4ade80);
        border-color: var(--e-global-color-success-dark, #4ade80);
        border-left-color: var(--e-global-color-success-dark, #4ade80);
    }
    
    .jcr-message.error {
        background-color: var(--e-global-color-accent-light-dark, #4d1a1a);
        color: var(--e-global-color-accent-dark, #f87171);
        border-color: var(--e-global-color-accent-dark, #f87171);
        border-left-color: var(--e-global-color-accent-dark, #f87171);
    }
    
    /* Required field indicator */
    .jcr-form-group .required {
        color: var(--e-global-color-accent-dark, #f87171);
    }
    
    /* Field error messages */
    .jcr-form-group .field-error {
        color: var(--e-global-color-accent-dark, #f87171);
    }
    
    /* Error state inputs */
    .jcr-form-group input.error,
    .jcr-form-group select.error,
    .jcr-form-group textarea.error {
        border-color: var(--e-global-color-accent-dark, #f87171);
        box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.2);
    }
    
    /* Loading spinner */
    .jcr-loading {
        border-color: var(--e-global-color-border-dark, #505050);
        border-top-color: var(--e-global-color-primary, #4a9eff);
    }
    
    /* Select dropdown arrow */
    .jcr-form-group select {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    }
    
    /* Date and time picker indicators */
    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="time"]::-webkit-calendar-picker-indicator {
        filter: invert(1);
    }
}