.elementor-9560 .elementor-element.elementor-element-43bf2bb{--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;}.elementor-9560 .elementor-element.elementor-element-97f5a3c{margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;}/* Start custom CSS for shortcode, class: .elementor-element-97f5a3c *//* -------------------------------------------------------------------------
   Gravity Forms Appointment Add-on Calendar Styling
   This CSS targets specific classes used by the Appointment Add-on to
   provide a modern, responsive, and intuitive scheduling interface.
   ------------------------------------------------------------------------- */

/* --- 1. General Calendar Container & Responsive Setup --- */

/* Ensures the calendar component is visually distinct and centered */
.gform_appointment_calendar_wrapper {
    max-width: 750px;
    margin: 30px auto;
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    font-family: 'Inter', sans-serif;
}

/* --- 2. Calendar Header & Navigation Styling --- */

/* Style the main header section (Month/Year display) */
.gform_appointment_calendar_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

/* Style the month/year title */
.gform_appointment_calendar_header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin: 0;
}

/* Style navigation buttons (Prev/Next month) */
.gform_appointment_calendar_nav button {
    background: none;
    border: none;
    color: #007bff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s ease;
    padding: 5px;
    border-radius: 4px;
}

.gform_appointment_calendar_nav button:hover {
    color: #0056b3;
    background-color: #f0f0f0;
}

/* --- 3. Weekday Headers and Calendar Grid --- */

/* Style the day names (Sun, Mon, Tue, etc.) */
.gform_appointment_calendar_day_names {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: 600;
    color: #666;
    margin-bottom: 5px;
}

/* Style the main date grid */
.gform_appointment_calendar_grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

/* --- 4. Individual Date Cell Styling (Crucial for interaction) --- */

.gform_appointment_calendar_date {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
}

/* Style for dates that are not available (e.g., past dates, blocked) */
.gform_appointment_calendar_date.unavailable {
    color: #ccc;
    background: #f9f9f9;
    cursor: default;
}

/* Style for available dates (interactive) */
.gform_appointment_calendar_date.available {
    background-color: #e6f0ff; /* Light blue background for available days */
    color: #007bff;
}

.gform_appointment_calendar_date.available:hover {
    background-color: #cce0ff;
    color: #0056b3;
}

/* Style for the currently selected date */
.gform_appointment_calendar_date.selected {
    background-color: #007bff !important; /* Primary blue */
    color: #ffffff !important;
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

/* Style for dates from the previous/next month */
.gform_appointment_calendar_date.off-month {
    color: #aaa;
    background: none;
}

/* --- 5. Time Slot Selection Styling --- */

/* Title for time slots */
.gform_appointment_times_title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #333;
    margin-top: 30px;
    margin-bottom: 15px;
    padding-top: 15px;
    border-top: 1px dashed #e0e0e0;
}

/* Container for all time slots */
.gform_appointment_times_grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Individual time slot button */
.gform_appointment_time_slot {
    flex-grow: 1; /* Allows slots to expand within the container */
    max-width: 150px;
    min-width: 100px;
    padding: 10px 15px;
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
    font-weight: 500;
    color: #444;
    transition: all 0.2s ease;
}

.gform_appointment_time_slot:hover {
    background-color: #e0f0ff;
    border-color: #007bff;
    color: #007bff;
}

/* Style for the currently selected time slot */
.gform_appointment_time_slot.selected {
    background-color: #28a745; /* Success green */
    color: #ffffff;
    border-color: #28a745;
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}


/* --- 6. Mobile Responsiveness --- */

@media (max-width: 600px) {
    .gform_appointment_calendar_wrapper {
        padding: 15px;
        margin: 10px;
    }

    .gform_appointment_calendar_header {
        flex-direction: column;
        text-align: center;
    }

    .gform_appointment_calendar_header h2 {
        font-size: 1.3rem;
        margin-bottom: 10px;
    }

    .gform_appointment_calendar_day_names {
        font-size: 0.75rem;
    }

    .gform_appointment_calendar_date {
        height: 40px;
        font-size: 0.8rem;
    }

    .gform_appointment_times_title {
        font-size: 1.2rem;
    }

    .gform_appointment_time_slot {
        min-width: 45%; /* Make time slots fill more space on mobile */
        flex-basis: 45%;
    }
}/* End custom CSS */