.calendar-container{font-family:Arial,sans-serif;width:100%;max-width:500px;margin:20px auto;text-align:center}
.calendar-header{display:flex;justify-content:space-between;align-items:center}
.calendar-header h2{margin:0;flex:1;text-align:center}
.calendar-header button{background-color:#000;color:white;border:0;padding:8px 12px;font-size:16px;cursor:pointer;border-radius:0}
.calendar-header button:hover{background-color:#000}
.calendar-table{width:100%;border-collapse:collapse;margin-top:0}
.calendar-table th,.calendar-table td{border:1px solid #ddd;padding:10px;height:40px;text-align:center}
.calendar-table th{background-color:#f0f0f0}
.calendar-table td.past{color:#ccc;pointer-events:none;background-color:#f9f9f9}
.calendar-table td.future{cursor:pointer}
.calendar-table td.today{background-color:#000;font-weight:bold;color:#fff}
.modals{display:none;position:fixed;z-index:1000;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0,0,0,0.5)}
.modal-contents{background-color:#fff;margin:10% auto;padding:20px;width:320px;max-width:90%;border-radius:8px;text-align:center;position:relative;box-shadow:0 4px 12px rgba(0,0,0,0.25)}
.slot-options{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.slot-btn{padding:10px;border:1px solid #000;color:#000;border-radius:6px;font-weight:bold;cursor:pointer;transition:background-color .3s ease}
.close{position:absolute;top:8px;right:12px;font-size:22px;font-weight:bold;color:#666;cursor:pointer}
.past{color:#ccc;pointer-events:none}
.disabled{color:#ccc;pointer-events:none}
.future{cursor:pointer;transition:background-color .3s}
.today{font-weight:bold;border:2px solid red}