.calendar-container {
          width: 300px;
          margin: 20px auto;
          font-family: sans-serif;
        }

        .calendar-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;
        }

        .calendar-header button {
          background: none;
          border: none;
          font-size: 18px;
          cursor: pointer;
        }

        .calendar-header span {
          font-weight: bold;
          font-size: 16px;
        }

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

        .day,
        .blank {
          text-align: center;
          padding: 10px;
          border-radius: 4px;
          user-select: none;
        }

        .day {
          background: #f0f0f0;
          cursor: pointer;
        }

        .day.selected {
          background: var(--affiliBlue);
          color: white;
          font-weight: bold;
        }

        .weekday-label {
          font-size: 12px;
          font-weight: 600;
          color: #555;
        }