.elementor-307 .elementor-element.elementor-element-a2b6353{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-180px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:00250px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-307 .elementor-element.elementor-element-a2b6353:not(.elementor-motion-effects-element-type-background), .elementor-307 .elementor-element.elementor-element-a2b6353 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #F5FFFF 78%, #FFFFFF 100%);}.elementor-307 .elementor-element.elementor-element-2512a12{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--border-radius:25px 25px 25px 25px;box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.15);}.elementor-307 .elementor-element.elementor-element-2512a12:not(.elementor-motion-effects-element-type-background), .elementor-307 .elementor-element.elementor-element-2512a12 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-817e15f );}.elementor-307 .elementor-element.elementor-element-9405813{--display:flex;}.elementor-307 .elementor-element.elementor-element-9405813.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-307 .elementor-element.elementor-element-b268d0e{text-align:center;}.elementor-307 .elementor-element.elementor-element-b268d0e .elementor-heading-title{color:#006A7B;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-307 .elementor-element.elementor-element-28e71ef{text-align:center;}.elementor-307 .elementor-element.elementor-element-87e1c2e .jet-form__label, .elementor-307 .elementor-element.elementor-element-87e1c2e .jet-form__desc{display:flex;justify-content:flex-start;}.elementor-307 .elementor-element.elementor-element-87e1c2e .jet-form-col{align-items:flex-start;}.elementor-307 .elementor-element.elementor-element-87e1c2e .jet-form-repeater__actions{justify-content:flex-start;}.elementor-307 .elementor-element.elementor-element-87e1c2e .jet-form-repeater__row-remove{align-self:flex-start;}.elementor-307 .elementor-element.elementor-element-87e1c2e .jet-form .jet-apb-calendar-slots__close{font-size:35px;top:10px;right:10px;}.elementor-307 .elementor-element.elementor-element-87e1c2e .jet-form__submit-wrap{justify-content:flex-start;align-items:flex-start;}.elementor-307 .elementor-element.elementor-element-87e1c2e .jet-form-message{text-align:center;}.elementor-307 .elementor-element.elementor-element-87e1c2e .jet-form__field-error, .elementor-307 .elementor-element.elementor-element-87e1c2e .jet-form .jet-engine-file-upload__errors{text-align:left;}.elementor-307 .elementor-element.elementor-element-9f2640b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-307 .elementor-element.elementor-element-ad20d3b{--display:flex;--border-radius:25px 25px 25px 25px;box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.15);--padding-top:39px;--padding-bottom:39px;--padding-left:39px;--padding-right:39px;}.elementor-307 .elementor-element.elementor-element-ad20d3b:not(.elementor-motion-effects-element-type-background), .elementor-307 .elementor-element.elementor-element-ad20d3b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-817e15f );}.elementor-307 .elementor-element.elementor-element-8bc9825{text-align:center;}.elementor-307 .elementor-element.elementor-element-8bc9825 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:32px;font-weight:600;color:var( --e-global-color-4d6f9a8 );}.elementor-307 .elementor-element.elementor-element-d465ec9{--display:flex;--border-radius:25px 25px 25px 25px;box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.15);--padding-top:39px;--padding-bottom:39px;--padding-left:39px;--padding-right:39px;}.elementor-307 .elementor-element.elementor-element-d465ec9:not(.elementor-motion-effects-element-type-background), .elementor-307 .elementor-element.elementor-element-d465ec9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-817e15f );}.elementor-307 .elementor-element.elementor-element-b967018{text-align:center;}.elementor-307 .elementor-element.elementor-element-b967018 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:32px;font-weight:600;color:var( --e-global-color-4d6f9a8 );}.elementor-307 .elementor-element.elementor-element-43e4b3b > .elementor-widget-container{border-radius:25px 25px 25px 25px;box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.22);}@media(min-width:768px){.elementor-307 .elementor-element.elementor-element-9405813{--width:100%;}}/* Start custom CSS for jet-engine-booking-form, class: .elementor-element-87e1c2e *//* --- Overall Form Container Styling (The main box around the form) --- */
/* This targets the Appointment Form widget itself. '.elementor-307 .elementor-element.elementor-element-87e1c2e' refers to the widget. */
.elementor-307 .elementor-element.elementor-element-87e1c2e {
    background-color: #ffffff; /* White background for the form box */
    border: 1px solid #e0e0e0; /* Light gray border */
    border-radius: 12px; /* Rounded corners, matching desired design */
    padding: 35px; /* Generous internal spacing */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* Stronger, softer shadow */
}

/* --- Section Headings (e.g., "Choisir une date et une heure", "Vos informations") --- */
/* These usually get a generic class from JetFormBuilder/JetAppointments */
.jet-apb-field-group__label, /* Common class for group labels */
.jet-form-block__title { /* Another common class for section titles within JetEngine Forms */
    font-family: 'Arial', sans-serif; /* Replace with your desired font */
    color: #333333;
    font-size: 24px; /* Larger heading size */
    font-weight: 700; /* Bolder */
    margin-bottom: 25px;
    padding-bottom: 15px; /* Space before the divider line */
    border-bottom: 1px solid #f0f0f0; /* Light divider line */
}

/* Specific margins for the section groups to separate them well */
.jet-apb-field-group {
    margin-bottom: 30px;
}

/* --- General Input Fields Styling (Nom complet, Email, Tel) --- */

/* Targets the actual input elements within your custom classes, excluding the special 'Informations supplémentaires' */
.form-field-name input,
.form-field-email input,
.form-field-phone input {
    width: 100%;
    padding: 14px 18px; /* More padding for a taller, softer look */
    margin-bottom: 20px; /* Increased space between fields */
    border: 1px solid #cccccc; /* Standard light grey border */
    border-radius: 8px; /* More rounded input fields */
    font-size: 16px;
    font-family: 'Arial', sans-serif; /* Your preferred font */
    color: #444444; /* Darker text for readability */
    background-color: #f9f9f9; /* Slightly off-white background */
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Focus state for general input fields */
.form-field-name input:focus,
.form-field-email input:focus,
.form-field-phone input:focus {
    border-color: #006A7B; /* Your brand color for focus */
    box-shadow: 0 0 0 3px rgba(0, 106, 123, 0.25); /* Subtle glow with brand color */
    outline: none; /* Remove default browser outline */
    background-color: #ffffff; /* White background when focused */
}

/* Labels for input fields (Nom complet, Adresse e-mail, etc.) */
/* This targets labels that are children of your custom field classes */
.form-field-name .jet-form__label,
.form-field-email .jet-form__label,
.form-field-phone .jet-form__label,
.form-field-additional-info .jet-form__label, /* Kept for the Information supplémentaire label */
.form-field-date-picker .jet-form__label,
.form-field-time-picker .jet-form__label,
.form-field-session-type .jet-form__label {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #555555;
    margin-bottom: 10px; /* Space between label and input */
    display: block; /* Ensures label is on its own line */
    font-weight: 600; /* Bolder labels */
}

/* --- SIMPLE FIX for 'Informations supplémentaires' (INPUT type="text" acting as textarea) --- */

/* Targets the input directly using its classes */
.form-field-additional-info .jet-form__field.text-field {
    /* Basic styling from before */
    width: 100% !important;
    border: 1px solid #cccccc !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-family: 'Arial', sans-serif !important;
    color: #444444 !important;
    background-color: #f9f9f9 !important;
    min-height: 55px !important; /* Makes it tall - Corrected value */
    resize: vertical !important; /* Allows resizing */
    box-sizing: border-box !important; /* Important for padding */

    /* KEY CHANGES FOR PLACEHOLDER ALIGNMENT & TEXT BEHAVIOR */
    padding-top: 0px !important; /* Increase top padding to push text down */
    padding-bottom: 0px !important; /* Increase bottom padding */
    padding-left: 18px !important; /* Keep horizontal padding */
    padding-right: 18px !important; /* Keep horizontal padding */
    vertical-align: top !important; /* Ensure text starts at the top of the padded area */
    line-height: 1.5 !important; /* Ensures proper line spacing for wrapped text */
    white-space: pre-wrap !important; /* Allows text to wrap like a textarea */
    word-wrap: break-word !important; /* Breaks long words if needed */
    text-align: left !important; /* Ensure text is left-aligned */
    margin-bottom: 20px !important; /* Consistent margin below field */
}

/* Focus state for the 'Informations supplémentaires' input */
.form-field-additional-info .jet-form__field.text-field:focus {
    border-color: #006A7B !important;
    box-shadow: 0 0 0 3px rgba(0, 106, 123, 0.25) !important;
    outline: none !important;
    background-color: #ffffff !important;
}


/* --- Calendar (Date du rendez-vous) Styling - Consolidated & Refined --- */

/* Overall container for the date picker field. Ensure 'form-field-date-picker' is on the main field wrapper. */
.form-field-date-picker {
    margin-bottom: 25px; /* Spacing below the entire date/time picker */
}

/* Main Calendar Container (the white box around the calendar grid) */
/* Using the classes from your inspector: .appointment-calendar, .jet-apb-calendar */
.form-field-date-picker .appointment-calendar.jet-apb-calendar {
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    padding: 10px !important; /* Add internal padding to separate from edges */
    box-sizing: border-box !important; /* Ensure padding is included in dimensions */
}

/* Calendar Header (Month/Year display and navigation arrows) */
.form-field-date-picker .jet-apb-calendar__header {
    background-color: #f0f0f0 !important; /* Lighter background for header */
    padding: 12px 15px !important; /* Slightly less padding */
    border-bottom: 1px solid #e0e0e0 !important;
    text-align: center !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 10px !important; /* Space between header and days grid */
    border-radius: 8px 8px 0 0 !important; /* Match border-radius of parent if possible */
}

/* Month/Year title in the calendar header */
.form-field-date-picker .jet-apb-calendar__title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    flex-grow: 1 !important;
    text-align: center !important;
}

/* Navigation arrows (Previous/Next Month) */
.form-field-date-picker .jet-apb-calendar__arrow {
    color: #006A7B !important;
    font-size: 24px !important;
    cursor: pointer !important;
    padding: 5px !important;
    transition: color 0.3s ease !important;
}

.form-field-date-picker .jet-apb-calendar__arrow:hover {
    color: #00596B !important;
}

/* Weekday names (Mon, Tue, Wed, etc.) */
.form-field-date-picker .jet-apb-calendar__weekdays-row { /* This is often the row containing weekdays */
    display: flex !important;
    justify-content: space-around !important;
    margin-bottom: 5px !important;
}
.form-field-date-picker .jet-apb-calendar__weekday {
    color: #666666 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    flex-basis: calc(100% / 7) !important; /* Distribute evenly */
    text-align: center !important;
    padding: 5px 0 !important;
}


/* Calendar grid container (where days are, usually .vc-container .vc-weeks for V-Calendar) */
/* This often needs to be targeted via its internal wrapper */
.form-field-date-picker .jet-apb-calendar__days { /* Or .vc-container .vc-weeks if that's more specific */
    padding: 0px !important; /* No padding on the main grid wrapper itself */
}

/* Individual calendar day cells (general styling) */
.form-field-date-picker .vc-day,
.form-field-date-picker .jet-apb-calendar__day { /* Targeting both common classes */
    padding: 8px !important;
    font-size: 15px !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 34px !important; /* Slightly larger to give more space */
    height: 34px !important; /* Make cells consistently square */
    margin: 2px auto !important; /* Center days within their grid cell */
    transition: background-color 0.3s ease, color 0.3s ease, border-radius 0.3s ease !important;
    cursor: pointer !important; /* Indicate clickable */
}

/* Day numbers (the actual number inside the day cell) */
.form-field-date-picker .vc-day span,
.form-field-date-picker .jet-apb-calendar__day span {
    font-weight: normal !important;
    color: #333333 !important;
}

/* Days that are not in the current month */
.form-field-date-picker .vc-day.vc-day-outside-month,
.form-field-date-picker .jet-apb-calendar__day.outside-month {
    color: #aaaaaa !important;
    opacity: 0.7 !important;
    cursor: default !important; /* Not clickable if outside month */
}

/* Disabled days (e.g., past days, unavailable slots) */
.form-field-date-picker .vc-day.vc-day-disabled,
.form-field-date-picker .jet-apb-calendar__day.day-disabled {
    color: #cccccc !important;
    cursor: not-allowed !important;
    background-color: transparent !important;
    opacity: 0.6 !important;
}

/* Hover effect for clickable days (not selected, not disabled, not outside month) */
.form-field-date-picker .vc-day:not(.vc-day-disabled):not(.is-selected):not(.vc-day-outside-month):hover,
.form-field-date-picker .jet-apb-calendar__day:not(.day-disabled):not(.is-selected):not(.outside-month):hover {
    background-color: #E0F4F7 !important; /* Very light brand color background on hover */
    border-radius: 50% !important; /* Circular hover effect */
}

/* Current day (today's date) - if not selected */
.form-field-date-picker .vc-day.vc-day-today:not(.is-selected),
.form-field-date-picker .jet-apb-calendar__day.current-date:not(.is-selected) {
    border: 1px solid #006A7B !important; /* Border for today's date */
    border-radius: 50% !important;
    color: #006A7B !important;
    font-weight: 600 !important;
}

/* Currently selected day */
.form-field-date-picker .vc-day.is-selected,
.form-field-date-picker .jet-apb-calendar__day.is-selected {
    background-color: #006A7B !important; /* Your brand color for selected day */
    color: #ffffff !important; /* White text for selected day */
    border-radius: 50% !important; /* Circular selection */
    font-weight: 600 !important;
    box-shadow: 0 2px 5px rgba(0, 106, 123, 0.3) !important; /* Subtle shadow for selected day */
}

/* Ensure selected day's text color is white even if spanned */
.form-field-date-picker .vc-day.is-selected span,
.form-field-date-picker .jet-apb-calendar__day.is-selected span {
    color: #ffffff !important;
}


/* --- Re-Attempting Time Slots (Heure du rendez-vous) Styling for Forced Sidebar Layout --- */

/* Force the calendar and slots to display side-by-side */
.appointment-calendar.jet-apb-calendar.jet-apb-calendar-layout--sidebar-slots {
    display: flex !important; /* IMPORTANT: Force flex display */
    flex-direction: row !important; /* Ensure they are in a row */
    align-items: flex-start !important; /* Align to the top */
    gap: 20px !important; /* Space between calendar and slots */
    padding: 0 !important; /* Remove internal padding on this container if it exists */
    border: none !important; /* Remove border from this container as individual parts will have them */
    box-shadow: none !important; /* Remove shadow from this container */
    background-color: transparent !important; /* Remove background from this container */
}

/* Style the main calendar part when it's part of the flex container */
.appointment-calendar.jet-apb-calendar.jet-apb-calendar-layout--sidebar-slots .jet-apb-calendar__body {
    flex: 1 !important; /* Allow calendar body to take primary space */
    max-width: 450px !important; /* Give it a reasonable max width */
    min-width: 280px !important; /* Ensure it doesn't get too small */
    /* Re-add overall calendar box styling here, as it was removed from parent */
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}

/* Hide the default time slot display within the calendar body */
/* This is crucial if the plugin still renders them horizontally inside the calendar */
.jet-apb-calendar-layout--sidebar-slots .jet-apb-calendar__body .jet-apb-slot-wrapper,
.jet-apb-calendar-layout--sidebar-slots .jet-apb-calendar__body .jet-apb-time-slots {
    display: none !important; /* HIDE THE INCORRECT INLINE SLOTS */
}

/* Sidebar container for the time slots */
.jet-apb-calendar-sidebar { /* This is the main sidebar element */
    flex-basis: 200px !important; /* Fixed width for the sidebar */
    flex-shrink: 0 !important; /* Prevent it from shrinking */
    padding: 15px !important; /* Internal padding */
    background-color: #f8f8f8 !important; /* Subtle background */
    border: 1px solid #e0e0e0 !important; /* Border around the sidebar */
    border-radius: 10px !important; /* Rounded corners */
    max-height: 400px !important; /* Control max height */
    overflow-y: auto !important; /* Add scroll if content exceeds max height */
    box-sizing: border-box !important; /* Include padding/border in width */
    margin-left: 20px !important; /* Ensure separation from calendar */
}

/* Container directly holding the time slot items */
/* Based on image_1932fa.png, this might be jet-apb-calendar-slots-container, or slots might be direct children of jet-apb-calendar-sidebar.
   I'm targeting the direct wrapper for flex display. */
.jet-apb-calendar-sidebar .jet-apb-calendar-slots-container {
    display: flex !important;
    flex-direction: column !important; /* Stack slots vertically */
    gap: 10px !important; /* Space between each time slot */
}


/* Individual time slot item styling */
.jet-apb-slot-wrapper {
    background-color: #ffffff !important; /* White background for slots */
    border: 1px solid #006A7B !important; /* Your brand color border */
    border-radius: 8px !important; /* Rounded corners for the time slot box */
    padding: 12px 18px !important; /* Padding inside the slot */
    cursor: pointer !important;
    transition: all 0.3s ease-in-out !important;
    font-size: 16px !important;
    color: #333333 !important;
    font-weight: 500 !important;
    text-align: center !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important; /* Subtle shadow */
    box-sizing: border-box !important; /* Ensure padding/border included in width */
    width: 100% !important; /* Make it take full width of its container */
    display: flex !important; /* Use flex to center content */
    justify-content: center !important; /* Center horizontally */
    align-items: center !important; /* Center vertically */
    height: auto !important; /* Allow height to adjust */
}

/* Remove margin from the last slot item if column layout */
.jet-apb-slot-wrapper:last-child {
    margin-bottom: 0 !important;
}

.jet-apb-slot-wrapper:hover {
    background-color: #E0F4F7 !important; /* Lighter brand color on hover */
    color: #00596B !important; /* Darker brand color text on hover */
    box-shadow: 0 4px 8px rgba(0, 106, 123, 0.1) !important;
}

.jet-apb-slot-wrapper.active { /* Selected time slot */
    background-color: #006A7B !important; /* Brand color background when selected */
    color: #ffffff !important;
    border-color: #006A7B !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 10px rgba(0, 106, 123, 0.3) !important; /* Stronger shadow for active */
}


/* --- Radio Buttons (Type de session: En ligne / En présentiel) --- */
/* Target the radio field container itself with your custom class */
.form-field-session-type {
    margin-top: 25px;
    margin-bottom: 25px;
}

.form-field-session-type .jet-form__radio-wrap {
    display: flex;
    gap: 25px;
    margin-top: 10px;
}

.form-field-session-type .jet-form__radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.form-field-session-type .jet-form__radio-label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    font-size: 16px;
    color: #444444;
    font-weight: 500;
    line-height: 20px;
}

