/**
 * © 2025 SoftAndTech. All rights reserved.
 * Licensed under the SoftAndTech Proprietary License.
 * See LICENSE file for details.
 */

:root { /* Luxury Color Palette */ --primary-color: #5d4e6d; /* Deep muted purple (primary accent) */ --primary-light: #8a7a99; /* Lighter purple for highlights */ --secondary-color: #e8e5e0; /* Soft warm gray (background/UI) */ --accent-color: #c0a080; /* Warm gold accent (buttons/today) */ --text-color: #333333; /* Deep charcoal for readability */ --light-text: #7a7a7a; /* Medium gray for secondary text */ --today-color: #f0e6d2; /* Pale champagne for today's date */ /* Luxury metallic accents */ --gold-light: #f5e7c6; --gold-dark: #b38b6d; /* Status colors */ --booked-color: #d4c8c8; /* Muted rose for booked dates */ --error-color: #a35c6e; /* Deep rose for errors */ } /* Calendar container */ @keyframes wiggle { 0% { transform: rotate(1deg); } 25% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } 100% { transform: rotate(-1deg); } } .calander-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px; } .calendar { display: flex; flex-direction: column; gap: 20px; } .calendar .msg-container { position: absolute; width: 100%; height: 100%; text-align: center; z-index: 1; left: 0; right: 0; } .calendar .msg-container .Cal-Disp-Msg { background: var(--secondary-color); color: var(--error-color); border-left: 4px solid var(--error-color); box-shadow: 0 4px 20px rgba(163, 92, 110, 0.15); padding: 1em; text-align: center; position: absolute; top: 20%; left: 0; right: 0; border-radius: 0.375rem; width: fit-content; margin: 0 auto; animation: .2s ease-in-out 4 wiggle; border: 1px solid #b33535; } .calendar .msg-container .Cal-Disp-Msg::before { content: "⚠"; padding-right: 5px; font-size: 1.25rem; } /* Optional close button */ .calendar .msg-container .Cal-Disp-Msg::after { content: "×"; position: absolute; top: 0.5rem; right: 0.75rem; font-size: 1.1rem; cursor: pointer; color: #9ca3af; transition: color 0.2s; } .calendar .msg-container .Cal-Disp-Msg::after:hover { color: #6b7280; } .calendar .calendar-wrapper { flex: 1; min-width: 300px; max-width: 400px; background: var(--secondary-color); border: 1px solid var(--gold-light); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); border-radius: 12px; overflow: hidden; } .calendar-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: linear-gradient(to right, var(--primary-color), var(--primary-light)); color: white; border-bottom: 1px solid var(--gold-dark); } .calendar-header button { background: none; border: none; color: white; font-size: 18px; cursor: pointer; padding: 5px 10px; border-radius: 4px; transition: background 0.2s; } .calendar-header button:hover { background: rgba(255, 255, 255, 0.2); } .calendar-header span { font-size: 18px; font-weight: 500; } .calendar-body { padding: 15px; } .calendar .hiddenselect { background: rgba(198, 242, 194, 0.5490196078) !important; } .calendar .week-header { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 10px; text-align: center; } .calendar .week-header .week-day { font-size: 14px; color: var(--light-text); font-weight: 600; padding: 5px; font-family: Arial, sans-serif; } .calendar .calendar-body .days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .calendar .calendar-months-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; } .calendar .day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; font-size: 14px; transition: all 0.2s; } .calendar .day:hover { background-color: var(--secondary-color); } .calendar .booked { background: repeating-linear-gradient( 45deg, var(--secondary-color), var(--secondary-color) 2px, var(--booked-color) 2px, var(--booked-color) 4px ); color: var(--primary-color); cursor: not-allowed; position: relative; font-weight: 500; overflow: hidden; } .calendar .booked::before { width: 100%; max-width: 50px; content: "Booked"; font-size: .6rem; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); color: #fff; background: #bd0c78; padding: 1px 5px; box-shadow: 0 1px 3px rgba(0,0,0,.1); line-height: 1; text-align: center; white-space: nowrap; } .calendar .date_selected { background-color: #9cc868 !important; color: white; } .calendar .date_today { background: var(--today-color); color: var(--text-color); border: 1px solid var(--gold-dark); font-weight: 600; } .day.other-month { color: var(--light-text); opacity: 0.5; } .calendar-legend { display: flex; justify-content: center; padding: 1em; font-size: 0.9rem; color: #333; margin: 1em; gap: 10px; } .calendar-legend .legend-item { display: flex; align-items: center; gap: 5px; } .calendar-legend .legend-box { width: 15px; height: 15px; border-radius: 4px; margin: 0.25rem; } .calendar-legend .legend-box.legend-booked { background-color: #fdb4b4; } .calendar-legend .legend-box.legend-selected { background-color: #9cc868; } .calendar-legend .legend-box.legend-today { background-color: #ddd; } .calendar-legend .legend-box.legend-disabled { background-color: #f0f0f0; } .calendar .disabled { background-color: #f0f0f0; color: #aaa; cursor: not-allowed; } /* Responsive styles */ @media (max-width: 768px) { .calendar-months-container { flex-direction: column; align-items: center; } .calendar-wrapper { width: 100%; } }