:root {
       --accent-1: #F59E0B;
       --accent-2: #1E293B;
       --light-gray: #EFEFEF;
       --gray: #242424;
       --black: #101010;
       --white: #FFFFFF;
       --shadow: rgba(0, 0, 0, 0.1);
       --border-radius: 0.75rem;
       --transition-duration: 0.3s;
   }

   .calendar-box {
       z-index: 10;
   }

   .calendar {
       position: absolute;
       top: calc(100% + 8px);
       left: 0;
       width: 14.583vw;
       background: var(--white);
       border-radius: var(--border-radius);
       box-shadow: 0 10px 20px var(--shadow);
       padding: 1rem;
       user-select: none;
       display: none;
       flex-direction: column;
       font-size: 0.729vw;
       color: var(--gray);
   }

   @media (max-width: 1399px) {
       .calendar {
           width: 18.583vw;
           font-size: 14px;
       }
   }

   @media (max-width: 820px) {
       .calendar {
           width: 35vw;
           font-size: 14px;
           z-index: 9;
       }
   }

   @media (max-width: 933px) {
       .calendar {
           left: -10px;
           width: 45.583vw;
           font-size: 14px;
           z-index: 9;
       }
   }
   @media (max-width: 520px) {
       .calendar {
           left: 50px;
           width: 68vw;
           font-size: 14px;
           z-index: 9;
       }
   }

   .calendar.active {
       display: flex;
   }

   .calendar-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 12px;
       font-weight: 600;
       font-size: 16px;
       color: var(--accent-2);
   }

   .calendar-header button {
       background: none;
       border: none;
       color: var(--accent-1);
       font-weight: 700;
       font-size: 20px;
       cursor: pointer;
       user-select: none;
       transition: color var(--transition-duration);
       padding: 0 8px;
   }

   .calendar-header button:hover {
       color: #D97706;
       /* Darker shade of accent-1 */
   }

   .days-of-week {
       display: grid;
       grid-template-columns: repeat(7, 1fr);
       text-align: center;
       font-weight: 600;
       color: var(--gray);
       margin-bottom: 8px;
   }

   .days-of-week div {
       padding: 4px 0;
   }

   .calendar-grid {
       display: grid;
       grid-template-columns: repeat(7, 1fr);
       gap: 6px;
   }

   .calendar-day {
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 6px 0;
       border-radius: 0.5rem;
       cursor: pointer;
       transition: background-color var(--transition-duration), color var(--transition-duration), transform 0.2s ease;
   }

   .calendar-day:hover {
       background: var(--accent-1);
       color: var(--white);
       transform: scale(1.06);
       z-index: 5;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   }

   .calendar-day.disabled {
       color: var(--light-gray);
       cursor: default;
       pointer-events: none;
   }

   .calendar-day.selected {
       background: var(--accent-1);
       color: var(--white);
       font-weight: 700;
       box-shadow: 0 0 6px var(--accent-1);
   }