/* Custom Radio Circle (Unchecked state) */
.form-field-session-type .jet-form__radio-label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    background: #fff;
    transition: all 0.3s ease;
}

/* Custom Radio Circle (Checked state) */
.form-field-session-type .jet-form__radio-input:checked + .jet-form__radio-label:before {
    background-color: #006A7B; /* Brand color fill when checked */
    border-color: #006A7B;
}

/* Inner dot for checked state */
.form-field-session-type .jet-form__radio-input:checked + .jet-form__radio-label:after {
    content: '';
    position: absolute;
    left: 6px;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    transition: all 0.3s ease;
}

/* --- Submit Button ("Demander un rendez-vous") --- */
/* Target the submit button with its custom class */
.form-submit-button .jet-form__submit {
    background-color: #006A7B; /* Your brand color for button */
    color: #ffffff;
    padding: 16px 30px;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
    width: 100%;
    margin-top: 30px;
    box-shadow: 0 4px 10px rgba(0, 106, 123, 0.3); /* Shadow with brand color */
}

.form-submit-button .jet-form__submit:hover {
    background-color: #00596B; /* Darker brand color on hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 106, 123, 0.4);
}

/* --- Information Text below Submit Button --- */
/* (This class might vary, inspect on live page if it doesn't work) */
.jet-form-response {
    text-align: center;
    font-size: 14px;
    color: #666666;
    margin-top: 15px;
    line-height: 1.4;
}


