.appointment-date {
    position: relative;
    margin: 20px 0;
}

.appointment-date input[type="date"] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #ffffff;
    color: #333;
    transition: all 0.3s ease;
    cursor: pointer;
}

.appointment-date input[type="date"]::-webkit-calendar-picker-indicator {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23007cba" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
    background-size: 20px 20px;
    cursor: pointer;
    padding: 5px;
}

.appointment-date label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 14px;
}

/* .accordion-wrapper {
    max-width: 700px;
    margin: 0 auto;
} */

.accordion-section {
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 10px;
}

.accordion-header {
    background: #f7f7f7;
    padding: 15px;
    font-weight: bold;
    cursor: pointer;
}

.accordion-content {
    display: none;
    padding: 15px;
    background: #fff;
}

.accordion-content.open {
    display: block;
}

.slot-option {
    width: calc(25% - 20px);
    display: inline-flex;
    align-items: center;
    position: relative;
    margin: 8px;
    padding: 12px 16px;
    border: 2px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #fafafa;
}

.slot-option:hover {
    background-color: #f0f8ff;
    border-color: #007cba;
}

.slot-option.selected {
    background-color: #e6f3ff;
    border-color: #007cba;
}

.slot-time {
    font-size: 14px;
    color: #333;
    display: block;
    text-align: center;
    width: 100%;
}

.tick-icon {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #007cba;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.slot-option.selected .tick-icon {
    display: flex;
}

.slot-duration-info {
    margin-top: 10px;
    color: #666;
}

.duration-badge {
    font-size: 0.8em;
    color: #666;
    font-weight: normal;
}

.slot-duration {
    font-size: 0.85em;
    color: #888;
    margin-left: 5px;
}

.break-slot {
    background-color: #ffe6e6;
    border-color: #ff9999;
    cursor: not-allowed;
    opacity: 0.7;
}

.break-icon {
    color: #d63638;
}

#date-status-message {
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
}

.off-day-message {
    background-color: #ffe6e6;
    color: #d63638;
    border: 1px solid #ff9999;
}

.available-day-message {
    background-color: #e6ffe6;
    color: #46b450;
    border: 1px solid #99ff99;
}

/* Enhanced Booked Slot Styling - Time Clearly Visible */
.available-slot.disabled {
    background: linear-gradient(135deg, #f8f8f8 0%, #eeeeee 100%);
    border: 2px solid #d32f2f;
    opacity: 0.8;
    cursor: not-allowed;
    position: relative;
    padding: 12px 16px 12px 16px; /* Extra padding on right for "BOOKED" label */
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 8px,
        rgba(211, 47, 47, 0.1) 8px,
        rgba(211, 47, 47, 0.1) 16px
    );
}

/* Keep time clearly visible and readable */
.available-slot.disabled .slot-time {
    color: #333; /* Keep time dark and readable */
    font-size: 14px;
    /* Remove line-through so time is clearly visible */
}


/* "BOOKED" label positioned clearly */
.available-slot.disabled::after {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 4px;
    font-size: 8px;
    font-weight: bold;
    color: #d32f2f;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 1px 4px;
    border-radius: 2px;
    border: 1px solid #d32f2f;
    z-index: 1;
    line-height: 1;
    text-align: center;
}

.reservation-pl .available-slot.disabled::after {
    content: "ZAREZERWOWANE";
}

.reservation-en .available-slot.disabled::after {
    content: "RESERVATION";
}


.not-available-tech::after {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 4px;
    font-size: 8px;
    font-weight: bold;
    color: #252525;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 1px 4px;
    border-radius: 2px;
    border: 1px solid #252525;
    z-index: 1;
    line-height: 1;
    text-align: center;
}

.reservation-pl .not-available-tech::after {
    content: "NIEDOSTĘPNE";
}

.reservation-en .not-available-tech::after {
    content: "NOT AVAILABLE";
}


/* Alternative styling - you can use this instead if you prefer */
.available-slot.booked-alt {
    background: #fff5f5;
    border: 2px dashed #f56565;
    opacity: 0.9;
    cursor: not-allowed;
    position: relative;
    padding: 12px 16px;
}

.available-slot.booked-alt .slot-time {
    color: #2d3748; /* Dark color for clear readability */
    font-weight: 500;
}

.available-slot.booked-alt::before {
    content: 'BOOKED';
    position: absolute;
    top: -8px;
    right: 8px;
    background: #f56565;
    color: white;
    font-size: 9px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 1;
}

/* Tooltip for booked slots - shows on hover */
/* .available-slot.disabled:hover::before {
    content: 'This time slot (' attr(data-start) ' - ' attr(data-end) ') is already booked';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 8px;
    pointer-events: none;
} */

/* .available-slot.disabled:hover::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
    margin-bottom: 3px;
    pointer-events: none;
} */

/* Subtle animation for booked slots */
.available-slot.disabled {
    animation: gentle-pulse 3s infinite;
}

@keyframes gentle-pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 0.6; }
}

/* Shake animation for better UX feedback */
.shake-animation {
    animation: shake 0.6s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Ensure available slots remain clearly styled */
.available-slot:not(.disabled):not(.booked) {
    background-color: #fafafa;
    border: 2px solid #ddd;
}

.available-slot:not(.disabled):not(.booked):hover {
    background-color: #f0f8ff;
    border-color: #007cba;
}

.available-slot:not(.disabled):not(.booked).selected {
    background-color: #e6f3ff;
    border-color: #007cba;
}