/* --- Styling for the "Tarifs" Box (Right Column) --- */
/* Apply 'tarifs-box' as a custom CSS class to your Elementor Column in Advanced > CSS Classes */
.tarifs-box {
    background-color: #fbfbfb; /* Lighter background for tariffs box */
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.tarifs-box h3 {
    font-family: 'Arial', sans-serif;
    color: #333333;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 25px;
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.tarifs-option-item { /* Assign this class to individual options within the tariffs box (e.g., a div or inner section) */
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tarifs-option-item:hover {
    border-color: #006A7B; /* Your brand color on hover */
    box-shadow: 0 2px 8px rgba(0, 106, 123, 0.1); /* Shadow with brand color */
}

.tarifs-option-item .option-text {
    font-family: 'Arial', sans-serif;
    font-size: 17px;
    color: #444444;
    font-weight: 600;
    line-height: 1.4;
    flex-grow: 1;
}

.tarifs-option-item .option-price {
    font-size: 20px;
    font-weight: 700;
    color: #006A7B; /* Your brand color for price */
    margin-left: 15px;
    flex-shrink: 0;
}

/* Style for selected tariff option - requires JS to add 'selected' class */
.tarifs-option-item.selected {
    background-color: #E0F4F7; /* Light brand color background when selected */
    border-color: #006A7B;
    box-shadow: 0 4px 12px rgba(0, 106, 123, 0.2);
}

/* --- Responsive Adjustments --- */
@media (max-width: 991px) { /* Tablet breakpoint */
    .elementor-container, .elementor-row {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .tarifs-box {
        margin-left: 0;
        margin-top: 30px;
    }
    /* Responsive adjustments for calendar and sidebar */
    .appointment-calendar.jet-apb-calendar.jet-apb-calendar-layout--sidebar-slots {
        flex-direction: column !important; /* Stack calendar and sidebar vertically on tablets */
        gap: 0 !important; /* Remove gap */
        padding: 0 !important; /* Remove padding */
    }
    .appointment-calendar.jet-apb-calendar.jet-apb-calendar-layout--sidebar-slots .jet-apb-calendar__body {
        max-width: unset !important; /* Remove max-width on tablet to allow full width */
        margin-bottom: 20px !important; /* Add space below calendar */
        border-bottom-left-radius: 0 !important; /* Adjust border radius for stacking */
        border-bottom-right-radius: 0 !important;
    }
    .jet-apb-calendar-sidebar {
        margin-left: 0 !important; /* Remove left margin */
        border-top: 1px solid #e0e0e0 !important; /* Add top border for separation */
        border-left: none !important; /* Remove left border */
        border-radius: 0 0 10px 10px !important; /* Adjust border radius for bottom */
        max-height: unset !important; /* Remove max height constraint */
        overflow-y: unset !important; /* Remove scroll */
        flex-basis: auto !important; /* Allow height to adjust */
        padding-top: 20px !important; /* Add more padding at top */
    }
    .jet-apb-calendar-sidebar .jet-apb-calendar-slots-container {
        flex-direction: row !important; /* Arrange slots horizontally in wrap */
        flex-wrap: wrap !important;
        justify-content: center !important; /* Center horizontally */
        gap: 10px !important; /* Gap between slots */
    }
    .jet-apb-slot-wrapper {
        flex-grow: 1 !important; /* Allow slots to grow and fill space */
        min-width: 120px !important; /* Minimum width for slots */
        max-width: calc(50% - 5px) !important; /* Two columns with gap */
        margin-bottom: 0 !important; /* Remove vertical margin if gap is used */
    }
}

@media (max-width: 767px) { /* Mobile breakpoint */
    .elementor-307 .elementor-element.elementor-element-87e1c2e {
        padding: 20px;
    }
    .jet-apb-field-group__label,
    .jet-form-block__title {
        font-size: 20px;
    }
    .form-field-name input,
    .form-field-email input,
    .form-field-phone input,
    .form-field-additional-info .jet-form__field.text-field, /* Corrected for the text field */
    .form-submit-button .jet-form__submit {
        font-size: 15px;
        padding: 12px 15px;
    }
    .tarifs-box {
        padding: 20px;
    }
    .tarifs-box h3 {
        font-size: 20px;
    }
    .tarifs-option-item .option-text {
        font-size: 16px;
    }
    .tarifs-option-item .option-price {
        font-size: 18px;
    }
    /* Mobile specific adjustments for time slots */
    .jet-apb-calendar-sidebar .jet-apb-calendar-slots-container {
        justify-content: flex-start !important; /* Align to start on smaller mobile */
        gap: 8px !important;
    }
    .jet-apb-slot-wrapper {
        max-width: calc(100% - 8px) !important; /* One column on very small mobile */
        padding: 10px 15px !important;
        font-size: 15px !important;
    }
}/* End custom CSS */